How to dynamically add points to your Line chart

A guide for creating a Line chart where you can add new points simply by clicking in the relevant gutter (ie left or right). The chart is adjustable too.

[No canvas support]
New label:

This is a demonstration of a chart that I was originally asked about through a support request.

It's an adjustable Line chart where you also have the ability to add new points by clicking in the left or right gutters.

The code for it is shown below and as you can see there's not a great deal to it. It creates the chart as you would normally and then adds a standard listener function to the click event.

This function determines, when the canvas is clicked, whether the mouse is positioned in the left or right gutters and adds a new point to either the left or right side accordingly.

It also adds a label (which is retrieved from the DOM text input below the canvas), adds a tickmark, and clears the DOM text input.

Example code for the chart

Here's the HTML tags that are necessary. There's the canvas tag (naturally) and also the text input which is used so that you can enter the new value.

<div style="float: right">
    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas><br />
    <span style="font-size: 20pt">New label: </span><input id="label" style="font-size: 20pt; padding: 3px" />
</div>

And here's the JavaScript code that creates the chart and then adds the event listener that allows you to add new points.

<script>
    // Here's a pretty standard Line chart definition
    var line = new RGraph.Line({
        id: 'cvs',
        data: [13,12,16,15,12,11,21],
        options: {
            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            textSize: 14,
            adjustable: true,
            tickmarks: 'circle',
            ticksize: 5,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            noyaxis: true,
            axisColor: '#666',
            shadow: false,
            colors: ['#00c']
        }
    }).draw();

    // Now add a standard click event listener that adds a new point when
    // the canvas is clicked in the left or right gutters
    line.canvas.addEventListener('click', function (e)
    {
        // Get:
        //  o The mouse coordinates
        //  o The value at the point where the canvas was clicked
        //  o The value that has been entered in the text input
        var xy    = RGraph.getMouseXY(e),
            value = line.getValue(e),
            label = document.getElementById('label').value;
        

        // The chart was clicked in the right gutter so add the new point at the
        // end of the line (RHS)
        if (xy[0] > (canvas.width - line.get('gutterRight')) ) {
            line.original_data[0].push(value);
            line.properties['chart.labels'].push(label);
        
        // The chart was clicked in the left gutter so add the new point at the
        // beginning of the line (LHS)
        } else if (xy[0] < line.get('gutterLeft')) {
            line.original_data[0].unshift(value );
            line.properties['chart.labels'].unshift(label);
        }
        
        // Set the number of X tickmarks to one less than the number of points on
        // the chart
        line.set('numxticks', line.original_data[0].length - 1);
        
        // Redraw the chart
        RGraph.redraw();
        
        // Clear the text input using standard DOM code
        document.getElementById('label').value = '';
    }, false);
</script>