# A page showing the various Y scale variations of the 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="width: 600px; height: 250px" id="chart-container1"></div></div>
    <div style="width: 600px; height: 250px" id="chart-container2"></div></div>
    <div style="width: 600px; height: 250px" id="chart-container3"></div></div>
    <div style="width: 600px; height: 250px" id="chart-container4"></div></div>
    <div style="width: 600px; height: 250px" id="chart-container5"></div></div>

This is the code that generates the chart:

    <script>
        new RGraph.SVG.Bar({
            id: 'chart-container1',
            data: [-5,-7,-9,-11,-13,-15],
            options: {
                yaxisMax: -5,
                yaxisMin: -15,
                gutterLeft: 50,
                xaxisLabels: ['Harry','Lucy','Pete','Nick','Al','John'],
                title: 'Both min and max negative',
                hmargin: 20,
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                xaxis: false,
                yaxis: false
            }
        }).draw();

        new RGraph.SVG.Bar({
            id: 'chart-container2',
            data: [0,1,2,3,4,5,6],
            options: {
                gutterLeft: 50,
                xaxisLabels: ['Harry','Lucy','Pete','Nick','Al','John','Kevin'],
                title: 'Min set to zero and max positive',
                hmargin: 20,
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                xaxis: false,
                yaxis: false
            }
        }).draw();

        new RGraph.SVG.Bar({
            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: {
                yaxisMin: 'mirror',
                xaxisLabels: ['Harry','Lucy','Pete','Nick','Al','John','Kerridge'],
                title: 'Min negative and max positive',
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                yaxis: 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.Bar({
            id: 'chart-container4',
            data: [5,6,7,8,9,10],
            options: {
                title: 'Both min and max above zero',
                xaxisLabels: ['Ken','Larry','Kevin','Jobe','Lucy','John'],
                gutterLeft: 50,
                yaxisMin: 5,
                yaxisMax: 10,
                backgroundGridBorder: false,
                backgroundGridVlines: false,
                xaxis: false,
                yaxis: false
            }
        }).draw();

        new RGraph.SVG.Bar({
            id: 'chart-container5',
            data: [-5,-6,-7,-8,-9,-10],
            options: {
                title: 'Zero max and negative min',
                xaxisLabels: ['Ken','Larry','Kevin','Jobe','Lucy','John'],
                gutterLeft: 50,
                yaxisMin: -10,
                yaxisMax: 0,
                backgroundGridBorder: false,
                backgroundGridVlines: false,
                xaxis: false,
                yaxis: false
            }
        }).draw();
    </script>

« Back