I just finished the Flare shockwave that will replace stuff I previously made with jFlot. As you might know, I had to replace the processingjs linkmap with the Flare original due to performance issues with processingjs specifically and canvas + JS in general.

I had already implemented some simple time series graphs with jFlot but it just didn’t make sense having separate solutions, especially after looking at Flare more in depth and realizing that it just kicks ass. Yeah so be it, if using a proprietary solution will get the results I’m looking for then I’ll use it.

The following is a combination of the tutorial code and the timeline demo, enjoy:

This is a special section. We will get data that has a daily resolution but then we convert it to have weekly resolution instead (I currently believe that it will result in a cleaner and more meaningful graph in the final implementation).

Pay attention specifically to the json.map call there, we use a callback to round the timestamps to the current week. After that we loop through each item and sum all items which are in the same week. Finally we use the summed data to actually create the nodes and edges.

Note that the array called json above will be imported as a json string of course, in the final implementation.

What’s left for next time is adding legends, setting the colors of the graphs explicitly and maybe some interactivity.