A striped line chart

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.line.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="800" height="350">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>    
    new RGraph.Line({
        id: 'cvs',
        data: [8,7,6,5,8,7,9,8,6,5,8,3,4,1,1,9,5,7,8,5,6,9,8,7],
        options: {
            tickmarks: 'circle',
            tickmarksSize: 100,
            linewidth: 2,
            hmargin: 5,
            shadow: false,
            filled: true,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            noaxes: true,
            title: 'Sales figures for 2012',
            unitsPost: '%',
            gutterLeft: 50,
            labels: [
                '','Jan','',
                '','Feb','',
                '','Mar','',
                '','Apr','',
                '','May','',
                '','Jun','',
                '','Jul','',
                '','Aug','',
                '','Sep','',
                '','Oct','',
                '','Nov','',
                '','Dec',''
            ]
        }
    }).draw().exec(function (obj)
    {
        // The fill
        var grad = obj.context.createLinearGradient(0,15,0,275);
        grad.addColorStop(0, 'rgba(248,231,209,0.75)');
        grad.addColorStop(0.6, 'rgba(248,231,209,0.5)');
        grad.addColorStop(0.6, 'rgba(220,234,216,0.75)');
        grad.addColorStop(0.8, 'rgba(220,234,216,0.5)');
        grad.addColorStop(0.8, 'rgba(132,208,248,0.75)');
        grad.addColorStop(1.0, 'rgba(132,208,248,0.5)');
        
        obj.set({
            fillstyle: grad
        });

        // The stroke
        var grad2 = obj.context.createLinearGradient(0,25,0,275);
        grad2.addColorStop(0, 'orange');
        grad2.addColorStop(0.6, 'orange');
        grad2.addColorStop(0.6, 'green');
        grad2.addColorStop(0.8, 'green');
        grad2.addColorStop(0.8, 'blue');
        grad2.addColorStop(1.0, 'blue');
        
        obj.set({
            colors: [grad2]
        });
        
        RGraph.redraw();
    });
</script>

« Back