Multi line Google Line Chart Creation - Javascript Google Chart

Javascript examples for Google Chart:Line Chart

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

Description

Multi line Google Line Chart Creation

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
   </head> 
   <body> 
      <div id="curve_chart" style="width: 900px; height: 500px"></div> 
      <script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart(){/*ww w .  j a  v a2 s .c  o m*/
        var data = new google.visualization.DataTable(
            {cols:[
                {"label":"Time","type":"timeofday"},
                {"label":"Probe 1","type":"number"},
                {"label":"Probe 2","type":"number"},
                {"label":"Probe 3","type":"number"},
                {"label":"Probe 4","type":"number"}
            ],
            rows:[
                {c:[{v:[03,02,07],f:'03:02:07'},{v:270.26},{v:298.40},{v:111.54},{v:228.06}]},
                {c:[{v:[03,28,42],f:'03:28:42'},{v:273.23},{v:190.43},{v:245.69},{v:283.21}]},
                {c:[{v:[07,26,04],f:'07:26:04'},{v:144.33},{v:217.26},{v:206.53},{v:167.68}]},
                {c:[{v:[12,13,20],f:'12:13:20'},{v:153.15},{v:277.23},{v:167.20},{v:240.88}]}
            ]
        });
        var options = {
            title: 'Recorded Temperatures',
            legend: { position: 'bottom' },
            width: 900,
            height: 500,
            hAxis: { format: 'hh:mm:ss' }
        };
        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
        chart.draw(data, options);
    }
    
      </script>  
   </body>
</html>

Related Tutorials