Share:

RGraph: HTML5 canvas graph library - Adjusting your graphs interactively - Line chart

The Line chart can be adjusted by dragging the line(s) up and down. By using the RGraph registry - RGraph.Registry.Get('chart.adjusting.line.myc') - you can get the details of the adjustment (replace myc with the ID of your canvas). This is an array consisting of:

• The graph object
• The index of the point in the data series
• A two element array consisting of the original coordinates of the point that is being adjusted
• The index of the data series that contains the point being adjusted

<script>
    window.onload = function (e)
    {
        var line = new RGraph.Line('myc', [45,74,84,85,45,35,65,68,87,97,45,34,12], [15,14,12,16,18,19,14,12,74,84,95,65,35]);
        line.Set('chart.labels', ['Kev','Matt','Rich','Dave','Iggy','Polly','Fiona','Fred','Pete','Lou','Fred','Bob']);
        line.Set('chart.ylabels.inside', true);
        line.Set('chart.linewidth', 2);
        line.Set('chart.hmargin', 10);
        line.Set('chart.shadow', true);
        line.Set('chart.adjustable', true);
        line.Set('chart.title', 'An adjustable line chart');
        line.Set('chart.outofbounds', true);
        line.Draw();
        
        RGraph.AddCustomEventListener(line, 'onadjustend', function (obj) {p(RGraph.Registry.Get('chart.adjusting.line.myc'));});
    }
</script>