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