HOWTO: Add points to a Line chart

• Introduction
• Example code for the chart

Introduction

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 can add new points by clicking in the left or right margins. 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 margins 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 are 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>
    <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>
    line = new RGraph.Line({
        id: 'cvs',
        data: [13,12,16,15,12,11,21],
        options: {
            xaxisLabels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            textSize: 14,
            adjustable: true,
            tickmarksStyle: 'circle',
            tickmarksSize: 5,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            yaxis: false,
            axesColor: '#666',
            shadow: false,
            colors: ['#00c']
        }
    }).draw();




    line.canvas.addEventListener('click', function (e)
    {
        // Get:
        //  o The mouse coordinates
        //  o The value at the point where the canvas has been clicked
        //  o The value that has been entered in the text input
        var xy     = RGraph.getMouseXY(e),
            value  = line.getValue(e),
            canvas = line.canvas;
        
    
        // The chart was clicked in the right margin so add the new point at the
        // end of the line (RHS)
        if (xy[0] > (canvas.width - line.get('marginRight')) ) {
            line.original_data[0].push(value);
            label  = window.prompt('Please enter a label for the new value');            
            line.get('xaxisLabels').push(label);
    
        // The chart was clicked in the left margin so add the new point at the
        // beginning of the line (LHS)
        } else if (xy[0] < line.get('marginLeft')) {
            line.original_data[0].unshift(value );
            label  = window.prompt('Please enter a label for the new value');
            line.get('xaxisLabels').unshift(label);
        }
        
        // Set the number of X tickmarks to one less than the number of points on
        // the chart
        line.set('tickmarksCount', 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>