A Bar chart showing Google's power usage

Summary: An example of a stacked Bar chart that's been configured to look quite different to a standard Bar chart. It uses custom labels so that the top label has custom text added.

[No canvas support]

Here's a chart that was recently shown on Googles blog and I decided it would be a great one to recreate with RGraph. It uses the canvas library but it should be equally as simple to use the SVG libraries.

It's a stacked Bar chart which uses the labelsAboveSpecific option so that the labelsAbove labels can be specified explicitly.

The Y labels are specific, enabling the top label to have some text appended to it.

There's a key that's positioned on the left-hand-side and also a title that's positioned in the same place.

Also the Y axis is disabled, the X axis is colored gray and its tickmarks are disabled.

This goes in the documents header:

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

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="400">
    [No canvas support]
</canvas>

This is the code that generates the chart: