Right behind pie charts, bar charts are another popular tool for visualizing data. In this recipe, we'll create a configurable Bar Chart class that takes in an array of data elements and creates a simple bar chart. We'll reuse the data structure from the previous recipe to compare the results. Like the Pie Chart class, the bar chart drawing methods also automatically scale the chart to fill up the canvas.
Follow these steps to create a Bar Chart class that can automatically position and size a bar chart from an array of data:
Define the
BarChart
constructor which draws the chart:/* * BarChart constructor */ function BarChart(config){ // user defined properties this.canvas = document.getElementById(config.canvasId); this.data = config.data; this.color = config.color; this.barWidth = config.barWidth; this.gridLineIncrement = config.gridLineIncrement; /* * adjust max value to highest possible value divisible * by the...