Google Chart, how to move annotation on top of columns -
i'm using google chart's stacked column chart, wanna achieve display total on top of each column , i'm using annotation this. @ image, somehow annotation on 5th column (1,307.20) working expected.
as investigate , seem bug of google chart , bug can explained below
[[date, car, motobike, {role: :annotation}], [june 2015, 500, 0, 500], [feb 2015, 500, 600, 1100]] [march 2015, 700, 0, 700],
with above data, annotation feb 2015 displayed correctly , other 2 not since last value of 0 , when change last value 1 june , march , annotation displayed correctly.
then think of work around display "non-zero" data on top , , here's result:
the annotations moved on top , can see, it's located within column , want achieve move on top of column .
i'm stuck while , google documentation doesn't case. highly appreciated
i had same problem, of series had 0 last value label show on x axis instead of @ top. dynamic data real challenge ensure last value never 0. @dlaliberte gave me hint start comment:
"as workaround, might consider using combochart series draw point @ top of each column stack. you'll have compute total of other series know put each point."
i found combo chart google's gallery , opened jsfiddle see do. left data mostly, changed series name labels , made numbers little simpler. don't caught on purpose of graph data regardless, wanted figure out how annotation top of graph when last column 0 (https://jsfiddle.net/l5wc8rcp/1/):
function drawvisualization() { // raw data (not accurate) var data = google.visualization.arraytodatatable([ ['month', 'bolivia', 'ecuador', 'madagascar', 'papua new guinea', 'rwanda', 'total', {type: 'number', role: 'annotation'}], ['application', 5, 2, 2, 8, 0, 17, 17], ['friend', 4, 3, 5, 6, 2, 20, 20], ['newspaper', 6, 1, 0, 2, 0, 9, 9], ['radio', 8, 0, 8, 1, 1, 18, 18], ['no referral', 2, 2, 3, 0, 6, 13, 13] ]); var options = { isstacked: true, title : 'monthly coffee production country', vaxis: {title: 'cups'}, haxis: {title: 'month'}, seriestype: 'bars', series: {5: {type: 'line'}}, }; var chart = new google.visualization.combochart(document.getelementbyid('chart_div')); chart.draw(data, options); }
that produced graph, great start:
as can see since series 5 (our total of other series) type: 'line'
, point top of stack. now, didn't want line in chart, since not used compare continuous horizontal totals, updated series 5 linewidth: 0
, , made title of category '' wouldn't included in legend stack (https://jsfiddle.net/lpgty7rq/):
function drawvisualization() { // raw data (not accurate) var data = google.visualization.arraytodatatable([ ['month', 'bolivia', 'ecuador', 'madagascar', 'papua new guinea', 'rwanda', '', {type: 'number', role: 'annotation'}], ['application', 5, 2, 2, 8, 0, 17, 17], ['friend', 4, 3, 5, 6, 2, 20, 20], ['newspaper', 6, 1, 0, 2, 0, 9, 9], ['radio', 8, 0, 8, 1, 1, 18, 18], ['no referral', 2, 2, 3, 0, 6, 13, 13] ]); var options = { isstacked: true, title : 'monthly coffee production country', vaxis: {title: 'cups'}, haxis: {title: 'month'}, seriestype: 'bars', series: {5: {type: 'line', linewidth: 0}}, }; var chart = new google.visualization.combochart(document.getelementbyid('chart_div')); chart.draw(data, options); }
and voila!
Comments
Post a Comment