Mamoo

mamoo

iCanChart.js and HTML5 canvas tag

scottumsted - Tue 11 Aug 2009

I'm shooting for at least one post a month and I'm on a two month roll. This month's entry is about a feature not available to all. Those of you on IE, Firefox and Opera can move along. Those with Safari and Chrome can hang around. Unfortunately, this cool feature doesn't work with Safari on the iphone, at least not v2.0.

One of the new cool things that comes with HTML5 support is canvas. Using canvas you can write graphics directly to the browser. The chart image was made using canvas and a little chart api I wrote a while back in .net. I converted the api to javascript. I only moved over the bar chart though there are a few other charts still in .net. I'll move them over when I get a chance. I'm thinking of changing up holeytwit to track and cache the top searches over time and use the chart canvas api to chart out the results.

To see iCanChart and canvas in action click on the image or this link.

To get started with canvas, you need to create a ..... you guessed it a ..... canvas tag.


  <body onload="draw()">
    <canvas id="canvas1" width="500" height="300"></canvas>
  </body>

To use the chart api just build a set of data points with labels and pass them in to the chart init method along with the canvas id, size, and title. Don't forget to import the iCanChart.js script file.


<script type="text/javascript" src="../script/iCanChart.js"></script>
<script type="text/javascript">
	function draw(){
		var bc = new BarChart;
		var dataPoints = new Array();
		// build out the data points
		for(var i=0;i<10;i  ){
			dataPoints[i] = new Object();
			dataPoints[i].Label = 'day ' (i 1);
			dataPoints[i].Value = Math.random()*100; 
		}
		
		// create the chart
		bc.initBarChart('canvas1',300,500,dataPoints,'Hits per Day','hits');
	}

</script>

The charts scale automatically to the height and width passed into the init. The x and y axis will scale based on the values passed in as data points. You can reset the round up value to adjust how far the y axis will round up, the next 100, the next 1000, so on. All colors can be modified and a threshold can be set to what every you like. There's a two series bar chart (still only in .net) that i've found useful for comparing site activity with errors encountered. Both of the y axes scale to their own data points. I'll convert the two series chart class next.

back to canvas....

To create these charts, I had to draw lines, write text, and a rectangle. You're probably thinking that this doesn't sound too hard. You would be correct. With canvas you set your attributes, like line width, font, color, alignment, a bunch of others on the fill or stroke. You then open the path (canvas), perform the action )stroke or fill, and then close the path (canvas). I wrote a few helper methods to ease the move from .net. The code is below and can be found in iCanChart.js.


function canvasElement(){
	return document.getElementById(this.canvasId).getContext('2d');
}
function drawLine(_color,_width,_x1,_y1,_x2,_y2){
	var ctx = this.canvasElement();
	ctx.beginPath();
	ctx.strokeStyle = _color;
	ctx.lineWidth = _width;
	ctx.moveTo(_x1,_y1);
	ctx.lineTo(_x2,_y2);
	ctx.stroke();
	ctx.closePath();
}
function drawRectangle(_color,_x,_y,_height,_width){
	var ctx = this.canvasElement();
	ctx.beginPath();
	ctx.fillStyle = _color;
	ctx.fillRect(_x,_y,_width,_height);
	ctx.fill();
	ctx.closePath();
}
function drawText(_color,_align,_font,_text,_x,_y){
	var ctx = this.canvasElement();
	ctx.beginPath();
	ctx.font = _font;
	ctx.textAlign = _align;
  	ctx.fillStyle = _color;
  	ctx.fillText(_text, _x, _y);
  	ctx.fill();
 	ctx.closePath();
}

Ok this is a different topic entirely... In my last post I mentioned that my wife and I fight over the macbook. Well we will fight no longer. No, I didn't get rid of my wife. I love her and need her and its in my best interest to keep her happy. Instead, I just gave up the fight and let her have her macbook back. I didn't give up on mac, I just won't use her mac any longer. This weekend I ordered a refurb macbook of the apple online store. With the refurb price and the fact that TN had a sales tax free weekend, I saved quite a few bucks. I mentioned in the last post that I'm also running a notebook with kubuntu. I like it alright, but honestly it's just not as polished as mac osx. I even got the right wireless drives installed but it's still not as responsive as the mac. The eclipse install isn't quite right either. Only the old version of Eclipse works and I had to play around with it to get the font sizes right. It also crashes quite often. By the way, I run opera on Kubuntu. I like opera much better than firefox. The only reason I ever use firefox now is for firebug. I installed opera on my son's Xubuntu (Celeron 1.2GHz w/ 256MB) and it's fine. Although he complains that the warrior cats games are a little slow in flash. All he does is look up the occasional pokemon hint. He doesn't need much more.

0 comments 3 views

comments

name

comment