- ANN tags:
- heatcanvas
- html5
- javascript
- project
- web published: true comments: true
As described in Wikipedia, a heat map is a graphical representation of data in a two-dimensional table. HeatCanvas enables heat map on HTML5 canvas. With HeatCanvas, you can visualize your data on modern web browser without server-side support.
HeatCanvas is based on the prototype I wrote 15 months ago. I just rewrite the whole with WebWorker API to keep user away from UI frozen and annoying slow-script warning. HeatCanvas is implemented as pixel based, so the image quality is great.
The API is rather simple. There are only three steps to create a basic heat map.
1. Create the heat map object:
[cc lang="javascript"]
var heatmap = new HeatCanvas('canvasId');
[/cc]
2. Add some data to heat map:
[cc lang="javascript"]
heatmap.push(223, 98, 10); // x,y and value for this point
[/cc]
3. Render it:
[cc lang="javascript"]
heatmap.render();
[/cc]
In contrast to the base API, HeatCanvas also supports flexible options to customize the rendering. Even custom colour scheme is allowed. You can refer to the doc for detail.
And for your convenience, we have a GoogleMap plugin, HeatCanvasOverlayView, that wraps HeatCanvas. You can use it in your GoogleMap application.
For live demos, you can find at: http://sunng87.github.com/heatcanvas/
As always, the project is hosted on github: https://github.com/sunng87/heatcanvas .
The three javascript files are only necessary in your application, thus, please ignore the htmls in your deployment. Any feedback is welcomed and also please kindly let me know your application using this API.
