Line Chart Example

An example of a Google Line Chart.

by Roberto Remondini

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
       <div id="chart_div" style="width: 900px; height: 300px;"></div>
       <div id="chart_div_2" style="width: 900px; height: 300px;"></div>

JavaScript

google.setOnLoadCallback(drawChart);
      function drawChart() {
      
      /*var reply = [
        ["Periodo","Rome","Milan","Test"],
        ["20160830",1,2,3],
        ["20160831",2,3,4],
        ["20160901",2,3,5],
        ["20160902",2,3,6]
      ];*/
      
        /*var replyJSON = JSON.parse(reply);
       	var data = google.visualization.arrayToDataTable(reply);*/
        
        var dataExample = google.visualization.arrayToDataTable([
        ["Periodo","Rome","Milan","Test"],
        ["2016/08/30",1,2,3],
        ["2016/08/31",2,3,6],
        ["2016/09/01",2,3,20],
        ["2016/09/02",20,30,12]
      ]);
        var dataExample2 = google.visualization.arrayToDataTable([
        ["Periodo","Rome","Milan","Test"],
        [new Date("2016/08/30"),1,2,3],
        [new Date("2016/08/31"),2,3,6],
        [new Date("2016/09/01"),2,3,20],
        [new Date("2016/09/02"),20,30,12]
      ]);
      
        var options = {
            title: 'What I Have',
            trendlines: {  
            0: {		type: 'linear',  color: 'purple',
                    lineWidth: 10,
                    opacity: 0.2} 
           		 }	
        };
        
        var options = {
            title: 'What I would',
            trendlines: {  
            0: {		type: 'linear',  color: 'purple',
                    lineWidth: 10,
                    opacity: 0.2} 
           		 }	
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        chart.draw(dataExample, options);
        
        var chart2 = new google.visualization.LineChart(document.getElementById('chart_div_2'));

        chart2.draw(dataExample2, options);
        
      }