Interactive chart - Coldfusion or jQuery?

3
votes

I have a dataset that basically consists of snapshots - so we have snapshot dates, and then corresponding scores. These snapshots currently go back about 3 years, and a new one is added each month. We'd like to make an interactive (line) chart that will give the user as much flexibility as possible - so it would default to a line chart of the past 6 month "snapshot" scores. Then the user would have the ability to:

  1. Change the amount of points on the graph - show 6 points, 12 points, etc
  2. Move back/forward in time - we visualize this as arrows to the right and left of the chart that enable the user to move in increments of what is currently shown on the graph (6 points by default, but whatever the user has set it to - see 1.)
  3. Change the "increments" - user should be able to choose between monthly, quarterly, semi-annually - and it will then display the snapshot for each month, every third month, or every 6th month

We would also like to offer the user the option to take a "snapshot" of the graph at any point and email it to themselves.

I've been researching and playing around with different charting tools such as flot, highcharts, etc. I'm also considering using cfchart (this is a coldfusion-based site), especially since with CF10 it's based on ZingChart and has a lot of flexibility. In general we try to avoid using ColdFusion's ui tools and opt for jQuery instead (http://forta.com/blog/index.cfm/2012/11/25/When-Using-ColdFusion-No-Longer-Makes-Sense), but in this case it may make more sense to use CF10's charts (especially since the data will be queried in CF, and cfcharts have built-in support for the data).

Which tool can accomplish all this functionality easily and flexibly? Should I go with CF10 charts or use a jQuery charting tool? How can I set up a chart with all this interactivity?

1
jquerycoldfusionchartsinteractivecfchart
I'd use ZingCharts. But not via <cfchart> – Adam Cameron
@AdamCameron - why? And how? :) – froadie
Because ZingCharts is very easy to use, and <cfchart> really doesn't bring anything to the mix other than forcing you to implement client-side code on the server. As for "how"... ZingCharts is very well documented, and its basically set an object with some settings, and then pass it to a function to render the chart (from memory). One challenge that wasn't relevant for me is that CF gives you a licence for ZingCharts... you'll need to work out how to let your own ZingCharts code use that licence. This should be a matter of seeing the code <cfchart> generates to do same, and copy it. – Adam Cameron
@AdamCameron - why do you say it wasn't relevant for you? (just curiosity) – froadie
It was just for my blog so I didn't care that it displays a little "Zing Charts" label at the bottom of the chart (eg: cfmlblog.adamcameron.me/2012/09/…). With a licence, one doesn't get that. – Adam Cameron

1 Answers

3
votes

I recently had to make a similar choice on charting engines.

Pros for <cfchart>

  • It can make an image with can be embedded into an email.

Pros for a jQuery something

  • ColdFusion updates happen very slowly compared to jQuery. We can get updates much faster by decoupling the charting engine from ColdFusion

  • ColdFusion offers only a small subset of functionality of the charting engine we were considering

  • We have been burned on <cfform>.

  • And the extJS powered ColdFusion tags

As a result, we chose a two part solution.

  1. Highcharts

  2. jQuery HighchartsTable plugin Visit Site

Highcharts is extremely flexible. jQuery HighchartsTable plugin makes it easy to do quick and dirty charts, which is what we would have wanted from <cfchart>