Totals row in a table chart

[Phil Grant]

Alexander,
Sorry but I just don’t understand the option “Show totals row for table chart” I’ve selected this but I get an error at the bottom of the chart.
Most columns in my table are strings with one that’s a number I wish to total, this is Col. 12, how can I show a total of these values?

I guess I’m missing something obvious or the option isn’t what I think it is.

Regards,
Phil

• This topic was modified 6 years, 4 months ago by Alexander Bautz. Reason: Moved to correct forum

[Alexander Bautz]

Hi,
I’m not sure which error you get, but you must specify the first column in the chart as Data Type String and not as Number.

Alexander

[Phil Grant]

Ok, the first column is set as a number (Id) so I can change that but which rows are totalled, can it be specified?

[Alexander Bautz]

Columns with data type Number is totaled.

Alexander

[Phil Grant]

OK, Makes sense I suppose, I’ll give it a try.

Thanks

[Phil Grant]

Alexander,
That worked.

Sorry, I just realised I posted in the wrong forum, should have been in SPJS charts.

Is there any way to format the Totals row, I’ve looked a “inspect element” but cannot see how to sort it.

[Alexander Bautz]

You can format the totals row by adding a Script Editor Web Part to the page and add this CSS:

<style type="text/css">
.google-visualization-table-table tr:last-child td{
	font-weight:bold;
	color:red;
}
</style>

I moved the topic to the correct forum.

Alexander

[Phil Grant]

Brilliant, thanks for the help.

[Phil Grant]

Alexander,
Tried it this morning but doesn’t seem to work.
I added a CEWP webpart and pointed to a CSS file in the SPJS folder
The left alignment works so the file is being processed but the totals row isn’t affected at all.

<style type="text/css">
.spjs_filterPlaceholderInner{
    text-align:left!important;
}
.google-visualization-table-table tr:last-child td{
	font-weight:bold;
	color:red;
}
</style>

Cheers,
Phil

• This reply was modified 6 years, 4 months ago by Phil Grant.
• This reply was modified 6 years, 4 months ago by Phil Grant.
• This reply was modified 6 years, 4 months ago by Phil Grant.

[Alexander Bautz]

Try adding the !important flag like this:

.google-visualization-table-table tr:last-child td{
	font-weight:bold!important;
	color:red!important;
}

Alexander

[Phil Grant]

Sorry, still not working.

[Alexander Bautz]

Strange, try using the developer tools to inspect the table row like the attached image.

Alexander

Attachments:

1. 

   tableChartFormatting.png
   

[Phil Grant]

I just opened it in Chrome so I get a similar look to your and the CSS seems to have worked in Chrome …..ARGHHHH!

I suppose i’s something to do with IE and sharepoint 2010 again 🙁

[Alexander Bautz]

Ah – yes, I didn’t think of it but IE doesn’t support the last-child selector when in IE8-mode.

You can fix it with JavaScript, but it’s not as clean as with CSS. Look at this part of the user manual: https://spjsblog.com/spjs-charts-for-sharepoint/spjs-charts-for-sharepoint-user-manual/#Attaching_an_event_handler

Add the ready-event code (adapt it to your chart) and have it run this snippet when your chart is ready:

jQuery(".google-visualization-table-table tr:last td").css({
	"font-weight":"bold",
	"color":"red"
});

Alexander

[Phil Grant]

Thanks, we should be switching to SharePoint 2016 Enterprise later in the year, hopefully it will be easier to use!

[Phil Grant]

Alexander,
Just to let you know that your solution works great,

Thanks,
Phil

[Alexander Bautz]

Thanks for the feedback.

Alexander

[Author]

Posts