# An SVG 3D VProgress chart

This is a demo of a 3D Bar chart that's configured to look like a vertical progress bar - ie which has just a single bar. It has a tooltip, uses the ontooltip RGraph event to set the border color and uses the RGraph.SVG.tooltips.style object to set some default styles. Because there's only a single bar/dataset there's actually no need to use the ontooltip event - you could just set the border color as a default instead.

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

This is the code that generates the chart:

    <script>
        value = 89;

        vprogress = new RGraph.SVG.Bar({
            id: 'chart-container',
            data: [value],
            options: {
                variant: '3d',
                grouping: 'stacked',
                strokestyle: 'rgba(0,0,0,)',
                colors: ['Gradient(#aaa:#bfb)'],
                gutterTop: 30,
                gutterLeft: 65,
                gutterRight: 35,
                gutterBottom: 35,
                xaxisLabels: ['Result'],
                xaxisColor: '#ddd',
                xaxisTickmarks: 0,
                yaxisColor: '#ddd',
                yaxisUnitsPost: 'km',
                yaxisTickmarks: 0,
                shadow: false,
                backgroundGridColor: '#eee',
                titleY: 10,
                hmargin: 3,
                tooltips: ['Result: {1},000m'.format(value)],
                yaxisMax: 100,
                attribution: false
            }
        }).draw().on('tooltip', function (obj)
        {
            var tooltip = RGraph.SVG.REG.get('tooltip'),
                idx     = RGraph.SVG.sequentialIndexToGrouped(tooltip.__index__, obj.data);

            tooltip.style.borderColor = '#0f0';
        });

        // 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 #0f0 solid';
        RGraph.SVG.tooltips.style.borderWidth     = '3px';
    </script>