Summary
RGraph demo page: A scrolling SVG Line chart

RGraph demo: A scrolling SVG Line chart

A scrolling SVG Line chart

This is a demo a scrolling filled Line chart. The chart is redrawn every 50 millseconds (ie approximately 20 times a second). The new data is pushed on to the end of the data array and the array is then shift()ed in order to knock one off of the beginning of the array.

This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.line.js"></script>
Put this where you want the chart to show up:
<div style="width: 750px; height: 300px" id="chart-container"></div>
This is the code that generates the chart:
<script>
    line = new RGraph.SVG.Line({
        id: 'chart-container',
        data: RGraph.SVG.arrayFill({
            array:  [],
            value:  0,
            length: 300
        }),
        options: {
            hmargin: 0,
            title: 'A scrolling SVG Line chart',
            gutterLeft: 50,
            gutterBottom: 50,
            yaxisMax: 50,
            yaxisMin: -25,
            yaxisLabelsCount: 3,
            xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday', 'Friday'],
            xaxisLabelsPosition: 'section',
            xaxisTickmarks: false,
            backgroundGridVlinesCount: 10,
            xaxisColor: '#aaa',
            yaxis: false,
            backgroundGridColor: '#eee',
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            backgroundGridHlinesCount: 3,
            filled: true,
            colors: ['#c00'],
            linewidth: 1,
            filledColors: ['rgba(255,0,0,0.25)']
        }
    }).draw();





    function update ()
    {
        // A global
        last = (window.last || (Math.random() * 75 + -25)) + (Math.random() * 4 - 2);
        last = Math.min(50, last);
        last = Math.max(-25, last)

        line.originalData[0].push(last);
        line.originalData[0].shift();

        RGraph.SVG.redraw();

        setTimeout(function ()
        {
            update()
        }, 50);
    }

    update();
</script>

« Back