Rickshaw Month based X axis problems

Question

I have my graph working very close to perfectly. I am grabbing its data via PHP and returning JSON data for Rickshaw, one problem however, is that I cannot get the month of December to show up on the graph.

I need to display the results for the entire year. So even if there’s no records for Dec I need to show that as 0.

The basic premise of what I am doing is like this (I'm not using strtotime in practice)

array
(
    "Jan"=>array
    (
        "timestamp"=>strtotime('01-01-'.$this->year),
        "records"=>(array)timestamps
    )
    //do for all months
)

From this, the amount of records for the month is the length of that month’s records array, I also have the exact timestamp for that month.

Then when I json_encode this array, I have a JS object that I can iterate over to create the Rickshaw series correctly, I pass the timestamp key as its x axis value, and records.length as its y axis value.

This is working perfectly well, except for Dec. Here is an image of what the graph currently looks like

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

What I don't understand is, every other month is working as intended. If its records array has a length of 0, it plots it as 0. For some reason, December is just not being picked up. At first I thought it was a timezone discrepancy, but this is how I am actually getting the timestamps for each month

protected function getUnixTime($date_string)
{
    $date = new DateTime($date_string , new DateTimeZone('GMT'));
    return $date->format("U");
}

And checking all timestamps using this tool http://www.epochconverter.com/ they all seem correct. FYI here is how I am setting up Rickshaw

var graph   =   new Rickshaw.Graph(
                {
                    element:document.querySelector(scope.conf.chart_element),
                    width:scope.conf.chart_width,
                    height:scope.conf.chart_height,
                    renderer:scope.conf.chart_type,
                    series: scope.defaults.graph_series_data.reverse()
                }),
    time    =   new Rickshaw.Fixtures.Time(),
    months  =   time.unit('months'),
    x_axis  =   new Rickshaw.Graph.Axis.Time(
                {
                    graph: graph,
                    timeUnit:months,
                }),
    y_axis  =   new Rickshaw.Graph.Axis.Y(
                {
                    graph: graph,
                    orientation: 'left',
                    tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
                    element: document.getElementById('y_axis'),
                }),

    legend  =   new Rickshaw.Graph.Legend(
                {
                    element: document.querySelector('#legend'),
                    graph: graph
                });


 graph.render();

Any help would be greatly appreciated, this one has me stumped.

Answer 1

Uh...yeah, it was actually there all along the graph just needed a bit of padding on the right hand side to show the tick letters. It's always the simplest solution.

If you're having this problem try adding some padding to the right side of the graph like

 padding:{top:0.01 , right:0.007 , bottom:0 , left:0}

That should sort it out.