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

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

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

ruby - Net::HTTP extremely slow responses for HTTPS requests -