specifying N number of x-axis when data is only one

[Neil Camara]

For example, the data I received is { hour : 2:00, totalcount : 10 }, only 1 data.

What I'd like Google Charts to do is display like 6 hours in the x-axis

like 1:00  2:00  3:00 4:00  5:00 3:00

of course, my column totalcount data will only appear above 2:00.

I tried the code below but Google Charts is displaying values for different time of data. Sometimes it will display with the 30th minute which I don't want.

        hAxis: { format:'h:mm aa',

            "gridlines": {

                "count": 6

            }

        },

When my data starts at 12am, it only display 12am.

What is the solution to this?

Thanks!

[Andrew Gallant]

You need to specify the hAxis.ticks option.  The ticks option takes an array of values or object.  Values point to the location where a tick mark (and label) should be placed.  Objects have "v" (required) and "f" (optional) properties, where "v" is the value to place a tick mark at, and "f" is the label to place there; if "f" is not specified, the axis should format the value according to the format option.  Using the ticks option overrides all other options for controlling the axis tick marks - the only tick marks that will appear are those you specify, regardless of anything else in the chart.

Assuming you are using a "timeofday" column for your times, it would look like this:

hAxis: {

    format: 'h:mm aa',

    ticks: [[1, 0, 0, 0], [2, 0, 0, 0], [3, 0, 0, 0], [4, 0, 0, 0], [5, 0, 0, 0], [6, 0, 0, 0]]

[Neil Camara]

Awesome! I'll try it soon! :)

Thanks!

[Neil Camara]

It worked Andrew and it looks beautiful! :)

Will it work for dates? If so, what would be the values of ticks?

[Andrew Gallant]

Yes, it will works for dates, just use Date objects instead of the "timeofday" arrays:

hAxis: {

    ticks: [new Date(2014, 7, 1), new Date(2014, 7, 2), new Date(2014, 7, 3), new Date(2014, 7, 4)]

[Neil Camara]

Cool! I'll try that later. :)

Thanks again!

[Neil Camara]

Hi Andrew,

What's wrong with my ticks?

        hAxis: {

            format:'h:mm aa',

            ticks: [

                [0, 0, 0, 0], [1, 0, 0, 0], [2, 0, 0, 0], [3, 0, 0, 0], [4, 0, 0, 0], [5, 0, 0, 0], [6, 0, 0, 0], [7, 0, 0, 0], [8, 0, 0, 0], [9, 0, 0, 0], [10, 0, 0, 0], [11, 0, 0, 0], [12, 0, 0, 0],

                [13, 0, 0, 0], [14, 0, 0, 0], [15, 0, 0, 0], [16, 0, 0, 0], [17, 0, 0, 0], [18, 0, 0, 0], [19, 0, 0, 0], [20, 0, 0, 0], [21, 0, 0, 0], [22, 0, 0, 0], [23, 0, 0, 0]

            ]

//            "gridlines": {

//                "count": 24

//            }

        },

graph is failing now

[Neil Camara]

I got it working. However, one last thing I need to fix are the hour values in the tool tip. It's showing military time. The hour values though in the axis are displayed correctly.

Here is a screenshot where I clicked one of the points. it's showing 19:00 rather than 7pm.

http://i.imgur.com/v75lIbq.png

[Andrew Gallant]

You have to format the timeofday column.  There are no built-in formatters for the timeofday data type, but you can hijack the DateFormatter for the purpose:

var formatter = new google.visualization.DateFormat({pattern: 'h:mm a'});

var timeSteps = ['hours', 'minutes', 'seconds', 'milliseconds'];

for (var i = 0; i < data.getNumberOfRows(); i++) {

    var timeofday = data.getValue(i, 0);

    var date = new Date(0);

    for (var j = 0; j < timeofday.length; j++) {

        switch (timeSteps[j]) {

            case 'hours':

                date.setHours(timeofday[j]);

                break;

            case 'minutes':

                date.setMinutes(timeofday[j]);

                break;

            case 'seconds':

                date.setSeconds(timeofday[j]);

                break;

            case 'milliseconds':

                date.setMilliseconds(timeofday[j]);

                break;

        }

    }

    var formattedTime = formatter.formatValue(date);

    data.setFormattedValue(i, 0, formattedTime);