How to mark discrete points on a time series graph using D3 / Rickshaw?

Question

I'm using Rickshaw to create a live-updating time series graph.

Here is the demo: http://abhshkdz.github.io/icuvisualanalytics/prototypes/rickshaw.html

The data is in csv format (time,value), and this is the core javascript for the visualization:

var count = 0, index=0;

var margin  =   {top: 10, right: 10, bottom: 10, left: 10},
    width   =   window.innerWidth - margin.right - margin.left - 100,
    height  =   window.innerHeight - margin.top - margin.bottom - 100;

var graph = new Rickshaw.Graph( {
    element: document.querySelector("#chart"),
    width: width,
    height: height,
    renderer: 'line',
    min: -300,
    max: 500,
    preserve: true,
    series: new Rickshaw.Series.FixedDuration(
        [
            {
                name: 'ECG',
                color: palette.color()
            }
        ], 
        undefined,
        {
            timeInterval: 12.5,
            maxDataPoints: 400,
            timeBase: data[index][count].x
        })
    })

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

var y_axis = new Rickshaw.Graph.Axis.Y( {
        graph: graph,
        orientation: 'left',
        tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
        element: document.getElementById('y_axis')
} );

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

graph.render();

setInterval(function () {

    if (count == 2397) {
        count = 0;
        index++;
    }
    var d = {'ECG': data[index][count+=3].y};
    graph.series.addData(d);
    graph.render();

}, 12.5);

Now there is another set of data which is generated by an algorithm. That data is also in csv format (time,value). It basically finds the peaks of this plot. Using that data, I want to mark those points on this visualization itself.

As far as I looked, Rickshaw does not natively support multiple series using different renderers (either both have to be line or both scatter plots etc.).

So how should I go about this?

You could have a look if one of the other D3-based frameworks (e.g. [NVD3](http://nvd3.org/)) have what you want. Alternatively, you could go pure D3, which would certainly allow you to do what you want. — Lars Kotthoff, Jul 14 '13 at 00:27
Yeah I was able to implement it in pure D3 quite easily. I wanted to know if a Rickshaw-solution existed. — abhshkdz, Jul 14 '13 at 06:56
Your demo link is no longer working. Can you update link please? — Dolan Antenucci, Oct 02 '13 at 13:00

score 4 · Accepted Answer · answered Jul 16 '13 at 21:40

The multi renderer feature was added about a month ago. This example shows how to combine several renderers in one chart. The relevant code of the example:

var graph = new Rickshaw.Graph( {
    element: document.getElementById("chart"),
    renderer: 'multi',
    width: 900,
    height: 500,
    dotSize: 2,
    series: [
        {
            name: 'temperature',
            data: seriesData.shift(),
            color: 'rgba(255, 0, 0, 0.4)',
            renderer: 'stack'
        }, {
            name: 'heat index',
            data: seriesData.shift(),
            color: 'rgba(255, 127, 0, 0.4)',
            renderer: 'stack'
        }, {
            name: 'dewpoint',
            data: seriesData.shift(),
            color: 'rgba(127, 0, 0, 0.3)',
            renderer: 'scatterplot'
        }, {
            name: 'pop',
            data: seriesData.shift().map(function(d) { return { x: d.x, y: d.y / 4 } }),
            color: 'rgba(0, 0, 127, 0.4)',
            renderer: 'bar'
        }, {
            name: 'humidity',
            data: seriesData.shift().map(function(d) { return { x: d.x, y: d.y * 1.5 } }),
            renderer: 'line',
            color: 'rgba(0, 0, 127, 0.25)'
        }
    ]
});

Thanks! I tried this. But getting js errors. https://github.com/shutterstock/rickshaw/issues/283 — abhshkdz, Jul 17 '13 at 11:28
The multi renderer is not in the last release of Rickshaw. You may need to build the library using the development version. — Pablo Navarro, Jul 18 '13 at 18:25

How to mark discrete points on a time series graph using D3 / Rickshaw?

1 Answers1