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.
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: