javascript - How do I show annotations on my Google Chart that extracts data from a Google Spreadsheet? -

i have google chart displays data.

here html -

<div id="chart"></div> 

here css -

html, body {     width: 100%;     height: 100%; }  #chart {     width: 100%; } 

here js -

google.charts.load('current', {     'packages': ['corechart'] });  google.charts.setonloadcallback(drawchart);  function drawchart() {     var query = new     google.visualization.query("https://docs.google.com/spreadsheets/d/1wlbwmwwu_bxcpxm8tlkntkr4gbeqz_o8curzddqmuam/gviz/tq?gid=799372846&range=a:b");      query.send(handlequeryresponse); }  function handlequeryresponse(response) {     var data = response.getdatatable();      var chartareaheight = data.getnumberofrows() * 10;      var chartheight = chartareaheight + 70;      var options = {         title: "andaman & nicobar islands",         legend: "none",         vaxis: {             title: "year",             format: "0",         },         haxis: {             title: "rainfall (in mm)"         },         height: chartheight,         chartarea: {             height: chartareaheight,             top: "100",             right: "100",             bottom: "100",             left: "100"         }     };      var chart = new     google.visualization.barchart(document.getelementbyid("chart"));      chart.draw(data, options); };  window.onresize = function (event) {     chart.draw(data, options); }; 

now, want display annotations beside bars displaying value of bar. how do that?

here jsfiddle

to add annotations, add column annotation text, directly after column values.

in following example, dataview used add calculated column annotations.

also, resize function needs included in same scope chart.
in fiddle provided, error occur when window resized,
chart, data, , options variables not available.

see following, working example...

google.charts.load('current', {    'packages': ['corechart']  });    google.charts.setonloadcallback(drawchart);    function drawchart() {    var query = new google.visualization.query("https://docs.google.com/spreadsheets/d/1wlbwmwwu_bxcpxm8tlkntkr4gbeqz_o8curzddqmuam/gviz/tq?gid=799372846&range=a:b");    query.send(handlequeryresponse);  }    function handlequeryresponse(response) {    var data = response.getdatatable();    var chartareaheight = data.getnumberofrows() * 10;    var chartheight = chartareaheight + 70;    var options = {      // add text style annotation      annotations: {        textstyle: {          fontsize: 8        }      },      title: "andaman & nicobar islands",      legend: "none",      vaxis: {        title: "year",        format: "0"      },      haxis: {        title: "rainfall (in mm)"      },      height: chartheight,      chartarea: {        height: chartareaheight,        top: "100",        right: "100",        bottom: "100",        left: "100"      }    };      // format data annotation    var formatter = new google.visualization.numberformat({pattern: '#,##0.0'});    formatter.format(data, 1);      // use view add annotation column    var view = new google.visualization.dataview(data);    view.setcolumns([0, 1, {      calc: "stringify",      sourcecolumn: 1,      type: "string",      role: "annotation"    }]);      var chart = new google.visualization.barchart(document.getelementbyid("chart"));    chart.draw(view, options);      window.addeventlistener('resize', function () {      chart.draw(view, options);    }, false);  }

html,  body {    width: 100%;    height: 100%;  }    #chart {    width: 100%;  }

<script src="https://www.gstatic.com/charts/loader.js"></script>  <div id="chart"></div>