A Horizontal Bar chart that's showing property prices using the grow()
effect. The tooltips are customised using the default CSS values (which are applied to the tootlips after they've been created).
<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.hbar.js"></script>Put this where you want the chart to show up:
<div style="padding: 15px"> <div style="width: 700px; height: 500px" id="chart-container"></div> </div>This is the code that generates the chart:
<script> data = [16944000, 16918000, 16029000, 12830000, 12534000, 10842000, 10185000, 4398000, 3656000, 3606000]; tooltips = []; labels = [ 'Eaton Square (SW1W)', 'Grovenor Crescent (SW1X)', 'Ilchester Place (W148)', 'Lansdowne Road (W112)', 'Chester Square (SW1W)', 'Lansdowne Crescent (W112)', 'Kensington Road (W85N)', 'Coombe Park (KT27)', 'The Green (TW91)', 'Ham Common (TW10)' ]; bar = new RGraph.SVG.HBar({ id: 'chart-container', data: RGraph.SVG.arrayClone(data), options: { title: 'Average house price (GBP), Jan 2011 - Oct 2016', xaxis: false, yaxis: false, xaxisLabelsCount: 2, textSize: 12, marginRight: 50, backgroundGridHlines: false, backgroundGridBorder: false, colors: ['#80004D'], yaxisLabels: labels, highlightFill: 'rgba(255,255,255,0.25)' } }).grow({frames: 60, callback: function () { RGraph.SVG.redraw(); }}); labels.forEach(function (v,k,arr) { tooltips[k] = '{1}
{2}'.format( v, RGraph.SVG.numberFormat({ object: bar, num: data[k] }) ); }); bar.set('tooltips', tooltips); RGraph.SVG.tooltips.style.backgroundColor = 'black'; RGraph.SVG.tooltips.style.color = 'white'; RGraph.SVG.tooltips.style.boxShadow = ''; RGraph.SVG.tooltips.style.textAlign = 'left'; </script>