New Line chart trace effect using the canvas clip method

Posted on 1st September 2017

Summary
Introducing an alternative Trace effect for the Line chart that uses the HTML5 canvas clip() function

This is a demonstration of a new trace effect which has been rewritten. The effect is now simplified and more compatible, which you can see above (if you're using Chrome or Safari the canvas is using CSS 3D transformations.

The code for the effect will be added to the December release of RGraph. By using these new techniques more charts will be able to have a trace effect - such as the Radar chart with a rotational trace.


<script>
    new RGraph.Line({
        id: 'cvs',
        data: [
            [4,8,6,3,5,2,4,8,5,9,6,5],
            [1,3,2,5,10,2,2,5,3,3,2,10]
        ],
        options: {
            labels: [
                '','Q1','',
                '','Q2','',
                '','Q3','',
                '','Q4',''
            ],
            shadow: true,
            tickmarks: 'endcircle',
            hmargin: 5,
            spline: true,
            fillstyle: ['rgba(255,0,0,0.2)','rgba(0,255,0,0.2)'],
            filledAccumulative: false,
            filled: true,
            textAccessible: false,
        }
    }).trace();
</script>