Link to home
Start Free TrialLog in
Avatar of muellertj
muellertj

asked on

cfchart issue with html

I have an html chart that will not show numeric cfchartdata items from a query User generated image User generated image.   When I change the format to flash it works User generated image but then my plot rules don't work.  If I change the item to a non-numeric value it works fine. User generated image
<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>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of _agx_
_agx_
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Still looking into this.  CF is just too smart by half...  Though there've been some improvements in CF11 for SerializeJSON relating to data types:

The ColdFusion language is typeless and does not evaluate or preserve the type information at the time of code generation. At runtime, ColdFusion tries to make its best guess to determine the datatype, which may cause some unexpected behavior. For example, at the time of JSON serialization, ColdFusion attempts at converting a string to a number. If the attempt is successful, then the passed data type is treated as number irrespective of whether you wanted it to be a string or not.

Starting from ColdFusion 11, the data type is preserved during the code execution time for Query and CFCs.

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.
Avatar of muellertj
muellertj

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.
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:

		//  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} }});	

Open in new window


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 :)