A demo of a logarithmic Bar chart

View the bare-bones, stripped-down version of this demo

[No canvas support]

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:


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, the CSS 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>
This is the code that generates the chart - it should be placed AFTER the canvas tag(s):