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>
<div style="width: 600px; height: 250px" id="chart-container6"></div></div>

This is the code that generates the chart:

<script>
    bar = new RGraph.SVG.Bar({
        id: 'chart-container1',
        data: [[-5,-5],[-7,-7],[-9,-9],[-11,-11],[-13,-13],[-15,-15]],
        options: {
            xaxisLabels: ['Harry','Bill','Pete','Lou','Kev','Bob'],
            title: 'Negative min and max',
            yaxisMax: -5,
            yaxisMin: -15,
            gutterLeft: 50
        }
    }).draw();

    bar = new RGraph.SVG.Bar({
        id: 'chart-container2',
        data: [[0,0],[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8],[9,9]],
        options: {
            xaxisLabels: ['Harry','Bill','Pete','Lou','Kev','Bob','Masy','Olga','Gile','Jill'],
            title: 'Zero min and positive max',
            gutterLeft: 50,
            yaxisMin: 0,
            yaxisMax: 10
        }
    }).draw();

    bar = new RGraph.SVG.Bar({
        id: 'chart-container3',
        data: [[10,10],[9,9],[8,8],[7,7],[6,6],[5,5],[4,4],[3,3],[2,2],[1,1],[0,0],[-1,-1],[-2,-2],[-3,-3],[-4,-4],[-5,-5],[-6,-6],[-7,-7],[-8,-8],[-9,-9],[-10,-10],],
        options: {
            xaxisLabels: ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U'],
            title: 'Negative min and positive max',
            gutterLeft: 50,
            yaxisMin: 'mirror'
        }
    }).draw();

    bar = new RGraph.SVG.Bar({
        id: 'chart-container4',
        data: [5,6,7,8,9,10],
        data: [[5,5],[6,6],[7,7],[8,8],[9,9],[10,10]],
        options: {
            xaxisLabels: ['A','B','C','D','E','F'],
            title: 'Positive min and positive max',
            gutterLeft: 50,
            yaxisMin:5,
            yaxisMax: 10
        }
    }).draw();

    bar = new RGraph.SVG.Bar({
        id: 'chart-container5',
        data: [[-9,-1],[-1,-2],[-6,-3],[-7,-4]],
        options: {
            xaxisLabels: ['A','B','C','D'],
            title: 'Zero mac and negative min',
            gutterLeft: 50,
            yaxisMin:-10,
            yaxisMax: 0
        }
    }).draw();

    bar = new RGraph.SVG.Bar({
        id: 'chart-container6',
        data: [[9,-10],[1,2],[6,13],[17,14],[-10,-8]],
        options: {
            xaxisLabels: ['A','B','C','D', 'E'],
            title: 'Negative min, poaitive max, offset axis',
            gutterLeft: 50,
            yaxisMin:-10,
            yaxisMax: 40
        }
    }).draw();
</script>

« Back