# SVG Line charts that you could use in a dashboard

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:

    <style>
        div#charts{
            position: relative;
            background-color: black;
            height: 250px;
        }

        div#charts div {
            position: absolute;
            top: 20px;
            width: 300px;
            height: 200px;
        }
    </style>

    <div id="charts">
        <div id="chart-container1"></div>
        <div id="chart-container2"></div>
        <div id="chart-container3"></div>
    </div>

This is the code that generates the chart:

    <script>
        // The config is shared by aall three charts
        config = {
            gutterTop: 5,
            gutterRight: 5,
            gutterBottom: 5,
            gutterLeft: 5,
            xaxis: false,
            yaxis: false,
            yaxisScale: false,
            linewidth: 2,
            yaxisMax: 50,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            colors: ['white'],
            filled: true,
            filledColors: ['gray'],
            spline: true
        };

        line1 = new RGraph.SVG.Line({
            id: 'chart-container1',
            data: [8,7,5,6,8,9,8,7,5,7,11,15,14,16,15,19],
            options: config
        }).draw();

        line2 = new RGraph.SVG.Line({
            id: 'chart-container2',
            data: [12,19,16,18,15,12,16,19,25,21,25,23,29,31,32,30],
            options: config
        }).draw();

        line3 = new RGraph.SVG.Line({
            id: 'chart-container3',
            data: [10,15,16,18,14,19,15,13,14,16,18,15,18,14,15,18],
            options: config
        }).draw();
    </script>

« Back