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

Monday, December 17, 2012

Choosing a visualization library. Flotr2

This is my first post. I'm learning CSS alongside JavaScript and I think is paying off. I'm setting up this site to practice in my free time. Thanks for visiting.

I'm pretty fond of protovis, but hell, too much work to accomplish very simple things. The first alternative I'm trying is flotr2.