Annotation on stacked Google Charts using <google.charts.Bar> and <series> option -
does know if possible add annotation on chart created function google.charts.bar?
the reason using google.charts.bar instead of google.visualization.columnchart need have multiple stacked columns each period.

google.load("visualization", "1", { packages: ["corechart", "bar", "table"] }); google.setonloadcallback(drawchart); function drawchart() { var data = new google.visualization.datatable(); data.addcolumn('string', 'period'); data.addcolumn('number', 'ahma ps'); data.addcolumn('number', 'others ps'); data.addcolumn('number', 'ahma ab'); data.addcolumn('number', 'others ab'); data.addcolumn('number', 'ahma cc'); data.addcolumn('number', 'others cc'); data.addrows([ ['apr', 30, 50, 10, 60, 2, 40], ['mar', 30, 2, 10, 60, 2, 40], ['feb', 30, 50, 10, 60, 2, 40], ['jan', 30, 50, 10, 60, 2, 40] ]); var view = new google.visualization.dataview(data); view.setcolumns([0, 1, { calc: "stringify", sourcecolumn: 1, type: "string", role: "annotation" }, 2, { calc: "stringify", sourcecolumn: 2, type: "string", role: "annotation" }, 3, { calc: "stringify", sourcecolumn: 3, type: "string", role: "annotation" }, 4, { calc: "stringify", sourcecolumn: 4, type: "string", role: "annotation" }, 5, { calc: "stringify", sourcecolumn: 5, type: "string", role: "annotation" }, 6, { calc: "stringify", sourcecolumn: 6, type: "string", role: "annotation" } ]); var options = { isstacked: true, series: { 2: { targetaxisindex: 1 }, 3: { targetaxisindex: 1 }, 4: { targetaxisindex: 2 }, 5: { targetaxisindex: 2 } }, vaxis: { viewwindow: { min: 0, max: 100 } } }; var chart = new google.charts.bar(document.getelementbyid('google-chart')); chart.draw(view, google.charts.bar.convertoptions(options)); } <script src="https://www.google.com/jsapi"></script> <div id="google-chart"></div>
answer:
<script type="text/javascript"> $(document).ready(function () { google.charts.load('current', { 'packages': ['bar'] }); google.charts.setonloadcallback(drawchart); }); function drawchart() { alert('ok'); var data = new google.visualization.datatable(); data.addcolumn('string', 'period'); data.addcolumn('number', 'ahma ps'); data.addcolumn('number', 'others ps'); data.addcolumn('number', 'ahma ab'); data.addcolumn('number', 'others ab'); data.addcolumn('number', 'ahma cc'); data.addcolumn('number', 'others cc'); data.addrows([ ['apr', 30, 50, 10, 60, 2, 40], ['mar', 30, 2, 10, 60, 2, 40], ['feb', 30, 50, 10, 60, 2, 40], ['jan', 30, 50, 10, 60, 2, 40] ]); var view = new google.visualization.dataview(data); view.setcolumns([0, 1, { calc: "stringify", sourcecolumn: 1, type: "string", role: "annotation" }, 2, { calc: "stringify", sourcecolumn: 2, type: "string", role: "annotation" }, 3, { calc: "stringify", sourcecolumn: 3, type: "string", role: "annotation" }, 4, { calc: "stringify", sourcecolumn: 4, type: "string", role: "annotation" }, 5, { calc: "stringify", sourcecolumn: 5, type: "string", role: "annotation" }, 6, { calc: "stringify", sourcecolumn: 6, type: "string", role: "annotation" } ]); var options = { isstacked: true, series: { 2: { targetaxisindex: 1 }, 3: { targetaxisindex: 1 }, 4: { targetaxisindex: 2 }, 5: { targetaxisindex: 2 } }, vaxis: { viewwindow: { min: 0, max: 100 } } }; var chart = new google.charts.bar(document.getelementbyid('google-chart')); chart.draw(view, google.charts.bar.convertoptions(options)); } </script>
Comments
Post a Comment