# 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