An SVG 3D VProgress 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: 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>

« Back