# An SVG 3D Bar chart

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: 550px; height: 300px" id="chart-container"></div>

This is the code that generates the chart:

    <script>
        data     = [[-4,-5,-3],[-5,-2,-1], [-4,-4,-2],[8,16,11],[15,11,13],[2,5,1],[1,2,3]];
        tooltips = RGraph.SVG.arrayLinearize(data);

        tooltips.forEach(function (v,k,arr)
        {
            arr[k] = 'Result: {1},000m'.format(
                arr[k]
            );
        });

        var bar = new RGraph.SVG.Bar({
            id: 'chart-container',
            data: data,
            options: {
                variant: '3d',
                strokestyle: 'rgba(0,0,0,)',
                colors: [
                    'Gradient(#faa:#fbb)',
                    'Gradient(#aaa:#bfb)',
                    'Gradient(#aaf:#bbf)'
                ],
                gutterTop: 30,
                gutterLeft: 45,
                gutterBottom: 80,
                xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
                xaxisColor: '#ddd',
                xaxisTickmarks: 0,
                yaxisColor: '#ddd',
                yaxisUnitsPost: 'km',
                yaxisMax: 20,
                yaxisMin: -5,
                yaxisTickmarks: 0,
                tooltips: tooltips,
                shadow: false,
                backgroundGridColor: '#eee',
                title: 'Distance run in the past week',
                titleY: 10,
                hmargin: 7
            }
        }).wave().on('tooltip', function (obj)
        {
            var tooltip = RGraph.SVG.REG.get('tooltip'),
                idx     = RGraph.SVG.sequentialIndexToGrouped(tooltip.__index__, obj.data),
                colors  = ['red','#0f0','blue'];

            tooltip.style.borderColor = colors[idx[1]];
        });

        // Some CSS that gets used for the tooltips
        RGraph.SVG.tooltips.style.fontSize        = '105%';
        RGraph.SVG.tooltips.style.fontFamily      = 'Arial, sans-serif';
        RGraph.SVG.tooltips.style.fontWeight      = 'bold';
        RGraph.SVG.tooltips.style.paddingRight    = '10px';
        RGraph.SVG.tooltips.style.paddingLeft     = '10px';
        RGraph.SVG.tooltips.style.paddingTop      = '10px';
        RGraph.SVG.tooltips.style.paddingBottom   = '10px';
        RGraph.SVG.tooltips.style.textAlign       = 'center';
        RGraph.SVG.tooltips.style.backgroundColor = 'white';
        RGraph.SVG.tooltips.style.border          = '3px black solid';
        RGraph.SVG.tooltips.style.borderWidth     = '3px';
    </script>

« Back