This is a copy of a chart that represents the UK monthly inflation rate
(these are the real figures). Not good if you have a mortgage - but on
the other hand if you're a saver its a good sign! It's using gradients,
the labelsAbove
option and a custom font. It also sets the yaxisScaleMax
property
to 3.5 so that the granularity is clearer.
<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.bar.js"></script>Put this where you want the chart to show up:
<div style="width: 750px; height: 300px" id="chart-container"></div>This is the code that generates the chart:
<script> // This is the source data data = { source: [ {rate: 2.7, label: 'March 2018'}, {rate: 3.0, label: 'February 2018'}, {rate: 3.0, label: 'January 2018'}, {rate: 3.1, label: 'November 2017'}, {rate: 3.0, label: 'October 2017'}, {rate: 3.0, label: 'September 2017'}, {rate: 2.9, label: 'August 2017'}, {rate: 2.6, label: 'July 2017'}, {rate: 2.6, label: 'June 2017'}, {rate: 2.9, label: 'May 2017'}, {rate: 2.7, label: 'April 2017'}, {rate: 2.3, label: 'March 2017'} ], // These are for once the data has been extracted and split up from // the source data: [], labels: [] }; // Reverse the data so that the latest figure is on the right data.source = RGraph.SVG.arrayReverse(data.source); // Loop through the source data extracting the required parts for (var i=0; i<data.source.length; ++i) { if (data.source[i]) { // Extract the data piece from the source data data.data[i] = data.source[i].rate; // Extract the label from the source data data.labels[i] = ((i+1) % 3 === 0 ? data.source[i].label : ''); } } new RGraph.SVG.Bar({ id: 'chart-container', data: data['data'], options: { xaxisLabels: data['labels'], colors: ['Gradient(#4B86B6:#4B86B6:white)'], colorsStroke: 'black', textFont: 'Monospace', textSize: 10, marginInner: 8, backgroundGridColor: '#eee', backgroundGridVlines: false, backgroundGridBorder: false, yaxis: false, yaxisScaleDecimals: 1, yaxisScaleMin: 2, yaxisScaleMax: 3.5, xaxis: false, labelsAbove: true, labelsAboveDecimals: 1, title: 'UK inflation rate', titleSize: 10, titleHalign: 'left', titleX: 50, linewidth: 0.75 } }).draw(); </script>