Google Line Chart with Year format - Javascript Google Chart

Javascript examples for Google Chart:Line Chart

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

Description

Google Line Chart with Year format

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <div id="my_chart"></div> 
      <script type="text/javascript">
   google.charts.load('current', {'packages':['line']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {//from  ww  w  . jav a2  s .c  om
                  var data = new google.visualization.DataTable();
                  data.addColumn('date', 'Year');
                  data.addColumn('number', 'Altogether');
                  data.addColumn('number', 'Product 1');
                  data.addColumn('number', 'Product 2');
        data.addRows([
         [new Date(2009,1,1), 21, 13, 8], [new Date(2010,1,1), 32, 17, 15],
                        [new Date(2011,1,1), 48, 38, 10], [new Date(2012,1,1), 53, 34, 19],
                        [new Date(2013,1,1), 59, 44, 15], [new Date(2014,1,1), 56, 46, 10],
                        [new Date(2015,1,1), 56, 48, 8], [new Date(2016,1,1), 6, 5, 1]
        ]);
                  var options = {
                    width: 1000,
                    height:500,
                    hAxis: {
            format: 'yyyy',
            gridlines: {count: 15}
          },
                    axes: {
                    }
                  };
                  var chart = new google.charts.Line(document.getElementById('my_chart'));
                  chart.draw(data, options);
                }
                    $(window).resize(function(){
                    drawChart();
                    });

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

Related Tutorials