Add multiple-line annotations in Google Chart - Javascript Google Chart

Javascript examples for Google Chart:Line Chart

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

Description

Add multiple-line annotations in Google 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"> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
   </head> 
   <body> 
      <div id="line-chart-marker"></div> 
      <script type="text/javascript">
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {//from  www . j  a  v  a 2 s.  co  m
var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time');
      data.addColumn('number', 'Temp');
      data.addColumn({type:'string', role:'annotation'});
      data.addColumn({type:'string', role:'annotation'});
      data.addRows([
        [[4, 56, 00], 0, '0', 'rain'],    [[5, 56, 00], 10, '10', 'drizzle'],   [[6, 56, 00], 23, '23', 'cats'],  [[7, 56, 00], 17, '17', 'partly cloudy'],   [[8, 56, 00], 18, '18', 'sunny'],  [[9, 56, 00], 9, '9', 'sunny'],  [[10, 56, 00], 11, '9', 'sunny'], ]);
      var options = {
        hAxis: {
          gridlines:{ color:'transparent' },
        },
        vAxis: {
          gridlines:{ color:'transparent' },
          textPosition: 'none'
        },
        legend: 'none',
        colors: ['black'],
        curveType: 'function',
        series: {
            0: { lineWidth: 5 },
          },
      };
      var chart = new google.visualization.LineChart(document.getElementById('line-chart-marker'));
      chart.draw(data, options);
    }

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

Related Tutorials