Tuesday, December 18, 2012

Charting on the web with Flotr2 (a library for drawing HTML5 charts and graphs). A brief tutorial

Step 1: Include the js file for flotr2 in your web page


Step 2: Create the container


Give it a width and height


Step 3:Obtaining the data

A series is basically an bi-dimensional array of (x,y) pairs. For instance, "Number of gun homicides in the United States (1998-2009)" source
var data =
[[2009,9146],
[2008, 9484],
[2007, 10129],
[2006, 10225],
[2005, 10158],
[2004, 9385],
[2003, 9659],
[2002, 9369],
[2001, 8890],
[1999, 8259],
[1998, 9257]];

Step 4: Writing a little anonymous function


And bingo

Nothing fancy yet, but is a start. If you ask me, this is a very biassed manner to present this sort of data

No comments:

Post a Comment