
332 GOOGLE APPS HACKS
HaCK 137:
Did you know that you can make the browser display vector
graphics with just a few lines of code? Welcome to Canvas.
Google Analytics already includes many trafc data visualizations. You can also export your
numbers as CSV les and import them into Google Spreadsheets to create new charts.
In this hack, you will learn how to create your own trafc chart using the incredibly cool Canvas
framework, which can produce vector graphics and animations with a little bit of HTML and
JavaScript. All code referenced in this hack is also available in a single zip le at http://blogoscoped.
com/googleappshacks/canvas.zip. Although setting up Canvas may take a little longer than using,
say, the Google Charts API , it’s also much more exible, and can even include animated
charts.
Canvas is a vector graphics framework which works in most popular browsers today including
Firefox, Opera and Safari, and does not require a plug-in like Flash does. Internet Explorer too can
render Canvas code, at least with a little tweak you’ll see further below. Canvas can be used to have
a web page show 2D and 3D drawings, games, charts, applications, animations, and much more.
A longer canvas tutorial is available at http://developer.mozilla.org/en/docs/Canvas_tutorial
(explaining how to draw rectangles ...