Share:

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

The Bar chart can be adjusted by clicking on the chart, in line with the bar that you want to adjust.When adjusting is finished the onadjustend event fires. As you will see in the example you can find the index of the relevant bar in the RGraph registry - RGraph.Registry.Get('chart.adjusting.bar.myCanvas') (replace myCanvas with the ID of your canvas).

<script>
    window.onload = function (e)
    {
        var bar = new RGraph.Bar('myCanvas', [512,653,512,533,674,453,458,741,496]);
        bar.Set('chart.colors', ['blue', 'pink']);
        bar.Set('chart.labels.above', true);
        bar.Set('chart.shadow', true);
        bar.Set('chart.shadow.color', '#aaa');
        bar.Set('chart.strokecolor', 'rgba(0,0,0,0)');
        bar.Set('chart.gutter', 30);
        bar.Set('chart.adjustable', true);
        bar.Set('chart.labels', ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008']);
        bar.Draw();
        
        function myFunc (obj)
        {
            var conf = RGraph.Registry.Get('chart.adjusting.bar.myCanvas');
            
            p(conf);
        }
        RGraph.AddCustomEventListener(bar, 'onadjustend', myFunc);
    }
</script>