Adding annotations to Google Candlestick chart - Javascript Google Chart

Javascript examples for Google Chart:Chart Configuration

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

Description

Adding annotations to Google Candlestick chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>An Example of a Google Bar Chart</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="columnchart_values" style="width: 900px; height: 500px;"></div> 
      <script type="text/javascript">
      google.charts.load("current", {packages:['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {/*www .j  a v a 2  s  .  co m*/
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Searches'],
          ['1998', 9800],
          ['2000', 60000000],
          ['2007', 1200000000],
          ['2008', 1745000000],
          ['2009', 2610000000],
          ['2010', 3627000000],
          ['2011', 4717000000],
          ['2012', 5134000000],
          ['2013', 5922000000],
          ['2014', 5740000000]
        ]);
        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" }]);
        var options = {
            title: 'Google searches',
            subtitle: 'Average searches per day 1998-2014',
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_values'));
        chart.draw(view, options);
      }

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

Related Tutorials