Winwheel.js tutorial: #16 Creating Pie graphs
In this tutorial I will show you how to create Pie graphs using Winwheel.js. While this is the not the primary use of the code it is fairly easy to create pie graphs given that like winning wheels they are a circle with segments inside.
The main difference between creating a winning wheel and a pie graph is that you will want to specify the size of each segment to match the percentage the data in the segment is out of a total of 100%.
The segment objects have a .size property which must be set, but as the size must be degrees 0-360 rather than a percent I have created a helper function called winwheelPercentToDegrees() which will convert a percentage 0-100% to 0-360 degrees of the wheel.
The function is named winwheelPercentToDegrees() because it is not part of the Winwheel class so you can use it at the time of creating a Winning wheel object and passing in the constructor parameters. Otherwise you would first need to create the wheel object and then set the segment size afterwards.
Pie graph - full example
In this example I create a pie graph setting the segment size using the percentToDegrees() helper function, also I use HTML5 canvas code to draw some boxes and text for the legend, and finally on click of the segments I use the getSegmentAt() feature (described in previous tutorial) to populate a div on the page with some additional information about the item clicked.
|Click Pie graph segment to see more information here.|
Remember that segments in the wheel don't have to have the text drawn so if you have data items which make the segments too small for the text to fit inside (even with reduced font size) you can hide the text by setting the Winwheel.drawText property to false and only have it in the legend.
Also remember that you can animate pie graphs in other ways than spinning because GreenSock's TweenMax.js can animate any numeric property of the wheel over time. The custom Winwheel animation type would be the thing to use, or TweenMax.js directly. See the animation tutorials for more information of animating the wheel, or consider reading the TweenMax.js documentation.
< #15 Getting the segment clicked
#17: Creating a Wheel with one Image per Segement >