Create line chart - Javascript Google Chart

Javascript examples for Google Chart:Line Chart

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

Description

Create line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){//from   w  ww.  j  a  v a 2  s  . co  m
google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', '2015');
    data.addColumn('number', '2016');
    data.addRows([
       [new Date('01/01/2016'), 200, 210],
       [new Date('02/01/2016'), 190, 220],
       [new Date('03/01/2016'), 205, 200],
       [new Date('04/01/2016'), 220, 230],
       [new Date('05/01/2016'), 212, 210],
       [new Date('06/01/2016'), 185, 193],
       [new Date('07/01/2016'), 196, 207]
    ]);
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    google.visualization.events.addListener(chart, 'ready', function () {
      window.open(chart.getImageURI(), '_blank');
    });
    chart.draw(data, {
      hAxis: {
        format: 'MMM'
      },
      height: 400
    });
  },
  packages: ['corechart']
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://www.gstatic.com/charts/loader.js"></script> 
      <div id="chart_div"></div> 
      <div id="image_div"></div>  
   </body>
</html>

Related Tutorials