CODEWITHSUNDEEP
datetimegoogle-visualization
Ryan Justin
Ryan Justin

Reputation: 85

minValue and maxValue as Time Range in hAxis in Google Chart

I need to set time range for my hAxis to have minValue of 09:00 and maxValue 17:00 with increment of 1 hour (i.e. 9, 10, 11, 12, 13, 14, ... , 17)

Currently my data is formatted as H:m (for example: 09:35, 10:20)

var formatter3 = new google.visualization.DateFormat({pattern: 'H:m'});
formatter3.format(data,0);

And below are my options:

var options = {           
            curveType: "function",
            title : '',           
            hAxis:{slantedTextAngle: 90,textStyle:{fontSize:8}},
            colors : ['red','#3366CC', '#999999'],
            vAxes: {
                0: {logScale: false, format:'0.0000'},
                1: {logScale: false}
            },
            hAxis: { 
                           format: 'H:m',
                           minValue: new Date(null, null, null, 9, 0, 0),
                           maxValue: new Date(null, null, null, 17, 0, 0),         
                           viewWindow:{min: new Date(null, null, null, 9, 0, 0),
                                       max: new Date(null, null, null, 17, 0, 0)},
            series: { 
                0: {targetAxisIndex:0, type: "line"},
                1: {targetAxisIndex:0, type: "line"},
                2: {targetAxisIndex:1, type: "bars"}
            }         
        };

However , it is still not working. Please advise. Thanks!

Upvotes: 4

Views: 3872

Answers (1)

dlaliberte
dlaliberte

Reputation: 3260

Unfortunately, the minValue, maxValue, and baseline value are ignored for date and time values. I am not sure that this is a recent bug but I just noticed it a week ago. You might try to experiment with the viewWindow min and max, and the gridlines.count option to get the desired result. Or you might be able to convert all your date values to strings, if the values are evenly spaced, in which case axes will use your explicit values.

Another new feature that could work for you is that you can provide an explicit array of tick values, with a ticks: [...] option. In the current release of gviz, the formatting is done using your format option, and that should be enough for your needs. In an upcoming release, you can also specify the formatting of each tick value.

So it might be best to specify the times in your example using timeofday values like so:

hAxis: {
  ticks: [[9, 0, 0], [10, 0, 0], [11, 0, 0], [12, 0, 0], ...]
}

I think you could do the same kind of thing with datetime values instead, if that's what your data values are.

Upvotes: 2

Related Questions