Summary
RGraph demo page: A segmented SVG Bar chart

A segmented SVG Bar chart

An interesting variation on a regular Bar chart. It's actually two Bar charts - the first is drawn without axes or background grid and then lines are drawn over the bars. This gives us the segmented effect. Then another Bar chart is drawn on top of this with the bars zeroed out so it just has the grid and the axes that you see.

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="position: relative; padding: 15px; display: inline-block; width: 750px; height: 300px">
    <div style="width: 750px; height: 300px; top: 0; left: 0; position: absolute" id="chart-container1"></div>
    <div style="width: 750px; height: 300px; top: 0; left: 0; position: absolute" id="chart-container2"></div>
</div>
This is the code that generates the chart:
<script>
    var bar1 = new RGraph.SVG.Bar({
        id: 'chart-container1',
        data: [5,4,1,3,5,2,1],
        options: {
            gutterLeft: 75,
            yaxis: false,
            xaxis: false,
            yaxisScale: false,
            backgroundGrid: false,
            hmargin: 5
        }
    }).draw();
    
    
    for (var i=0; i<=5; ++i) {
        
        var y = bar1.getYCoord(i);

        RGraph.SVG.create({
            svg: bar1.svg,
            type: 'path',
            attr: {
                d: 'M0 ' + y + ' L750 ' + y,
                stroke: 'white',
                'stroke-width': 8,
                'shape-rendering': "crispEdges"
            }
        });

    }


    var bar2 = new RGraph.SVG.Bar({
        id: 'chart-container2',
        data: [0,0,0,0,0,0,0],
        options: {
            gutterLeft: 75,
            yaxisMax: 5,
            yaxisLabelsOffsety: 25,
            yaxisFormatter: function (obj, num)
            {
                if (!num) {
                    return '';
                }

                return 'Level ' + num;
            },
            hmargin: 20,
            xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            title: 'A segmented Bar chart',
        }
    }).draw();
    
    // Need to change the container positions to absolute
    bar1.container.style.position = 'absolute';
    bar2.container.style.position = 'absolute';
</script>

« Back