Totals row in a table chart

Home 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 6 years, 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 6 years, 3 months ago by Phil Grant.
                        • This reply was modified 6 years, 3 months ago by Phil Grant.
                        • This reply was modified 6 years, 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.