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.

enter image description here

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

Popular posts from this blog

java - Spring Data JPA: Why findOne(id) executing delete query internally? -

python - Mongodb How to add addtional information when aggregating? -

java - Incorrect order of records in M-M relationship in hibernate -