# A page showing the various Y scale variations of the SVG grouped HBar chart

This goes in the documents header:

    <script src="RGraph.svg.common.core.js"></script>
    <script src="RGraph.svg.hbar.js"></script>

Put this where you want the chart to show up:

    <div style="width: 400px; height: 450px" id="chart-container1"></div></div>
    <div style="width: 400px; height: 450px" id="chart-container2"></div></div>
    <div style="width: 500px; height: 550px" id="chart-container3"></div></div>
    <div style="width: 500px; height: 450px" id="chart-container4"></div></div>
    <div style="width: 500px; height: 450px" id="chart-container5"></div></div>

This is the code that generates the chart:

    <script>
        new RGraph.SVG.HBar({
            id: 'chart-container1',
            data: [[-5,-6],[-7,-8],[-9,-10],[-11,-12],[-13,-14],[-15,-15]],
            options: {
                xaxisMax: -5,
                xaxisMin: -15,
                yaxisLabels: ['Harry','Lucy','Pete','Nick','Al','John'],
                title: 'Both min and max negative',
                vmargin: 10,
                backgroundGridHlines: false,
                backgroundGridBorder: false,
                gutterRight: 50,
                gutterLeft: 10,
                gutterLeftAutosize: false
            }
        }).draw();

        new RGraph.SVG.HBar({
            id: 'chart-container2',
            data: [[1,2],[3,4],[5,6]],
            options: {
                yaxisLabels: ['Harry','Lucy','Pete'],
                title: 'Min set to zero and max positive',
                vmargin: 25,
                backgroundGridHlines: false,
                backgroundGridBorder: false
            }
        }).draw();

        new RGraph.SVG.HBar({
            id: 'chart-container3',
            data: [[10,9,8],[7,6,5],[4,3,2],[1,0,-1],[-2,-3,-4],[-5,-6,-7],[-8,-9,-10]],
            options: {
                xaxisMin: 'mirror',
                yaxisLabels: [
                    'Harry','Lucy','Pete','Nick','Al','John','Kerridge',
                    'Harry','Lucy','Pete','Nick','Al','John','Kerridge',
                    'Harry','Lucy','Pete','Nick','Al','John','Kerridge'
                ],
                title: 'Min negative and max positive',
                backgroundGridHlines: false,
                backgroundGridBorder: false,
                colors: [
                    'red', 'blue','green',
                    'red', 'blue','green',
                    'red', 'blue','green',
                    'red', 'blue','green',
                    'red', 'blue','green',
                    'red', 'blue','green',
                    'red', 'blue','green'
                ],
                colorsSequential: true,
            }
        }).draw();

        new RGraph.SVG.HBar({
            id: 'chart-container4',
            data: [[5,6,7],[8,9,10]],
            options: {
                title: 'Both min and max above zero',
                yaxisLabels: ['Ken','Larry','Kevin','Jobe','Lucy','John'],
                xaxisMin: 5,
                xaxisMax: 10,
                backgroundGridBorder: false,
                backgroundGridHlines: false
            }
        }).draw();

        new RGraph.SVG.HBar({
            id: 'chart-container5',
            data: [[-1,-2,-3],[-4,-5,-6],[-7,-8,-9],[-10,-10,-10]],
            options: {
                gutterLeftAutosize: false,
                gutterLeft: 10,
                gutterRight: 75,
                title: 'Zero max and negative min',
                yaxisLabels: ['Ken','Larry','Kevin','Charles'],
                xaxisMin: -10,
                xaxisMax: 0,
                vmargin: 25,
                backgroundGridBorder: false,
                backgroundGridHlines: false
            }
        }).draw();
    </script>

« Back