Pie charts are probably one of the most common data visualizations because they quickly give users a sense of the relative weights of data elements. In this recipe, we'll create a configurable Pie Chart class that takes in an array of data elements and produces a pie chart. Furthermore, we'll construct the Pie Chart drawing methods in such a way that the pie chart and label automatically fills up as much of the canvas as possible.
Follow these steps to create a Pie Chart class that can automatically position and size a pie chart and a legend from an array of data:
Define the constructor for the
PieChart
class which draws the pie chart:/* * PieChart constructor */ function PieChart(canvasId, data){ // user defined properties this.canvas = document.getElementById(canvasId); this.data = data; // constants this.padding = 10; this.legendBorder = 2; this.pieBorder = 5; this.colorLabelSize = 20; this.borderColor = "#555"; this.shadowColor...