CFMX graphing using cfchart

Greetings,

I'm trying to create a graph with two different chart series over top of each other. The problem that I'm running into is that each chart series is unrelated to the other. The only thing they have in common is the ranges of the x and y data. In this case, the x's fall in between 20 and 100 and y's fall in between 70.000 and 390.000.

Here's a sample of my data:

Series 1 (x,y)
----------
25, 99.357
31, 123.697
43, 163.415
52, 194.176
74, 314.805
87, 366.572

Series 2 (x,y)
----------
20, 74.311
25, 93.765
30, 113.589
35, 133.794
40, 154.391
45, 175.391
50, 196.807
55, 218.652
60, 240.937
65, 263.676
70, 286.884
75, 310.576
80, 334.765
85, 359.469
90, 384.704

What I'm finding is that Cold Fusion will actually display the series side-by-side instead of overlapping. It SEEMS that unless the "item" attribute of the <cfchartdata> tags line up in the different series, then the graph won't display the series as overlapping, but rather side by side.

Here is the code I'm using...
<cfchart>
<cfchartseries type="scatter">
<cfchartdata item="25" value="99.357">
<cfchartdata item="31" value="123.697">
<cfchartdata item="43" value="163.415">
<cfchartdata item="52" value="194.176">
<cfchartdata item="74" value="314.805">
<cfchartdata item="87" value="366.572">
</cfchartseries>

<cfchartseries type="curve">
<cfloop index="i" from="20" to="90" step="5">
<cfchartdata item="#i#" value="#i / ( 0.27919 + ( -0.0005027 * i ) )#">
</cfloop>
</cfchartseries>
</cfchart>


Any and all help is appreciated. I can't imagine that I'm asking for a lot here, it seems pretty straight forward.

--Ryan

I think your data is messing with the graphing engine because the 2 data sets do not have similar x-axis values. If you tried to graph larger data sets with differing x-axis values the graph's labels would get crowded fast. So the engine is displaying them as separate graphs. If possible, try making the x-axis values the same in the 2 data sets, like this (you can get cf_querysim from www.halhelms.com for free):

<cf_querysim>
series1
item,value
25|99.357
31|123.697
43|163.415
52|194.176
74|314.805
87|366.572
</cf_querysim>
<cf_querysim>
series2
item,value
25|89.357
31|113.697
43|143.415
52|174.176
74|384.805
87|326.572
</cf_querysim>

<cfchart format="flash" scalefrom="0" scaleto="400" seriesplacement="cluster" labelformat="number" tipstyle="mouseOver" pieslicestyle="sliced">
<cfchartseries type="line" query="series1" itemcolumn="item" valuecolumn="value" serieslabel="Series 1"/>
<cfchartseries type="line" query="series2" itemcolumn="item" valuecolumn="value" serieslabel="Series 2"/>
</cfchart>

Thanks!

Not the answer I was looking for, but it is an answer. I can't do any data interpolation or I risk misleading the user.

While I find that I can't do what I want using CFMX natively, I have found a few graphing servers that will do the trick nicely.

http://www.corda.com/
http://demo.visualmining.com/index.jsp

Also, if you need to do something similar in PHP, I HIGHLY recommend this package:

http://www.aditus.nu/jpgraph/index.php

Thanks again!
--Ryan

Hi Ryan !
Incase you are still interested I managed to solve the problem...with a little help from an angel in Macromedia called Anne.

She suggested that I use the sortXaxis attribute and set it to true i.e. sortXAxis="yes" and that did the trick.

Also make sure that the 'xaxistype' and 'yaxistype' attributes are set to "scale" which allows the graphing engine to sort the x axis taking the values as numeric quantities.

Regards
Harkirat

Heya,

Thanks for posting your solution. The question was posted ages ago, but hopefully someone will find your response helpful. FYI, we ended up buying Corda's PopCharts. We needed some pretty advanced functionality that just wasn't possible within CFMX and we found it with PopCharts.

--Ryan