Share RGraph on Facebook Share RGraph on Twitter

A horseshoe Pie chart

[No canvas support]

Here's a Pie chart that has been severely customised in order to make it look like circular Progress Bar. The code shown below has comments for each "little bit" so it's not too difficult to follow and understand.

Basically what the chart is doing is drawing a Pie chart (configured to be a donut chart) with some text being drawn in the center in the draw event (which is called on every frame of the animation).

As the value of the Pie chart is updated by the roundRobin() effect the text in the center is updated as well.

The gray background to the chart is drawn using the beforedraw event.

And the two ends to the circle are actually each made up from two circles - one larger white circle and then a smaller black circle.

The fact that there's a significant amount of code would make this an ideal candidate to put all this code in a function in a library file so that you could then just include that library file in a page and call the function. Like this (for example):

drawProgress('cvs', 65); // ID and value

This goes in the documents header:
<script src="../libraries/RGraph.common.core.js">&ly;/script>
<script src="../libraries/RGraph.pie.js"></script>>
Put this where you want the chart to show up:
<canvas id="cvs" width="300" height="300" style="border: 1px solid #ddd">[No canvas support]</canvas>
This is the code that generates the chart: