Like the canvas demo of a similar nature this is a demo of a Pie chart that
is configured as a donut chart and is customised to look like an activity
meter (though you can have it represent whatever data that you wish).
The chart is made by drawing a set of darkened Pie charts and then drawing
another set of Pie charts on top which have the second slice that they
show set to have transparent as the color - so that the darker Pie beneath
can show through. The text in the center is then added using the API with
the Pie chart centerx
and centery
variables.
<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.pie.js"></script>Put this where you want the chart to show up:
<div style="width: 500px; height: 500px" id="chart-container"></div>This is the code that generates the chart:
<script> conf = [ {value: 85, color: '#2B908F', radius: 245}, {value: 72, color: '#90EE7E', radius: 198}, {value: 64, color: '#F45B5B', radius: 151} ]; // Create the donut charts that become the background for (let i=0; i<conf.length; ++i) { var pie = new RGraph.SVG.Pie({ id: 'cc', data: [1], options: { donut: true, radius: conf[i].radius, colors: [conf[i].color], donutWidth: 45 } }).roundRobin(); } // Create the donut charts that are the foreground donuts for (let i=0; i<conf.length; ++i) { var pie = new RGraph.SVG.Pie({ id: 'cc', data: [conf[i].value, 100 - conf[i].value], options: { donut: true, radius: conf[i].radius, colors: [conf[i].color, 'rgba(0,0,0,0.5)'], donutWidth: 45 } }).roundRobin(); } RGraph.SVG.text({ object: pie, x: pie.centerx, y: pie.centery, text: conf[0].value + '%', halign: 'center', valign: 'center', size: 65, bold: true, color: '#ccc' }); </script>