Red Heifer


Live Chemical Reactor Species Data

The Rickshaw Reactor

Using Rickshaw to visualize chemical process data is possible by creating a graph that is linked to a data structure, then updating the data structure with new data. When the graph.update() method is called, the graph is re-drawn with new data. The format of the series being plotted closely follows the Rickshaw examples. The variable seriesData is a multi-column array of arrays, and this is used to form the series data for the chart, which looks like this:
        series: [
            {
                color: palette.color(),
                data: seriesData[0],
                name: 'CO2'
            }, {
                color: palette.color(),
                data: seriesData[1],
                name: 'H2O'
            }, {
                color: palette.color(),
                data: seriesData[2],
                name: 'CO'
            }, {
                color: palette.color(),
                data: seriesData[3],
                name: 'H2'
            }, {
                color: palette.color(),
                data: seriesData[4],
                name: 'C2H6'
            }, {
                color: palette.color(),
                data: seriesData[5],
                name: 'C2H4'
            }, {
                color: palette.color(),
                data: seriesData[6],
                name: 'O2'
            }
    ]
where the variable seriesData[n] consists of the nth column of data (the nth array) in the seriesData array of arrays. The seriesData variable is modified in a call to setInterval, which will update the data at the specified interval. One piece of data is popped from the end, and a new piece of data is pushed to the top. The data are modified like so:
    setInterval( function() {
        random.removeData(seriesData);
        random.addData(seriesData);
        graph.update();
    
    }, 3000 );
here, random is a Rickshaw random data object:
    var random = new Rickshaw.Fixtures.RandomData(150);