# An SVG Bar chart with post processing

This Bar chart uses the custom RGraph ondraw event to add highlight to each bar.There's a canvas version of this chart here.The ondraw event is used to run some code which, using the coordinates of each bar, adds a semi-opaque rectangle to the left-hand-side of each bar. There's also a shadow and the background grid is customised.

This goes in the documents header:

    <script src="RGraph.svg.common.core.js"></script>
    <script src="RGraph.svg.bar.js"></script>

Put this where you want the chart to show up:

    <div style="width: 750px; height: 300px" id="chart-container"></div>

This is the code that generates the chart:

    <script>
        var bar = new RGraph.SVG.Bar({
            id: 'cc',
            data: [[47,75],[32,74],[71,85],[25,19],[23,71],[81,59],[43,130],[23,20]],
            options: {
                textSize: 10,
                gutterLeft: 45,
                colors: ['#494949','#35A0DA'],
                xaxisLabels: ['Alf','Bert','Craig','Dan','Edgar','Fred','Gary','Harry'],
                xaxis: false,
                yaxisLabelsCount: 3,
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                hmargin: 10,
                shadow: true
            }
        }).on('draw', function (obj)
        {
            for (var i=0; i<obj.coords.length; ++i) {

                var x = obj.coords[i].x,
                    y = obj.coords[i].y,
                    w = obj.coords[i].width / 2,
                    h = obj.coords[i].height;

                RGraph.SVG.create({
                    object: obj,
                    type: 'rect',
                    parent: obj.svg.all,
                    attr: {
                        x: x,
                        y: y,
                        width: w,
                        height: h,
                        fill: 'rgba(255,255,255,.215)'
                    }
                });
            }
        }).draw();
    </script>