Annotation on stacked Google Charts using <google.charts.Bar> and <series> option

Question

Does anyone know if it is even possible to add annotation on a chart created with the function google.charts.Bar?

The reason I am using google.charts.Bar instead of google.visualization.ColumnChart is that I need to have multiple stacked columns for 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 1

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>