Google's power usage

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.

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="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):

<script>
    // Create the bar chart. The data is such that we have
    // "end point values" for each segment, and not the
    // magnitude value of the segment itself. So the
    // value of the segment is generated by subtracting
    // the first figure from the second.
    new RGraph.Bar({
        id: 'cvs',
        data: [
            [3.5 - 1.19,1.19],
            [4 - 1.5, 1.5],
            [4.5 - 1.75, 1.75],
            [5.1 - 2.25, 2.25],
            [6 - 3.5, 3.5],
            [7.75 - 7.75, 7.75],
            [10 - 10, 10]
        ],
        options: {
            marginRight: 90,
            colors: ['#ddd', 'green'],
            
            // Add the green labelsAbove. One above label is possible
            // for each segment of the chart - hence the blank values.
            labelsAbove: true,
            labelsAboveColor: 'green',
            labelsAboveSpecific: ['34%','', '35%','', '37%','', '48%','', '61%','', '100%','', '100%',''],
            
            // The Y-axis is positioned on the right-hand-side and uses
            // specific labels. This is because the top-most label has
            // 'terawatts' appended to the number.
            yaxisPosition: 'right',
            yaxisLabelsSpecific: ['10 terawatts','9','8','7','6','5','4','3','2','1','0'],
            yaxis: false,

            xaxisLabels: ['2012','2013','2014','2015','2016','2017','2018'],
            xaxis: false,
            xaxisTickmarksCount: 0,
            grouping: 'stacked',                
            
            // No background grid
            backgroundGrid: false,                
            
            // Define the key and position it on the left in the middle(ish).
            key: ['Total energy consumption','Renewable energy'],
            keyPositionGraphBoxed: false,
            keyColorShape: 'circle',

            // Position the (multiline) title on the left-hand-side
            title: 'Renewable energy\npurchasing compared with\ntotal electricity use',
            titleHalign: 'left',
            titleX: 50,
            titleY: '+25',
            titleBold: true
        }
    }).draw().exec(function (obj)
    {
        // This draws the custom X-axis. Instead of using the draw
        // event an exec() function is used because dynamic features
        // aren't being used and the chart isn't being redrawn so it
        // only needs to be done once.
        obj.path(
            'b m % % l % % s gray',
            obj.get('marginLeft'), obj.canvas.height - obj.get('marginBottom'),
            obj.canvas.width - obj.get('marginRight'), obj.canvas.height - obj.get('marginBottom')
        );
    // Add some responsive capabilities to the chart. It reduces the size of the text on smaller
    // screens and moves the key around
    }).responsive([
        {maxWidth: null,width:650,height:350,options:{textSize: 10,marginInner: 15,titleSize: 16,keyPositionY: 100,keyPositionGraphBoxed:false,keyBackground:'rgba(0,0,0,0)',keyPositionX: 50}},
        {maxWidth: 800,width:350,height:250,options:{textSize: 8,marginInner: 5,titleSize: 10,keyPositionY: 170,keyPositionGraphBoxed: true,keyBackground:'rgba(255,255,255,0.75)',keyPositionX: 120}}
    ]);
</script>