Chart 5

Chart 5 was designed to display daily data from a JavaScript data object on an HTML5 canvas graph. It was primarily designed to output many graphs based on one data set, and have each graph be customizable. Each graph can have the following characteristics customized:

Height and Width
Light, Medium, and Dark accent colors
Showing an average for the displayed data range
Customizing the X and Y labels and increments

You can check out Chart 5 on GitHub for more details.

For an example we’ll use rainfall data from Seattle, Washington. Data should be in a JavaScript object, where the keys are any JavaScript date string, and the values are the height of each bar on the chart. Here is a short example of the data format:

var raindata = { "2009-01-01": 0.71, "2009-01-02": 0.12, "2009-01-03": "", "2009-01-04": 0.57, "2009-01-05": 0.04, "2009-01-06": 1.22, "2009-01-07": 2.29 };

Here are three example graphs, scoped to different times:

Creating these graphs and customizing them are fairly simple. A constructor function takes the Data, Element ID, and Chart Title as arguments, and returns a chart object. This chart object can have its properties modified, then you can call the draw() method, which will update the chart. A simple interaction feature would be to hook the setDateBounds() method up to a control that also calls draw() – this would dynamically change the date range.

Here is a simple HTML document with three graphs:

<!DOCTYPE html>
<html>
<head>
<script src="raindata.js"></script>
<script src="chart5.js"></script>
<script>
	function init(){
		var ctx5y = document.getElementById("yearsgraph");
		var c5y = new chart5(raindata, ctx5y, "2009 & 2010");
		c5y.setDateBounds("2009-01-01", "2010-12-31");
		c5y.xaxis_labeljump = "month";
		c5y.draw();
			
		var ctx5m = document.getElementById("monthsgraph");
		var c5m = new chart5(raindata, ctx5m, "2010 Quarter 1");
		c5m.setDateBounds("2010-01-01", "2010-03-31");
		c5m.xaxis_labeljump = "week";
		c5m.draw();
		
		var ctx5w = document.getElementById("weeksgraph");
		var c5w = new chart5(raindata, ctx5w, "January 2010");
		c5w.setDateBounds("2010-01-01", "2010-01-29");
		c5w.xaxis_labeljump = "day";
		c5w.draw();
	}	
</script>
</head>
<body onload="init();">
	<canvas id="yearsgraph"></canvas><br>
	<canvas id="monthsgraph"></canvas><br>
	<canvas id="weeksgraph"></canvas><br>
</body>
</html>