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?

Answer 1

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)'
        }
    ]
});