Annotation Google Chart error - Javascript Google Chart

Javascript examples for Google Chart:Chart Configuration

  1. HOME
  2. Javascript
  3. Google Chart
  4. Chart Configuration

Description

Annotation Google Chart error

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Annotation Chart Example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <div id="chart_div" style="width:auto; height:auto;"></div> 
      <script type="text/javascript">
      google.charts.load('current', {
        'packages': ['annotationchart']
      });/*  www . j  ava  2 s. co  m*/
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Kepler-22b mission');
        data.addColumn('string', 'Kepler title');
        data.addColumn('string', 'Kepler text');
        data.addRows([
          [new Date(2314, 2, 15), 1, undefined, undefined],
          [new Date(2314, 2, 16), 100, 'Lalibrtines', 'First encounter'],
          [new Date(2314, 2, 17), 1, 'Lalibnes', 'They are very tall'],
          [new Date(2314, 2, 18), 100, 'bertines', 'Attack on our cr'],
          [new Date(2314, 2, 19), 1, 'Lalibertines', 'Heavy casualties'],
          [new Date(2314, 2, 20), 1, 'Lalibertines', 'All crew lost']
        ]);
        var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
        var options = {
          displayAnnotations: true,
          chart: {
            vAxis: {
              direction: -1
            }
          },
          range: {
            ui: {
              chartOptions: {
              vAxis: { direction: -1 }
              }
            }
          },
        displayAnnotationsFilter: true,
          thickness: 3,
          max: 100,
          min: 0
        };
        chart.draw(data, options);
      }

      </script>  
   </body>
</html>

Related Tutorials