Google's power usage
View the bare-bones version of this demo with any interactive features or animations enabled

Here's a chart that was recently shown on Google's 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 that uses the labelsAboveSpecific
option so that the
labelsAbove
labels can be specified explicitly.
The Y-axis
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.
The responsive
function changes the size of the chart, changes the size of text
on the chart and changes the key to be in the bottom right corner of the chart. It gives the
key a semi-transparent white background too so that it's easier to read.
<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="350" style="float: right">[No canvas support]</canvas>This is the code that generates the chart - it should be placed AFTER the
canvas
tag(s):