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.
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;
});
});