Add Labels to Google Chart

Question

I have been trying to get a chart to display a different label for the columns along the horizontal axis.

I have used:

cols: [{id: '1', label: '00', type: 'number'},
    {id: '2', label: '01', type: 'number'},
    {id: '3', label: '02', type: 'number'}], 
// etc...

The numbers along the bottom are supposed to represent hours and I need them to start at '00' and end at '23' Is there a way to mask them/ replace with specified values?

Here is the chart at the moment:

But it doesn't seem to be working :(

btw: I cant send them through in the array as '00' etc because this happens: Uncaught Error: Not a valid 2D array Even if I change it to a string because then the gridlines don't work as both values have to be of the same type. arghhh

also, At the moment they are numbers 1-22 when they should also be 1-23 - Any ideas why it is missing off the last value?

Edit

Here is the JsFiddle: http://jsfiddle.net/3AeC5/1/

The data passed in:

var data = google.visualization.arrayToDataTable();

is passed in from a function:

 $.getJSON('charts_ajax.php',{'a' : "<?=$value?>" }, function(data){
  if(data){
      initGoogleChart(data,"<?=$key?>","<?=$value?>");
  }else {
      console.log("There is no data coming back");   
  }
 });

The value of data is json_encode($chartData) and returns:

 [
    [0, 372],
    [1, 212],
    [2, 234],
    [3, 400],
    [4, 732],
    [5, 1940],
    [6, 3672],
    [7, 4744],
    [8, 4174],
    [9, 3506],
    [10, 3602],
    [11, 3774],
    [12, 3742],
    [13, 3863],
    [14, 4329],
    [15, 4054],
    [16, 3073],
    [17, 3456],
    [18, 3620],
    [19, 3484],
    [20, 3595],
    [21, 2488],
    [22, 1466],
    [23, 656]
]

The var_dump of $chartData is:

    array(24)           {
                  [0]=>
                  array(2)           {
                                        [0]=>
                                        int(0)
                                        [1]=>
                                        int(372)
                  }
                  [1]=>
                  array(2)           {
                                        [0]=>
                                        int(1)
                                        [1]=>
                                        int(212)
                  }
                  [2]=>
                  array(2)           {
                                        [0]=>
                                        int(2)
                                        [1]=>
                                        int(234)
                  }
                  [3]=>
                  array(2)           {
                                        [0]=>
                                        int(3)
                                        [1]=>
                                        int(400)
                  }
                  [4]=>
                  array(2)           {
                                        [0]=>
                                        int(4)
                                        [1]=>
                                        int(732)
                  }
                  [5]=>
                  array(2)           {
                                        [0]=>
                                        int(5)
                                        [1]=>
                                        int(1940)
                  }
                  [6]=>
                  array(2)           {
                                        [0]=>
                                        int(6)
                                        [1]=>
                                        int(3672)
                  }
                  [7]=>
                  array(2)           {
                                        [0]=>
                                        int(7)
                                        [1]=>
                                        int(4744)
                  }
                  [8]=>
                  array(2)           {
                                        [0]=>
                                        int(8)
                                        [1]=>
                                        int(4174)
                  }
                  [9]=>
                  array(2)           {
                                        [0]=>
                                        int(9)
                                        [1]=>
                                        int(3506)
                  }
                  [10]=>
                  array(2)           {
                                        [0]=>
                                        int(10)
                                        [1]=>
                                        int(3602)
                  }
                  [11]=>
                  array(2)           {
                                        [0]=>
                                        int(11)
                                        [1]=>
                                        int(3774)
                  }
                  [12]=>
                  array(2)           {
                                        [0]=>
                                        int(12)
                                        [1]=>
                                        int(3742)
                  }
                  [13]=>
                  array(2)           {
                                        [0]=>
                                        int(13)
                                        [1]=>
                                        int(3863)
                  }
                  [14]=>
                  array(2)           {
                                        [0]=>
                                        int(14)
                                        [1]=>
                                        int(4329)
                  }
                  [15]=>
                  array(2)           {
                                        [0]=>
                                        int(15)
                                        [1]=>
                                        int(4054)
                  }
                  [16]=>
                  array(2)           {
                                        [0]=>
                                        int(16)
                                        [1]=>
                                        int(3073)
                  }
                  [17]=>
                  array(2)           {
                                        [0]=>
                                        int(17)
                                        [1]=>
                                        int(3456)
                  }
                  [18]=>
                  array(2)           {
                                        [0]=>
                                        int(18)
                                        [1]=>
                                        int(3620)
                  }
                  [19]=>
                  array(2)           {
                                        [0]=>
                                        int(19)
                                        [1]=>
                                        int(3484)
                  }
                  [20]=>
                  array(2)           {
                                        [0]=>
                                        int(20)
                                        [1]=>
                                        int(3595)
                  }
                  [21]=>
                  array(2)           {
                                        [0]=>
                                        int(21)
                                        [1]=>
                                        int(2488)
                  }
                  [22]=>
                  array(2)           {
                                        [0]=>
                                        int(22)
                                        [1]=>
                                        int(1466)
                  }
                  [23]=>
                  array(2)           {
                                        [0]=>
                                        int(23)
                                        [1]=>
                                        int(656)
                  }

}

Answer 1

You have a small handful of problems here. First, the rows you are passing to the arrayToDataTable constructor don't contain a column label row as the first row, so row [0, 372] is being used to create the column labels. You either need to include a column label row, or pass true as the second argument to the arrayToDataTable constructor:

// either this:
var data = google.visualization.arrayToDataTable([
    ['X', 'Y'],
    // data rows
]);
// or this:
var data = google.visualization.arrayToDataTable([
    // data rows
], true);

Second, your hAxis.format option is wrong if you want to get leading zero's. Set it to '00' instead of '####' . Third, your chartArea is too wide, and is cutting off the last label on the chart. Leave a bit of space at the end for the "23" label to draw by setting chartArea.width to 810 instead of '100%' (leaving 10 pixels at the end of the chart for the label to draw).

See these fixes here: http://jsfiddle.net/asgallant/3AeC5/2/