A demo of a logarithmic Bar chart

At first look, you may think that this looks like a regular, basic Bar chart. And you'd not be far wrong. The Y-axis has six labels instead of five (not including zero) but apart from that what's different?

The scale - that's what. Notice that instead of being a linear progression of (for example) [0, 2, 4, 6, 8, 10] it's a logarithmic scale that has the numbers [0,10,100,1000,10000,100000,1000000].

This can make it easier to show datasets that have one or more data points that are significantly higher than the rest - as is shown here (the first value is 1,000,000 and the second value is 5. The entire dataset is:

[1000000,5,6,4,6,8012,12,7]

Before the chart is created the data is converted to smaller numbers by using the RGraph.log api function. It's these smaller numbers that are then plotted on the chart.

For smaller screens the size of the chart shrinks, thecss float is removed, the size of the text reduces and the x-axis labels are changed to be angled.

This goes in the documents header:

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

Put this where you want the chart to show up:

<div style="float: right">
    <canvas id="cvs" width="600" height="300">[No canvas support]</canvas>
</div>

This is the code that generates the chart - it should be placed AFTER the canvas tag(s):

<script>
    // Some raw data
    data = [1000000,5,6,4,6,8012,12,7];

    // Convert the data using the RGraph.log() function to logarithmic values
    for (i=0;i<data.length; ++i) {
        // This function is in RGraph.common.core.js
        data[i] = RGraph.log(data[i], 10);
    }

    // Create a Bar chart with the log values
    new RGraph.Bar({
        id: 'cvs',
        data: data,
        options: {
            yaxisTickmarksCount: 6,
            yaxisScaleMax: 6,
            
            // These are the labels that you see - and represent the real values - not the
            // logarithmic values
            yaxisLabelsSpecific: ['1,000,000', '100,000', '10,000', '1,000', '100', '10', '0'],

            xaxisLabels: ['Pob','Libby','June','Hoolio','Jane','Daz','Luis','John'],
            xaxisTickmarksCount: 8,
            marginLeft: 95,
            marginBottom: 45,
            backgroundGridHlinesCount: 6,
            backgroundGridVlinesCount: 7,
            colorsStroke: 'transparent',
            shadow: false,
            responsive: [
                {maxWidth: null,width:600,height:300,options: {xaxisLabelsOffsety:0,xaxisLabelsAngle:0,textSize: 14},parentCss:{'float':'right',textAlign:'none'}},
                {maxWidth: 900,width:400,height:200,options: {xaxisLabelsOffsety:3,xaxisLabelsAngle:45,textSize: 12},parentCss:{'float':'none',textAlign:'center'}}
            ]
        }
    }).draw();
</script>