Rickshaw misinteprets the datetime

Question

I am using the Rickshaw javascript library to show represent some graphical values, following the model from here. The data to be drawn is provided through an Ajax call, for example:

[{"color":"#65A1CC","data":[{"x":1383906402000,"y" :22.31},{"x":1383906428000,"y":22.38},{"x":1383906452000,"y":22.31},{"x":1383906477000,"y":22.38},{"x":1383906502000,"y":22.38},{"x":1383906527000,"y":22.38},{" x":1383906552000,"y":22.31},{"x":1383906577000,"y":22.31}],"name":"Sensor 1"},{"color":"#CC9065","data":[{"x":1383906402000,"y":22.38},{"x":1383906427000,"y":22 .38},{"x":1383906452000,"y":22.38},{"x":1383906477000,"y":22.38},{"x":1383906502000,"y":22.38},{"x":1383906527000,"y":22.38},{"x":1383906552000,"y":22.38},{"x": 1383906577000,"y":22.38}],"name":"Sensor 2"}]

The long values given here are data time between Fri Nov 08 13:26:42 FET 2013 and Fri Nov 08 13:29:37 FET 2013.

However, when hovering over the resulted graph, the dates shown for various values appear like "Sat Apr. 03", as in the image below. I do not understand why: if in javascript I iterate over the data, the javascript Date object show November time, not April.

The code is:

<div id="chart_container">
<div id="chart" style="background-color: white;"></div>
<div id="legend_container">
    <div id="smoother" title="Smoothing"></div>
    <div id="legend"></div>
</div>
<div id="slider"></div>

$.ajax({                        
         type : "POST",
         dataType: "json",
         url : "/myApp/someURL",
         data: { pack:selectedpack} 
      }
     ).done(function(data) {
        showDashboard(data);
    }); 

function showDashboard(data) {
    $("#charts").show();
    $("#chart").empty();
    $("#legend").empty();

    var graph = new Rickshaw.Graph({
        element: document.getElementById("chart"),
        width: 1000 - 130,
        height: 400,
        renderer: 'line',
        series: data
    });

    graph.render();

    var slider = new Rickshaw.Graph.RangeSlider({
        graph: graph,
        element: $('#slider')
    });

    var hoverDetail = new Rickshaw.Graph.HoverDetail({
        graph: graph
    });

    var legend = new Rickshaw.Graph.Legend({
        graph: graph,
        element: document.getElementById('legend')

    });

    var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
        graph: graph,
        legend: legend
    });

    var axes = new Rickshaw.Graph.Axis.Time({
        graph: graph
    });
    axes.render();
}

The following js files are included: jquery-ui.min.js, d3.v2.js, rickshaw.js, Rickshaw.Class.js, Rickshaw.Compat.ClassList.js, Rickshaw.Graph.js, Rickshaw.Graph.Renderer.js, Rickshaw.Graph.Renderer.Area.js, Rickshaw.Graph.Renderer.Line.js, Rickshaw.Graph.Renderer.Bar.js, Rickshaw.Graph.Renderer.ScatterPlot.js, Rickshaw.Graph.RangeSlider.js, Rickshaw.Graph.HoverDetail.js, Rickshaw.Graph.Annotate.js, Rickshaw.Graph.Legend.js, Rickshaw.Graph.Axis.Time.js, Rickshaw.Graph.Behavior.Series.Toggle.js, Rickshaw.Graph.Behavior.Series.Order.js, Rickshaw.Graph.Behavior.Series.Highlight.js, Rickshaw.Graph.Smoother.js, Rickshaw.Graph.Unstacker.js, Rickshaw.Fixtures.Time.js, Rickshaw.Fixtures.Time.Local.js, Rickshaw.Fixtures.Number.js, Rickshaw.Fixtures.RandomData.js, Rickshaw.Fixtures.Color.js, Rickshaw.Color.Palette.js, Rickshaw.Graph.Axis.Y.js

What should I do to obtain the November ... time instead of April?

Thanks.

Answer 1

You need to pass in seconds, not milliseconds, so you should divide your time data by 1000. For example, instead of 1383906452000 you need to have 1383906452.

If it's not possible to return the time values in seconds from the server side, on the client side, you might use the following before calling showDashboard(data):

$(data).each(function (e, i) {
    $(i.data).each(function (f, j) {
        j.x = j.x / 1000;
    });
});