Creating charts using google chart api with partial data

I hope I got it right. The code in the comments is the rest of the data (from 12 to 16 hours). Without this data, the graph will show the incomplete graph that you need.

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string');
        data.addColumn('number');
        data.addRows(8);    
        data.setValue(0, 0, '9AM');
        data.setValue(2, 0, '11AM');
        data.setValue(4, 0, '1PM');
        data.setValue(6, 0, '3PM');
        data.setValue(7, 0, '4PM');

        data.setValue(0, 1, 5480); // 9AM
        data.setValue(1, 1, 5475); // 10AM
        data.setValue(2, 1, 5490); // 11AM
        data.setValue(3, 1, 5490); // 12PM
        /*
        data.setValue(4, 1, 5500); // 1PM
        data.setValue(5, 1, 5490); // 2PM
        data.setValue(6, 1, 5530); // 3PM
        data.setValue(7, 1, 5560); // 4PM
        */

        var chart = 
           new google.visualization.AreaChart(document.getElementById('chart_div'));
           chart.draw(data, {width: 500, height: 240,
                          vAxis: {minValue: 5460, maxValue: 5560},
                          colors: ['#76A4FB'],
                          legend: 'none'
                         });
           }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

Hope this helps.

Creating charts using google chart api with partial data

More articles: