A clickable filled Line chart

Share RGraph:   

Summary
This page shows you how you can use the drawing API Poly object in-conjunction with the Line chart coordinates to create a filled Line chart that has a clickable fill area.

[No canvas support]

This is an example of a filled Line chart that's combined with a drawing API Poly object so that the whole fill area is clickable. The coordinates of the Line are used as the Poly coordinates with two extra coordinates added so that the Poly extends down to the X axis and back to the left-hand-side.


<script>
    window.onload = function ()
    {
        /**
        * The first Line chart
        */
        var line = new RGraph.Line({
            id: 'cvs1',
            data: [40,80,45,35,56,46,43],
            options: {
              filled: true,
              colors: ['red'],
              fillstyle: 'rgba(255,0,0,0.3)',
              linewidth: 5,
              hmargin: 5
            }
        }).draw();
        
        var coords = line.coords;
        
        // Add two extra coords
        coords.push([570, 225]);
        coords.push([30, 225]);
        
        var poly = new RGraph.Drawing.Poly({
            id: 'cvs1',
            data: coords,
            options: {
                fillstyle: 'rgba(0,0,0,0)',
                strokestyle: 'rgba(0,0,0,0)',
                eventsClick: function (e, shape) {alert('Clicked the first dataset');},
                eventsMousemove: function (e, shape) {e.target.style.cursor = 'pointer';}
            }).draw();
    }
</script>

A stacked Line chart

[No canvas support]

The first chart is an example of a filled Line chart that has only one dataset - so it's quite straight-forward to draw the Poly. The lower Line chart on the other hand has two datasets where the lines are "stacked" on top of each other. In this case for the bottom dataset you can again extend thge Poly down to the X axis - but for the second charts Poly object you must use the other datasets coordinates to get back to the left-hand-side.


<script>
    window.onload = function ()
    {
        /**
        * The second Line chart
        */
        var line2 = new RGraph.Line({
            id: 'cvs2',
            data: [ [40,80,45,35,56,46,43], [35,42,39,48,41,37,48] ],
            options: {
                filled: true,
                colors: ['red', 'green'],
                fillstyle: ['rgba(255,0,0,0.3)', 'rgba(0,255,0,0.3)'],
                linewidth: 5,
                hmargin: 5
            }
        }).draw();

        // Draw the first Poly
        var coords = RGraph.array_clone(line2.coords2[0]);

        // Add two extra coords
        coords.push([570, 225]);
        coords.push([30, 225]);

        var poly2 = new RGraph.Drawing.Poly({
            id: 'cvs2',
            data: coords,
            options: {
                fillstyle: 'rgba(0,0,0,0)',
                strokestyle: 'rgba(0,0,0,0)',
                highlightFill: 'rgba(0,0,0,0.1)',
                eventsClick: function (e, shape)
                {
                    var obj = shape.object;
                
                    obj.Highlight(shape);
                    alert('Clicked the first dataset');
                }
                eventsMousemove: function (e, shape) {e.target.style.cursor = 'pointer';}
            }
        }).draw();

        // Draw the second Poly
        var coords = RGraph.array_clone(line2.coords2[1]);

        // Use the coords of the first Lined to trace a path back to the left-hand-side
        for (var i=line2.coords2[0].length - 1; i>=0; i-=1) {
            coords.push(RGraph.arrayClone(line2.coords2[0][i]));
        }

        var poly3 = new RGraph.Drawing.Poly({
            id: 'cvs2',
            data: coords,
            options: {
                fillstyle: 'rgba(0,0,0,0)',
                strokestyle: 'rgba(0,0,0,0)',
                highlight.fill: 'rgba(0,0,0,0.1)',
                eventsClick: function (e, shape)
                {
                    var obj = shape.object;
    
                    obj.Highlight(shape);
                    alert('Clicked the second dataset');
                },
                eventsMousemove: function (e, shape) {e.target.style.cursor = 'pointer';}
            .draw();
    }
</script>

Making an entire line clickable

[No canvas support]

Using a similar method to that shown above for the dual dataset filled line chart you can make an entire non-filled line clickable - not just the data points. This involves making the Poly object just cover the line - first going forward over the line coordinates - and then, instead of moving down to the X axis to go back to the start point, only dropdown a few pixels and reverse over the coordinates.



<script>
    window.onload = function ()
    {
        var linewidth = 5;

        var line = new RGraph.Line({
            id: 'cvs3',
            data: [40,80,45,35,56,46,43],
            options: {
                colors: ['red'],
                linewidth: linewidth,
                hmargin: 5
            }
        }).draw();
        
        /**
        * Build the coordinates for the Poly object
        */
        var coords = [];
        for (var i=0,len=line.coords.length; i<len; i+=1) {
            
            var x = line.coords[i][0];
            var y = line.coords[i][1] - (linewidth / 2);

            coords.push([x, y]);
        }
        for (var i=line.coords.length - 1; i>=0; i-=1) {
            
            var x = line.coords[i][0];
            var y = line.coords[i][1] + (linewidth / 2);

            coords.push([x, y]);
        }




        var poly = new RGraph.Drawing.Poly({
            id: 'cvs3',
            data: coords,
            options: {
                fillstyle: 'rgba(0,0,0,0)',
                strokestyle: 'rgba(0,0,0,0)',
                eventsClick: function (e, shape) {alert('Clicked the line');},
                eventsMousemove: function (e, shape) {e.target.style.cursor = 'pointer';}
            }
        }).draw();
    }
</script>

Comments

Add a new comment...