Have Google Data Chart have a 24 hour x-axis

Question

I'm utilizing Google Data Chart, but am having trouble finding what I'm trying to do. I want to do something similar to a stock chart, but not as complicated.

I want to have a line chart or area chart that always shows the full 24 hours on the x-axis no matter what part of the day.

I only want the date to fill in up to that point in the day. So if I had multiple data points, at noon, it would only fill up half the graph horizontally and the other half would be empty waiting on data. Make sense?

A link or example would be great, thanks.

score 2 · Answer 1 · answered Apr 26 '15 at 14:08

A lot of this depends on what your looking like but here is a simple example that assumes you are using your x-axis values are a number representing the hour. (i.e. 13.5 is 1:30 pm)

google.load("visualization", "1", {
    packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ["Time", "Value 1", "Value 2"],
        [3, 9, 4],
        [8.5, 11, 6],
        [10.25, 20, 2],
        [13, 21, 3]
    ]);


    var options = {
        hAxis: {
            minValue: 0,
            maxValue: 24,
            ticks: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]
        }
    };
    var chart = new google.visualization.LineChart(document.getElementById("chart"));
    chart.draw(data, options);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart" style="width: 900px; height: 300px;"></div>

Have Google Data Chart have a 24 hour x-axis

1 Answers1