# A Bar charts with a reflection effect

This demo uses two canvas tags - one for the chart and one for the reflection. If the the chart used the textAccessible option the text would not be reflected - so it doesn't.

This goes in the documents header:

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

Put this where you want the chart to show up:

    <canvas id="cvs1" width="600" height="250">[No canvas support]</canvas>

    <canvas id="cvs2" width="600" height="250">[No canvas support]</canvas>

This is the code that generates the chart:

    <script>
        window.onload = function ()
        {
            function Draw(id)
            {
                var bar = new RGraph.Bar({
                    id: id,
                    data: [[45,60],[65,30],[40,80],[62,48]],
                    options: {
                        labels: ['Luis', 'Kevin', 'John', 'Gregory'],
                        ymax: 100,
                        strokestyle: 'white',
                        linewidth: 2,
                        shadowOffsetx: 0,
                        shadowOffsety: 0,
                        shadowBlur: 10,
                        hmarginGrouped: 2,
                        unitsPre: '$',
                        gutterLeft: 50,
                        gutterRight: 15,
                        colors: ['Gradient(white:rgba(255, 176, 176, 0.5))','Gradient(white:rgba(153, 208, 249,0.5))'],
                        backgroundGridAutofitNumhlines: 5,
                        backgroundGridAutofitNumvlines: 4,
                        textAccessible: false
                    }
                }).draw()

                return bar;
            }

            Draw('cvs1');

            /**
            * Draw the reflection (after inverting the canvas)
            */
            var co = document.getElementById("cvs2").getContext('2d');
            co.setTransform(1,0,0,-1,0,250);

            Draw('cvs2');

            /**
            * Reset the transformation
            */
            co.setTransform(1,0,0,1,0,0);

            /**
            * Now draw a graduated white rect over the reflection
            */
            var grad = co.createLinearGradient(0,0,0,250)
            grad.addColorStop(0, 'rgba(255,255,255,0.5)');
            grad.addColorStop(0.75, 'rgba(255,255,255,1)');

            co.fillStyle = grad;
            co.fillRect(0,0,600,250)
        };
    </script>