Since you are already annotating all of your data points, you need to get a
little hacky. Create another series that is the sum total of all other
series using a DataView. Switch your chart type to "ComboChart", and make
this new series a "line" type series with point size 0, line width 0,
interactivity disabled, and hidden from the legend.
var offset = 10; // you will need to experiment with different offset
values to get the annotations to not overlap
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, 3, 4, 5, 6, {
type: 'number',
calc: function (dt, row) {
return dt.getValue(row, 1) + dt.getValue(row, 3) + dt.getValue(row,
5) + offset;
}
}, {
type: 'string',
role: 'annotation',
calc: function (dt, row) {
return dt.getValue(row, 1) + dt.getValue(row, 3) + dt.getValue(row,
5); // you may want to format this value
}
}]);
new
google.visualization.ComboChart(document.getElementById('visualization')).draw(view,
{
titlePosition: 'none',
chartArea:{left:60,top:50,width:'800',height:'83%'},
width:969, height:400,
isStacked: true,
fontSize:12,
colors: ['#cc00cc', '#ccffcc', '#aaffcc'],
legend: { position: 'top', alignment: 'end' },
bar: {groupWidth: "90%"},
annotations: {
textStyle: { fontSize: 12, color: '#871b47', auraColor: '#d799ae',
opacity: 0.8 }
},
seriesType: 'bars', // sets the default series type
series: {
3: {
// this line series will be hidden from the user, but the
annotation will still display
type: 'line',
pointSize: 0,
lineWidth: 0,
enableInteractivity: false,
visibleInLegend: false
}
}
});
On Monday, July 21, 2014 11:35:25 AM UTC-4, David S wrote:
>
> Hi,
>
> I have the code below and Id like to add a further annotation with the
> column total, which floats above each column, is there any way to do this.
> Ive been trying for about 2 hours!!
>
> function drawVisualization() {
> // Create and populate the data table.
> var data = google.visualization.arrayToDataTable([
> ['Day', 'Pending',{role: 'annotation'}, 'Partial', {role: 'annotation'
> }, 'Complete', {role: 'annotation'}],
> ['Sat, 22 Feb', 60, 60, 61,90, 15,76],
> ['Sun, 23 Feb', 156,156, 36,1, 50,76],
> ['Mon, 24 Feb', 19,19, 44, 2, 60,76],
> ['Tue, 25 Feb', 152,152, 43,5, 10,98],
> ['Wed, 26 Feb', 13,13, 32, 6, 98,66],
> ['Thur, 27 Feb', 67, 67, 56, 7, 9,5],
> ['Fri, 28 Feb', 197,197, 56,8, 91,4],
> ['Sat, 01 Mar', 17,17, 56, 9, 65,66],
> ]);
>
> // Create and draw the visualization.
> new google.visualization.ColumnChart(document.getElementById(
> 'visualization')).
> draw(data,
> {titlePosition: 'none',
> chartArea:{left:60,top:50,width:'800',height:'83%'},
> width:969, height:400,
> isStacked: true,
> fontSize:12,
> colors: ['#cc00cc', '#ccffcc', '#aaffcc'],
> legend: { position: 'top', alignment: 'end' },
> bar: {groupWidth: "90%"},
> annotations: {
> textStyle: { fontSize: 12, color: '#871b47', auraColor:
> '#d799ae', opacity: 0.8 }
>
> &
> ...
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
