How do you code a grand total on each stacked column chart (Google Charts)?

Question

I have a Stacked Column chart to which I want to add a "Grand Total" label at the top as the sum of each year. The temporary solution I found was to add it in as another { role: 'annotation' } and delete the background color, but it leaves a gap above the actual data.

Is there to code for a function to get the sum of each stacked column to display?

Here is what the code looks like so far:

function drawChart() {
            // Define the chart to be drawn.
  
            var data = google.visualization.arrayToDataTable([
               ['Year', 
                'Gangs', { role: 'annotation' },
                'No Gangs', { role: 'annotation' },
                'Total', { role: 'annotation' },
               ],
               ['2012',  110,110, 488,488, 590,590],
               ['2013',  110, 110,488,488,598,598],
             ['2014',  114,114, 522,522,590,590],
               ['2015',  85,85, 521,521,590,590],
               ['2016',  82,82, 590,590,590,590],
               ['2017',  79, 79,  548, 548,590,590], 
               ['2018',  49, 49,  432,432,590,590], 
               ['2018',  41, 41, 524, 524,590,590],
            ]);

          
            var options = {title: 'Violent Crimes by Gang Rates',
                           vAxis: {title: 'Violent Deaths'},
                           vAxis:{maxValue: 800},
                            seriesType: 'bars',
                          //series: {2: {type: 'line'}},
                           colors: ['#1586DB', '#E37D24', '#fff'],
                           legend: {position: 'bottom', maxLines: 3},
                           isStacked:true};  
   
   
   //test
   
  var totalSeries;

            // Instantiate and draw the chart.
            var chart = new google.visualization.ColumnChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);

Answer 1

I don't know if this is quite what you're looking for (and it is a bit of a hack), but you can take advantage of calculated columns to automatically sum the elements in each row. You can see the full working example in this JSFiddle .

In the example, I've replaced your duplicate entries with calculated columns using view.setColumns to generate annotations (to avoid redundant data). I've used this same technique to generate a calculated column that provides a "grand total" annotation. In order for this column to display correctly, I've added an empty series (ie, 0 ) at the end of each row that simply provides a "buffer" between the annotation for series 1 and the "grand total" annotation (if this isn't inserted, the "grand total" annotation tries to associate with column 2, which ruins the formatting). I've generated the grand total using a calculated column that sums values from the previous two.

With the "dummy" column on the end, your data now looks like this:

var data = google.visualization.arrayToDataTable([
    ['Year',
     'Gangs',
     'No Gangs',
     '' // our "dummy" column
    ],
    ['2012', 110, 488, 0],
    ['2013', 110, 488, 0],
    ['2014', 114, 522, 0],
    ['2015', 85, 521, 0],
    ['2016', 82, 590, 0],
    ['2017', 79, 548, 0],
    ['2018', 49, 432, 0],
    ['2018', 41, 524, 0],
]);

To "hide" the "dummy" column as best I can, I've added the following to your options object:

series: {
    2: {
       enableInteractivity: false,
       visibleInLegend: false,
       annotations: {
           stem: {
               length: 0
           }
       }
    }
}

Also, you'll want to change the "dummy" column's color (since it's the color in which the annotation will display) to something other than white (I picked black in my example).

Lastly, you'll need to use a DataView to take advantage of calculated columns. The DataView then becomes the object passed to draw , as follows:

var view = new google.visualization.DataView(data);
view.setColumns([
    0, 1, // Displays columns 0 and 1 normally
    { // "Calculates" an annotation for column 1 and displays immediately after that column
        calc: "stringify",
        sourceColumn: 1,
        type: "string",
        role: "annotation"
    },
    2, // Displays column 2 normally
    {
        calc: "stringify",
        sourceColumn: 2,
        type: "string",
        role: "annotation"
    }, // "Calculates" column 2 annotation
    3, // Displays our dummy column for the purposes of preventing the following annotation from associating with column 2
    { // Computes a "grand total" by summing the values from columns 1 and 2
        calc: (table, row) => (table.getValue(row, 1) + table.getValue(row, 2)).toString(),
        type: "string",
        role: "annotation"
    },
]);
      
// Instantiate and draw the chart.
var chart = new google.visualization.ColumnChart(document.getElementById('container'));
chart.draw(view, options);