Totals row in a table chart

Forums SPJS Charts for SharePoint Totals row in a table chart

Tagged: ,

Viewing 15 reply threads
  • Author
    Posts
    • #21729
      Phil Grant
      Participant

      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 1 year, 3 months ago by  Alexander Bautz. Reason: Moved to correct forum
    • #21761
      Alexander Bautz
      Keymaster

      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

    • #21768
      Phil Grant
      Participant

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

    • #21774
      Alexander Bautz
      Keymaster

      Columns with data type Number is totaled.

      Alexander

    • #21780
      Phil Grant
      Participant

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

      Thanks

    • #21803
      Phil Grant
      Participant

      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.

      • #21812
        Alexander Bautz
        Keymaster

        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

    • #21818
      Phil Grant
      Participant

      Brilliant, thanks for the help.

    • #21824
      Phil Grant
      Participant

      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 1 year, 3 months ago by  Phil Grant.
      • This reply was modified 1 year, 3 months ago by  Phil Grant.
      • This reply was modified 1 year, 3 months ago by  Phil Grant.
    • #21830
      Alexander Bautz
      Keymaster

      Try adding the !important flag like this:

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

      Alexander

    • #21832
      Phil Grant
      Participant

      Sorry, still not working.

    • #21834
      Alexander Bautz
      Keymaster

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

      Alexander

    • #21837
      Phil Grant
      Participant

      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 🙁

    • #21839
      Alexander Bautz
      Keymaster

      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

    • #21841
      Phil Grant
      Participant

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

    • #21847
      Phil Grant
      Participant

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

      Thanks,
      Phil

    • #21851
      Alexander Bautz
      Keymaster

      Thanks for the feedback.

      Alexander

Viewing 15 reply threads
  • You must be logged in to reply to this topic.