The roads I take...

As I mentioned at the end of the recent post on stability graphs, I was looking for doing JS-based, dynamic versions of those graphs. Those would be able to always have current data without manually copying stuff around (as I've done previously) and should be available to more people in the Mozilla community.

That said, even though I tried previously to do some canvas magic to create graphs in JS, it's tedious to create all that code by oneself, so I set out to find a library that can help me.

My set of ideal requirements was:

• It should do graphs only, my code can handle the rest.
• It should be lightweight and easy to integrate.
• It must be Free Software (i.e. have an "open source" license that allows all freedoms we are used to for code at Mozilla).
• It should support mousing over the graph series and getting exact values.
• Possibly, have annotations for certain points in the graph ("this spike was the Google doodle crash" or "this day, was had data anomalies").
• Potentially allow zooming into a certain time frame as I have long time series in those graphs.
• Maybe it would be nice if it could read my JSON data directly, but I need some processing of the numbers anyhow, so JS objects/arrays or such as data input is OK as well.

So, I went on a web search and tried to find libraries that would fulfill my requirements. Interestingly, I saw a number of commercially licensed JS libraries floating around, I guess there's some business in creating graphs out there.
The list below is the libraries I took a closer look at (before you ask, flot is not on the list because it requires jQuery and therefore violates my "graphs only" and "lightweight" goals right away):

• D3.js
• Can do lots of things, including tons of animations.
• Centers around reorganizing DOM access, i.e. does way more than what I like and violates "graphs only" and "lightweight" goals just as much as jQuery/flot.

Chart.js

This one is lightweight and graph-only.

Examples do not have dynamic tooltips but a number of animations that are only distracting from the actual graph data.

RGraph

Dynamic tooltips in the examples are a bit sluggish.

Supports feeding JSON to it directly.

dygraphs

Has interactive zoom etc. by default, supports annotations for specific points.

Has somewhat of a list of dependencies (all open).

Only supports CSV or JS Array data.

So none of those turned out to be completely ideal in the light of my goals/preferences. That said, dygraphs looked decent enough so I went with that in the end and have dynamic versions of my graphs implemented.
(Ping me on IRC if you want a link, I don't want to link them on the blog as the uninformed could come to wrong or hasty conclusions looking at the data).

Of course, if you are looking for a graphs library for your project, you might chose completely differently, but maybe the list is helpful to find what fits your needs.