Column Charts with annotations (data comes from a spreadsheet)

[Mark de Ruiter]

Hi there,

I've been searching the web for an answer but I wasn't able to find one. There are enough examples for adding annotations to a chart with static data.

My page has the following code to load a spreadsheet and show the results in a Column Chart. So far everything works fine.

But I want to add annotations on top of the bars. Is this possible?

Thanks in advance.

Greetings,

Mark

<script type="text/javascript">
    google.load("visualization", '1.1', {packages:['corechart']});
    google.setOnLoadCallback(drawSheetName);


    // [START sheet_name]
    function drawSheetName() {
      var queryString = encodeURIComponent('SELECT A, B, C, D');


      var query = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1QKmP-5BNlLjeG3-dWfUd6qgh1Gig69ZfPRv6Aktapiw/gviz/tq?sheet=Score&headers=1&tq=' + queryString);
      query.send(handleSampleDataQueryResponse);
    }


    function handleSampleDataQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }


      var data = response.getDataTable();
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, { 'colors': ["#194D86","#699A36", "#9C1006", "#951B81"],
   titleTextStyle: {
       color: 'red'
   },
   hAxis: {
       textStyle: {
           color: 'red',
           fontName: 'Segoe UI'
       },
       titleTextStyle: {
           color: 'red',
           fontName: 'Segoe UI'
       }
   },
   vAxis: {
       textStyle: {
           color: 'red',
           fontName: 'Segoe UI'
       },
       titleTextStyle: {
           color: 'red',
           fontName: 'Segoe UI'
       }
   },
               legend: 'none',
   // legend: { textStyle: { color: 'red', fontName: 'Segoe UI' }}
                        chartArea:{left:50,top:20,width:"100%",height:"80%"}
 })
     
                $(window).resize(function(){
                drawSheetName();
                drawChart2();
                });
    }
    // [END sheet_name]
  </script>