muellertj
asked on
cfchart issue with html
I have an html chart that will not show numeric cfchartdata items from a query . When I change the format to flash it works but then my plot rules don't work. If I change the item to a non-numeric value it works fine.
<cfchart chartheight="350" chartwidth="540" format="html" xaxistitle="Paddock Number or Name" yaxistitle="#ytitle#" showlegend="no" showmarkers="no" plot="#plot#" style="../chartlayout/chart">
<cfchartseries
query="chartdata"
type="bar"
valuecolumn="drymatter"
itemcolumn="paddock" >
</cfchartseries>
<cfchartseries type="line" seriescolor="blue">
<CFLOOP query="target">
<cfset targetvalue=(M*row)+#optmax#>
<cfchartdata item="#paddock#" value="#TargetValue#">
<cfset row=row+1>
</cfloop>
</cfchartseries>
</cfchart>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I think I may just add a (- ) to each label and let it serve as a tick mark. Not the best solution but it will suffice.
Hate to say it, but for the moment yes. As long as the result is not something that CF can still coerce into a numeric value, it should work. You might want to file a bug report as well.
Unfortunately this is one of those cases that illustrates why the CF UI components tend to be simpler to use in basic scenarios, but often end up being harder to work with in the long run. The CF tags typically "wrap" a 3rd party library: in this case ZingCharts. The wrappers make them easier to use initially, but end up being more difficult down the road because CF doesn't always allow you to modify how it interacts with the library (which is the problem here). Also, CF usually doesn't expose attributes for all of the underlying options, or allow you to update the libraries, making it a lot harder when you want to customize the behavior. Whereas if you use the library directly, you have full control and can customize to your heart's content. Granted, it is more set up initially, both in terms of code an learning, but offers the most flexibility in the long term.
Unfortunately this is one of those cases that illustrates why the CF UI components tend to be simpler to use in basic scenarios, but often end up being harder to work with in the long run. The CF tags typically "wrap" a 3rd party library: in this case ZingCharts. The wrappers make them easier to use initially, but end up being more difficult down the road because CF doesn't always allow you to modify how it interacts with the library (which is the problem here). Also, CF usually doesn't expose attributes for all of the underlying options, or allow you to update the libraries, making it a lot harder when you want to customize the behavior. Whereas if you use the library directly, you have full control and can customize to your heart's content. Granted, it is more set up initially, both in terms of code an learning, but offers the most flexibility in the long term.
One last comment....
The more and more you look at it, prepending a character is the only option (though agreed it is not ideal). The ideal option is to modify the JSON (which CF doesn't allow AFAIK). The second best is to modify the labels after the fact in JS:
The problem is it must be timed right. If it's done before the chart is fully loaded, it won't work because the chart object may not exist yet. AFAIK CF doesn't expose any methods to tap into the "load" event of the chart. It only offers AjaxOnLoad and/or $(document).ready which won't work because they refer to the document, and the chart is rendered after the document loads.
This is a bug IMO, and prepending an extra is the only workaround AFAIK.
The more and more you look at it, prepending a character is the only option (though agreed it is not ideal). The ideal option is to modify the JSON (which CF doesn't allow AFAIK). The second best is to modify the labels after the fact in JS:
// get current scale-X labels
var scaleX = ColdFusion.Chart.getChartHandle().exec('myChartID','getobjectinfo', { object : 'scale', name : 'scale-x' });
// prepend a string to force them to be treated as strings
for (var index in scaleX.values) {
scaleX.values[index] = " "+ scaleX.values[index].toString();
}
// refresh the chart data with modified values
ColdFusion.Chart.getChartHandle().exec('myChartID', 'modify', {data : {"scale-x":{ "values": scaleX.values} }});
The problem is it must be timed right. If it's done before the chart is fully loaded, it won't work because the chart object may not exist yet. AFAIK CF doesn't expose any methods to tap into the "load" event of the chart. It only offers AjaxOnLoad and/or $(document).ready which won't work because they refer to the document, and the chart is rendered after the document loads.
This is a bug IMO, and prepending an extra is the only workaround AFAIK.
@muellertj - "B" grades are usually given for answers that are incomplete or lacking in details, rather than whether or not "X" or "Y" is possible. While it's not what anyone wants to hear, sometimes the correct answer is "it's not possible". That's the case here IMO. I totally agree the work-around is far from ideal. However, the issue is caused by a bug in CF and AFAIK there isn't a cleaner, simpler workaround. It's a bug in the internal CF code. Unfortunately that's something that can only be fixed by Adobe.
Most of us try and provide complete answers. So "B" grades are usually interpreted as an indication that we didn't do a thorough job. (I don't think that's the case here, but if it is I'd be happy to answer any further questions). No need to change anything now. Just mentioning it for future reference :)
Most of us try and provide complete answers. So "B" grades are usually interpreted as an indication that we didn't do a thorough job. (I don't think that's the case here, but if it is I'd be happy to answer any further questions). No need to change anything now. Just mentioning it for future reference :)
Unfortunately it doesn't seem to apply to the JSON generated for cfcharts. I tested it with both a db and manual query using a VARCHAR column, but in both cases it handles the 5 as a number, not a string.