Categories
Uncategorized

Charts & Graphs

I’m in need of graphing some data, and since I looked at the Google Chart Tools long ago but never did anything interesting with it, I figured I’d give it a spin.

Google’s API is pretty simple to use, you feed it a URL, and you get an image in return. Here’s an example expanded out a bit:

http://chart.apis.google.com/chart?
  cht=lc&
  chs=600x400&
  chg=10,5,5,5&
  chco=ff0000&
  chxt=x,y&
  chxr=1,0,100,5|0,0,24,1&
  chd=t:3,3,3,3,3,3,3,65,38,46,60,59,56,58,36,21,13,62,2,3,3,3,3,2

Each parameter controls some part of the image you get returned. (Want to see it? View the URL.)

You should get something that looks like this:

Chart

Wow… but not really. This is probably one of the simplest examples of a chart, but it serves my purpose.

Of course, since I’m not always content relying on others to host my data, I wanted a way to generate and store the image. You can do that too…

curl -o 20101130.png 'http://chart.apis.google.com/chart?cht=lc&chs=600x400&chg=10,5,5,5&chco=ff0000&chxt=x,y&chxr=1,0,100,5|0,0,24,1&chd=t:3,3,3,3,3,3,3,65,38,46,60,59,56,58,36,21,13,62,2,3,3,3,3,2'

Just use curl to make the request and store the image in a file named 20101130.png (or whatever the date is, or file name you’d prefer.) Obviously you’ll need curl installed. If you need to generate a new chart everyday this is ripe for automating.

I also looked at jQuery Visualize as an option. It’s quite different than the Google Chart API as to how it functions.

Chart

With jQuery Visualize you don’t actually create a chart. Well, you do create a table of data, and jQuery Visualize does all the heavy lifting and creates the chart based entirely on your well-formed tabular data.

I sort of like this approach because there’s no external image files to generate, host, or worry about. You just make a table, and include a bit of Javascript. (Of course there are other concerns/issues, but simplicity is pretty high.)

I’m still evaluating what my final choice will be for my current project. If this were 10 years ago, I probably would have used Perl to generate the image files. If it were 5 years ago, I probably would have used Perl to generate some SVG files…

jQuery Visualize uses the HTML 5 Canvas element, so they get some points in the “innovation” column I guess… Also, jQuery Visualize requires less math, and in my world, the less math I have to do, the better!

Categories
Uncategorized

Fun with SVG Graphs

[Editor’s Note: If your browser does not support SVG images, you should be seeing PNG images instead, which will not look as good as the SVG versions. If you don’t see any images, let me know what browser, version, etc. you are using. It seems some of the popular browsers out there don’t “do the right thing” hmph!]

[Editor’s Note Part 2: Seems that RSS 2.0 can’t handle the <object> tag properly? At least that’s what the validator tells me. The Atom feed seems ok though…]

I’ve been working on some simple graphing utilities in Perl to create SVG graphs… Here’s a few samples…

graph

Our cost for phone service seems to have gone down.

graph

Local utilities continue to rise. Ugh…

graph

We’re spending less on food, well, most of the time. ;)

I like the fact that these are very simple, showing just the trend and not going into details like month, amount, etc. In fact, to create one of these just takes the following:

perl ggraph2.pl "Phone" "44 54 50 53 44 41 43 53 42 42 44" >phone.svg

Run the script passing in the name you want on it, and a string of numbers space separated, and output it to a file. It’s still a bit fragile, and only does some basic normalizing, so wacky things will break it, but it’s a start. Like all other quick little hacks, in the hands of the guy who wrote it, it “gets the job done” while users would break it in less than 10 minutes and start yelling.

I really like SVG. It reminds me of the old days of plotting out graphics on the Apple ][+ and that’s a good thing! It’s another one of those “edge technologies” I keep hoping will finally catch on big one of these years…