Ok, maybe not ever, but interesting nonetheless. A few days ago a reader pinged me to ask about gauge charts. Those are charts that act like speedometers. I knew it wasn't supported by ColdFusion out of the box, but I recommended he take a look at the WebCharts design tool that ships with ColdFusion. When I did so - I saw right off the bat that it was supported, and there were quite a few of them.
I generated my style xml, passed it to the CFCHART, and promptly got an error about gauge charts not being supported. Darn. I was as frustrated as Britney Spears in a library.
Yesterday the topic of CFCHART came up again, this time on the CFAUSSIE mail list. When I made the same point there, a user named Simon Haddan shared an interesting fact. You can actually use Java to speak directly to the WebCharts engine embedded in ColdFusion. (Christopher Wigginton blogged on this as well back in 2005.) Essentially, you can use the WebChart's designed to create a WCP file, which is just an XML file. You can then grab the relevant bits out and speak directly to WebCharts. And guess what? No limits. Not as far as I can tell. I made this lovely PNG gauge below. (And yes, SWF is supported too.)
The code is a bit complex, and involves some string manipulation, but could be made easier if someone felt like creating a nice CFC for it. Here is the code, and remember credit goes to Simon and Christopher:
2 <cfset sChartStyle = fileRead(expandPath("./raygauge.wcp"))>
3
4 <!--- Get the frameChart component --->
5 <cfset iStart = findNoCase("<gauge",sChartStyle)>
6 <cfset iEnd = findNoCase("</gauge>",sChartStyle)>
7 <cfsavecontent variable="chartStyle">
8 <cfoutput><?xml version="1.0" encoding="UTF-8"?>
9 #mid(sChartStyle,iStart,iEnd-iStart+13)#
10 </cfoutput>
11 </cfsavecontent>
12
13 <cfsavecontent variable="chartModel"><?xml version="1.0" encoding="UTF-8"?>
14 <XML type="default">
15 <COL>2000</COL>
16 <ROW col0="88.0">Sample 0:</ROW>
17 </XML></cfsavecontent>
18
19 <cfscript>
20 oMyWebChart = createObject("Java","com.gp.api.jsp.MxServerComponent");
21 oMyApp = getPageContext().getServletContext();
22 oSvr = oMyWebChart.getDefaultInstance(oMyApp);
23 oMyChart2 = oSvr.newImageSpec();
24 oMyChart2.width = 375;
25 oMyChart2.height= 375;
26 oMyChart2.type = "png";
27 oMyChart2.style = "#chartStyle#";
28 oMyChart2.model = "#chartModel#";
29 </cfscript>
30 <!--- Create html tag set --->
31 <cfsavecontent variable="chartImgTag">
32 <cfoutput>#oSvr.getImageTag(oMyChart2,"http://192.168.1.108/CFIDE/GraphData.cfm?graphCache=wc50&graphID=")#</cfoutput>
33 </cfsavecontent>
34 <!--- Good old Webcharts loves to add an extra /Images/ to the URL --->
35 <cfset chartImgTag = replace(chartImgTag,"http://192.168.1.108/Images/","http://localhost/","All")>
36
37 <cfoutput>
38 #htmlEditFormat(chartimgtag)#
39 <p>
40 #chartimgtag#
41 </cfoutput>
Comment 1 written by Joey Krabacher on 18 January 2008, at 4:25 PM
Comment 2 written by Raymond Camden on 18 January 2008, at 4:27 PM
Comment 3 written by Peter J. Farrell on 18 January 2008, at 4:44 PM
We use custom CFC API (that we built) for charting on GreatBizTools.com to create all the charts that WebCharts3D supports. There are a bunch of helper java classes for data manipulation and style changes. However I won't get into that here as it's mess to work with directly.
An example chart which is similar to yours is here:
http://coldfusionweekly.com/images/1-2/cfw_1-2_cha...
Comment 4 written by SigEpJedi on 18 January 2008, at 4:48 PM
These are not the Droids you are looking for....
Comment 5 written by Peter J. Farrell on 18 January 2008, at 4:51 PM
Comment 6 written by Rick O on 18 January 2008, at 5:42 PM
Comment 7 written by Alan McCollough on 18 January 2008, at 6:52 PM
Got to get our copies of CF8 installed...
Comment 8 written by Peter J. Farrell on 18 January 2008, at 8:13 PM
Comment 9 written by Justice on 21 January 2008, at 7:03 AM
http://www.cfcode.net/index.cfm/2007/10/16/Web-Cha...
Comment 10 written by Raymond Camden on 21 January 2008, at 7:11 AM
@Peter: Sorry I missed your earlier posts!
Comment 11 written by Justice on 21 January 2008, at 1:02 PM
Sorry bud, thats what I get for reading too quick =)
Comment 12 written by randy on 22 January 2008, at 10:04 AM
When we (three of us now) open webcharts.bat in CF8, all the text is binary zero characters. Totally unreadable.
Comment 13 written by J. Lyle Martin on 9 July 2008, at 11:45 AM
When I try to run this example, with my own (non modified) gauge .wcp file I get the following text and no graph. What am I doing wrong, or missing?
<!-- WebCharts3D v5.1(2077) --> <IMG SRC="http://192.168.1.108/CFIDE/GraphData.cfm?graphCach...; id="Images_3607960040100155_png" name="Images_3607960040100155_png" usemap="#Images_3607960040100155_png_map" border="0"/> <table cellpadding='0' cellspacing='1' style='visibility: hidden;display: none; position:absolute;font-family: Arial;font-size: 13px; font-weight:700;background:#FFFF00;foreground:#0000FF;color:#0000FF;-moz-opacity:.50;-opacity:.50;filter:alpha(opacity=50);border:1px solid #0000FF;' name='GP1215621759443AAAB' id='GP1215621759443AAAB'><tr><td width='8'> </td></table> <MAP name='Images_3607960040100155_png_map'> <AREA shape='rect' coords='0,0,1,1'/> <AREA shape="poly" coords="293,133,191,194,183,180,289,126"/> </MAP> <script language="javascript" src="http://192.168.1.108/CFIDE/GraphData.cfm?graphCach...;
Thanks so much!
-Lyle
Comment 14 written by Raymond Camden on 9 July 2008, at 12:41 PM
Comment 15 written by Larry on 18 July 2008, at 12:26 PM
I had a similar (the same?) issue. Most of the text visible was showing a square instead of the character. Numbers showed up ok. Called up Gpoint and was told to reload the java virtual machine. This did not work. Found out by accident that if instead of running webcharts.bat you find and doubleclick C:\ColdFusion8\lib\wc50.jar all appears to work ok.
Comment 16 written by adam on 25 July 2008, at 4:10 PM
Thanks,
Adam
Comment 17 written by J. Lyle Martin on 25 July 2008, at 4:18 PM
Hope that helps.
-Lyle
Comment 18 written by adam on 25 July 2008, at 4:24 PM
But maybe there's something wrong in the server settings. I just thought since I haven't seen the behavior in any other charts it might be related to this specifically. So I was wondering if anyone knew for sure that the watermark shouldn't be there.
Thanks again,
Adam
Comment 19 written by Raymond Camden on 28 July 2008, at 7:55 PM
Comment 20 written by Rodell Basalo on 10 September 2008, at 1:16 AM
Hope that helps.
-Lyle
# Posted By J. Lyle Martin | 7/25/08 4:18 PM "
have you tried editing the watermark.png under \lib ?
i removed the text in the png and saved and overwrited the file without the Watermark text
Comment 21 written by Reed Powell on 29 October 2008, at 1:38 PM
Comment 22 written by Justin Cook on 16 June 2009, at 11:19 AM
Comment 23 written by Raymond Camden on 16 June 2009, at 11:20 AM
Comment 24 written by Justin Cook on 16 June 2009, at 1:46 PM
We have a Load Balancing situation though and if we create the chart, the page just shows an area that says that the chart expired. So typically, we have been writing charts to a file and then calling them back out immediately from a place where we wrote the chart to. Is it possible to write this chart to a file so that we can call it back out that way? Rather than serving it up live from the CF Server and the cache that it creates.
Comment 25 written by Raymond Camden on 17 June 2009, at 6:44 AM
Comment 26 written by Justin Cook on 17 June 2009, at 8:50 AM
<!--- initialize chart settings --->
<cfscript>
oMyWebChart = createObject("Java","com.gp.api.jsp.MxServerComponent"); oMyApp = getPageContext().getServletContext(); oSvr = oMyWebChart.getDefaultInstance(oMyApp); oMyChart2 = oSvr.newImageSpec();
oMyChart2.width = 400; oMyChart2.height= 300; oMyChart2.type = "swf"; oMyChart2.style = "#chartStyle#"; oMyChart2.model = "#chartModel#";
</cfscript><!--- Create html tag set --->
<cfsavecontent variable="chartImgTag">
<cfoutput>#oSvr.getImageTag(oMyChart2,"http://ourwebsite.com/CFIDE/GraphData.cfm?graphCac...;)#</cfoutput>
</cfsavecontent><!--- Good old Webcharts loves to add an extra /Images/ to the URL --->
<cfset chartImgTag = replace(chartImgTag,"http://ourwebsite.com/Images/","http://o...;)>
<cfoutput>
<p>
#chartimgtag#
</cfoutput>
<cfset listpos=listcontains(chartImgTag, "graphID", "=")><cfset listpos=listpos+1>
<cfset chartID=listgetat(chartImgTag,listpos,"=")>
<cfset chartID=listgetat(chartID,2,"/")><cfset chartID=replace(chartID, '"', '')>
<br>
<cfhttp url="http://ourwebsite.com/CFIDE/GraphData.cfm?graphCac...; getasbinary="yes">
<cffile action="write" file="#local_path#charts\untitled11.swf" output="#cfhttp.filecontent#">
Comment 27 written by Red on 26 January 2010, at 5:13 PM
I hope this make sense and is clear…
Red
Comment 28 written by Raymond Camden on 26 January 2010, at 5:19 PM
http://www.coldfusionjedi.com/index.cfm/2010/1/25/...
for an example.
Comment 29 written by Red on 27 January 2010, at 9:23 AM
That'd be too easy. :) I'm not using the cfchart tag though. I'm using the java api to create the chart for me. My code is very similar to yours except for a guage graph, I'm using the line graph (actually, four lines graphs on chart).
The image you have for the guage is named, dial.png. I'm assuming for the purpose of the post, you hard coded the image name to be dial.png. But if you didnt' hard code that and left it with the temp name CF would have created. Is there a way to find out that name?
Comment 30 written by Raymond Camden on 27 January 2010, at 9:38 AM
[Add Comment] [Subscribe to Comments]