ColdFusion 10 CFCHART, how to pass dynamic variables via JavaScript API method?

Question

I am using the cfchart tag in ColdFusion 10 (zingcharts). The page containing the chart is receiving data via websocket and I am trying to pass some of this data to the chart at regular intervals with JavaScript, using:

var x = data.number;
var handle = ColdFusion.Chart.getChartHandle();
handle.exec('mychart', 'appendseriesvalues', '{"plotindex": 0, "values": [x]}');

The above code works fine if I enter an actual number instead of x, for example "values": [1.1] works fine. However if I try and pass in a number by way of a dynamic variable, it does not work and throws this error:

SyntaxError: JSON.parse: unexpected character

I was wondering if anyone knows how to accomplish this?

Answer 1

You're passing a JSON string to handle.exec, which is turned into a JS object in a different place to where your x variable is defined, and thus causing the error.

Instead, let x be resolved as part of the string and it should work:

handle.exec( ... , '{"plotindex": 0, "values": ['+x+']}');

Answer 2

Following on from @PeterBoughton's answer/comment, the ZingCharts API is really well documented. So, yes, you can pass an object rather than a JSON representation of one (based on the code example on that page). That would be a preferable approach.

Having messed around with <cfchart> and ZingCharts directly... I find it's much easier to do the latter, and remove <cfchart> from the equation altogether. There's little gain in becoming an expert in <cfchart> (it's not a marketable skill), whereas being comfortable using Javascript libraries directly (if not specifically ZingCharts) is a better tool to have in one's belt.