Sunday, July 10, 2016

Playing Around with Visuals: CanvasJS & FusionCharts

I was off from work this past week (and sick and recovering from a sprained ankle), so I've had lots of time to sit in front of the computer and try new things. I usually use CanvasJS for charting, but it has some limitations that bug me. I've looked into other charting packages, but always end up coming back to CanvasJS.  In the embedded below, I show the input bandwidth chart for my HA server using CanvasJS.  One thing you'll notice is the spike that dominates the chart. CanvasJS doesn't support log scale so you end up with large spikes drowning out the rest of the bars.  People have been asking for this feature for years but it's not in their roadmap.  Also, CanvasJS does automatic time/date labeling on the X-axis. There are 3-4 different days in the chart, only the times are shown. It would be nice if it would show the dates too, but apparently only does so when there are even more days of data.  It does have a nice zoom feature, which works great because I usually store a year's worth of data in MySQL.

FusionCharts promised log scales, for line and bar charts, and you can see that at the end of the clip.  Unfortunately, the X-axis doesn't auto-format for dates. My data is stored in MySQL by UNIX timestamp which means for every bit of data, I convert the timestamp in PHP before sending it over to chart. Log scale is nice, but there isn't any zoom/pan ability for these type of charts.  Apparently, only some line and bar charts with linear scales have zooming.

I didn't have any chance to pretty up the FusionChart, but I have to say, in spite of the log scale feature, I much prefer CanvasJS.  I also did some work with D3 but I'll save that for another post.

No comments:

Post a Comment