# A scrolling SVG Line chart

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