A segmented SVG 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="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=1; 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