Here we have three Pie charts that have been configured to look like gauges showing percentages. They're regular Pie charts with two colours but then a big black circle is added over the top which makes them look like donut charts (somewhat). And finally the text is added to the center in the draw event.
<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.hbar.js"></script> <script src="RGraph.svg.pie.js"></script>Put this where you want the chart to show up:
<style> div#meters{ position: relative; background-color: black; height: 425px; } div#meters div { float: left; width: 300px; height: 300px; } div#chart-container4, div#chart-container5, div#chart-container6 { position: absolute !important; left: 0 !important; top: 280px !important; width: 900px !important; height: 70px !important; } div#chart-container5 {top: 310px !important;} div#chart-container6 {top: 340px !important;} </style> <div id="meters"> <div id="chart-container1"></div> <div id="chart-container2"></div> <div id="chart-container3"></div> <div id="chart-container4"></div> </div>This is the code that generates the chart:
<script> pie1 = new RGraph.SVG.Pie({ id: 'chart-container1', data: [15,85], options: { colors: ['red', 'transparent'], donut: true, donutWidth: 20 } }).on('draw', function (obj) { RGraph.SVG.create({ svg: obj.svg, type: 'circle', parent: obj.layers.background1, attr: { cx: obj.centerx, cy: obj.centery, r: obj.radius, fill: 'gray' } }); RGraph.SVG.create({ svg: obj.svg, type: 'circle', parent: obj.layers.background1, attr: { cx: obj.centerx, cy: obj.centery, r: obj.radius - obj.properties.donutWidth, fill: 'black' } }); // Add the text label RGraph.SVG.text({ object: obj, parent: obj.svg.all, text: obj.data[0] + '%', x: obj.centerx, y: obj.centery, halign: 'center', valign: 'center', size: 45, bold: true, color: '#999' }); // Add the text label of the name RGraph.SVG.text({ object: obj, parent: obj.svg.all, text: 'Charles', x: obj.centerx, y: obj.centery + 20, halign: 'center', valign: 'top', size: 16, bold: true, color: '#999' }); }).roundRobin({frames: 45}); new RGraph.SVG.Pie({ id: 'chart-container2', data: [50,50], options: { colors: ['red', 'transparent'], donut: true, donutWidth: 20 } }).on('draw', function (obj) { RGraph.SVG.create({ svg: obj.svg, type: 'circle', parent: obj.layers.background1, attr: { cx: obj.centerx, cy: obj.centery, r: obj.radius, fill: 'gray' } }); RGraph.SVG.create({ svg: obj.svg, type: 'circle', parent: obj.layers.background1, attr: { cx: obj.centerx, cy: obj.centery, r: obj.radius - obj.properties.donutWidth, fill: 'black' } }); // Add the text label RGraph.SVG.text({ object: obj, parent: obj.svg.all, text: obj.data[0] + '%', x: obj.centerx, y: obj.centery, halign: 'center', valign: 'center', size: 45, bold: true, color: '#999' }); // Add the text label of the name RGraph.SVG.text({ object: obj, parent: obj.svg.all, text: 'Ricky', x: obj.centerx, y: obj.centery + 20, halign: 'center', valign: 'top', size: 16, bold: true, color: '#999' }); }).roundRobin({frames: 45}); new RGraph.SVG.Pie({ id: 'chart-container3', data: [42,58], options: { colors: ['red', 'transparent'], donut: true, donutWidth: 20 } }).on('draw', function (obj) { RGraph.SVG.create({ svg: obj.svg, type: 'circle', parent: obj.layers.background1, attr: { cx: obj.centerx, cy: obj.centery, r: obj.radius, fill: 'gray' } }); RGraph.SVG.create({ svg: obj.svg, type: 'circle', parent: obj.layers.background1, attr: { cx: obj.centerx, cy: obj.centery, r: obj.radius - obj.properties.donutWidth, fill: 'black' } }); // Add the text label of the value RGraph.SVG.text({ object: obj, parent: obj.svg.all, text: obj.data[0] + '%', x: obj.centerx, y: obj.centery, halign: 'center', valign: 'center', size: 45, bold: true, color: '#999' }); // Add the text label of the name RGraph.SVG.text({ object: obj, parent: obj.svg.all, text: 'Freddy', x: obj.centerx, y: obj.centery + 20, halign: 'center', valign: 'top', size: 16, bold: true, color: '#999' }); }).roundRobin({frames: 45}); // The configuration for the red bars conf = { xaxis: false, xaxisScale: false, xaxisMax: 100, xaxisLabels: false, yaxis: false, colors: ['red'], gutterTop: 40, gutterBottom: 5, backgroundGrid: false }; // Gray backgrounds for the progress bars new RGraph.SVG.HBar({id: 'chart-container4', data: [100], options: conf}).on('beforedraw', function (obj) {var prop = obj.properties;prop.colors = ['gray'];prop.title = 'Overall 16%';prop.titleSize = 22;prop.titleColor = '#666';prop.titleBold = true;}).draw(); new RGraph.SVG.HBar({id: 'chart-container5', data: [100], options: conf}).on('beforedraw', function (obj) {obj.properties.colors = ['gray']}).draw(); new RGraph.SVG.HBar({id: 'chart-container6', data: [100], options: conf}).on('beforedraw', function (obj) {obj.properties.colors = ['gray']}).draw(); // The red bars new RGraph.SVG.HBar({id: 'chart-container4', data: [16], options: conf}).grow(); new RGraph.SVG.HBar({id: 'chart-container5', data: [88], options: conf}).grow(); new RGraph.SVG.HBar({id: 'chart-container6', data: [74], options: conf}).grow(); </script>