A Line chart with customised axes

This goes in the documents header:

<script src="../libraries/rgraph.common.core.js" ></script>
<script src="../libraries/rgraph.common.tooltips.js" ></script>
<script src="../libraries/rgraph.common.dynamic.js" ></script>
<script src="../libraries/rgraph.line.js" ></script>
<script src="../libraries/rgraph.drawing.yaxis.js" ></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="250">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var labels = [
            'Monday',
            'Tuesday',
            'Wednesday',
            'Thursday',
            'Friday',
            'Saturday',
            'Sunday'
        ];

        var line = new RGraph.Line({
            id: 'cvs',
            data: [7,5,6,9,5,4,7],
            options: {
                spline: true,
                labels: labels,
                tooltips: labels,
                gutterBottom: 35,
                hmargin: 35,
                tickmarks: 'endcircle',
                linewidth: 3,
                noaxes: true,
                ylabels: false,
                backgroundGridBorder: false,
                backgroundGridVlines: false,
                unitsPost: 'Kg',
                textColor: '#666',
                textAccessible: true
            }
        }).trace2()
        
        var yaxis = new RGraph.Drawing.YAxis({
            id: 'cvs',
            x: 20,
            options: {
                gutterTop: 15,
                gutterBottom: 45,
                max: 10,
                align: 'right',
                textColor: '#666',
                unitsPost: 'Kg',
                colors: ['rgba(0,0,0,0)'],
                textAccessible: true
            }
        }).draw();
    };
</script>

« Back