# A demo of a logarithmic Bar chart

[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 `yaxis` 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, 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>
</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,