Share:

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

The Tradar chart can be adjusted by dragging the points on the chart. When the onadjustend event fires, you will find the following information in the RGraph registry - RGraph.Registry.Get('chart.adjusting.tradar.myc') - where myc is the ID of your canvas:

• The numerical, zero indexed number that corresponds to the dataset
• The numerical, zero indexed point that relates to the original data array
• This is a boolean and used to indicate which (horizontal) half of the graph the point is in. true - the right half, false - the left half
• This is a boolean and used to indicate which (vertical) half of the graph the point is in. true - the bottom half, false - the top half

<script>
    window.onload = function (e)
    {
            var tradar = new RGraph.Tradar('myc', [4,3,8,6,8,7,7,4,5], [7,2,4,5,4,3,3,3,3]);
            tradar.Set('chart.adjustable', true);
            tradar.Set('chart.colors', ['rgba(255,0,0,0.5)', 'rgba(255,255,0,0.5)']);
            tradar.Set('chart.labels', ['Hoolio', 'Godfrey', 'Albert', 'Jeff', 'Jack', 'Pete', 'Lou', 'Barney', 'Fred']);
            tradar.Draw();
            
            RGraph.AddCustomEventListener(tradar, 'onadjustend', function (obj) {p(RGraph.Registry.Get('chart.adjusting.tradar.myc'));});
    }
</script>