CODEWITHSUNDEEP
javascriptgoogle-visualization
Daniel.V
Daniel.V

Reputation: 2492

how to set hour scale to the xaxis of google line chart

I have Google line chart I want to instead of year put time scale(24 hour) in the axis so how can I do that here is Google sample line chart

<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 = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance'
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Upvotes: 0

Views: 636

Answers (1)

asgallant
asgallant

Reputation: 26340

You can use a "timeofday" data type for a 24-hour chart. The "timeofday" data type takes an array of 4 values: [hours, minutes, seconds, milliseconds], so 6:31:18 PM would be input as [18, 31, 18, 0].

var data = google.visualization.arrayToDataTable([
    ['Time of day', 'Sales', 'Expenses'],
    [[3, 30, 15, 0], 1000, 400],
    [[7, 21, 56, 0], 1170, 460],
    [[12, 49, 17, 0], 660, 1120],
    [[19, 41, 47, 0], 1030, 540]
]);

see an example here: http://jsfiddle.net/asgallant/mC9Q4/

Upvotes: 1

Related Questions