Chart with time series using Rickshaw. format of input data

Question

I am willing to draw a chart with Rickshaw (javascript library working with D3). My data look as follows:

var data = [{x : '10:16:00', y : 35.75}, {x : '10:17:00', y : 35.78},  {x : '10:18:00', y : 31.04}];

But that just doesn't work with a simple code such as:

var graph = new Rickshaw.Graph( {
    element: document.querySelector("#chart"), 
    width: 200, 
    height: 200, 
    series: [{
        color: 'steelblue',
        data: data
    }]
});

graph.render();

An error message reads data is indefined. It seems to me the problem is due to my xs above being strings and not eg increasing integers.

Do I have to cast the xs to some javascript time format? How do I do that?

Answer 1

You will need to define the x-axis as a timeline:

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

Then you give your x axis data as (for the first one):

new Date(2014, 11, 4 , 10, 16, 0, 0).getTime()

or using some other Date constructor.