3

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?

James A Mohler
  • 11,060
  • 15
  • 46
  • 72
froadie
  • 79,995
  • 75
  • 166
  • 235
  • 1
    I'd use ZingCharts. But not via `` – Adam Cameron Dec 24 '13 at 11:11
  • @AdamCameron - why? And how? :) – froadie Dec 25 '13 at 08:53
  • 1
    Because ZingCharts is very easy to use, and `` 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 `` generates to do same, and copy it. – Adam Cameron Dec 25 '13 at 10:25
  • @AdamCameron - why do you say it wasn't relevant for you? (just curiosity) – froadie Dec 25 '13 at 10:40
  • 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: http://cfmlblog.adamcameron.me/2012/09/survey-results-importance-of-backwards.html). With a licence, one doesn't get that. – Adam Cameron Dec 25 '13 at 19:20
  • @AdamCameron - thanks, I think I'll follow your suggestion. Accessing the cf license was simple. And thanks for your blog in general, CF documentation leaves a lot to be desired and it's come in handy many times :) – froadie Dec 26 '13 at 10:00
  • You couldn't do me a favour and post the code for including the licence? I'll blog about it (that said, I've not googled to see if anyone else already has done so!) – Adam Cameron Dec 26 '13 at 10:34
  • @AdamCameron - This is what worked for me: `` . (I didn't find anything by googling, but may not be searching well :) ) – froadie Dec 26 '13 at 10:48
  • @AdamCameron - and once we're at it, do you have any pointers to which features of zingchart would help me create the above interactivity? – froadie Dec 26 '13 at 10:49
  • It's too broad a question for Stack Overflow. You're basically asking "how do I build a UI?". You'll need to break it down into separate bits of work (from your perspective) and separate questions (when you get stuck). If you don't know how to manipulate data and all code from JS based on user input, that's the first thing you need to learn. That's the scope of a tutorial website, not a Q&A one like StackOverflow. – Adam Cameron Dec 26 '13 at 11:28

1 Answers1

3

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>

James A Mohler
  • 11,060
  • 15
  • 46
  • 72
  • Any reason to use highcharts over using zingcharts directly, as @AdamCameron suggested? (Zingcharts has a license through ColdFusion, and it seems for HighCharts we'd need to purchase one) – froadie Dec 26 '13 at 09:59
  • There are so many charting solutions out there. I would have a hard time recommending one over another, and in the end, it would be only an opinion. But if the question is "Should `` be used? " Then I can say, no it shouldn't. – James A Mohler Dec 26 '13 at 17:18