A horseshoe Pie chart
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
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
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: