saving cfchart output for use in static site

[wmohns]

I need to generate a small static website comprised of graphs (generated with cfchart). The content for the pages will only update every couple of months when we get new data, so I'd like to setup a coldfusion page that I can run every time we get new data. For the moment the site has to be static (long story).

This is pretty straightforward using cfsavecontent and cffile="write" (and looping over some queries) with one exception. What I cannot figure out how to do is to can the charts WITH the tips that display the values of points on the graph on mouseover.

So my question is: is there a way to do this with the Tips?

I can of course run cfchart with the name parameter and then write the chart to a file, and that works, but then I don't have the tips. If I try to generate the chart with tips (and save the code using cfsavecontent), then the tips reference a temporary cached version of the chart image file and I don't see anyway to control what image file they reference.

Any thoughts?

[editcorp]

Can you simply cfcache the page?

Regards,
Michael
--

[wmohns]

quote:

---

Originally posted by: editcorp
Can you simply cfcache the page?

Regards,
Michael
--

---

Thank you for the response, but I'm not sure that cfcache would work in this case (or at least not work better than cfsavecontent/cffile) for two reasons:

1) The site will be created on a server running Coldfusion, but ultimately hosted on a server that is not (thus my need to create a static site);

2) I want to create a single page that I can run to generate all of my pages that contain graphs (through looping over queries), so I'm not sure where cfcache would fit into this.

[Newsgroup_User]

when you use name='somename' attribute in cfchart and then save the file
with cffile as .swf (flash) file, all your tips will be preserved.

you can then easily include these .swf files into your static pages...

Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/

[BKBK]

Wmohns wrote:
I need to generate a small static website comprised of graphs (generated with cfchart). ... This is pretty straightforward using cfsavecontent and cffile="write"

Everything makes sense to me, except the use of cfsavecontent. I don't see the need. Besides that, you seem to have already done what Azadi suggests.

I would suggest the following:

1) Save your flash chart separately from other content. As you already know, it goes like this

<cfchart format="flash" name="myChart">
</cfchart>

<cffile
action="WRITE"
file="c:\coldfusion8\wwwroot\charts\myFlashChart.swf"
output="#myChart#">

This assumes the directory c:\coldfusion8\wwwroot\charts\ exists.

2) Display the saved chart using the object tag, thus

<OBJECT
codebase=" http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
WIDTH="550"
HEIGHT="400"
id="myMovieName">
<PARAM NAME="movie" VALUE="myFlashChart.swf">
<PARAM NAME="quality" VALUE="high">
<PARAM NAME="bgcolor" VALUE="#FFFFFF">
<EMBED src="c:\coldfusion8\wwwroot\charts\myFlashChart.swf"
quality="high"
bgcolor="#FFFFFF"
WIDTH="550"
HEIGHT="400"
NAME="myMovieName"
ALIGN=""
TYPE="application/x-shockwave-flash"
PLUGINSPAGE=" http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

[wmohns]

My bad. I forgot to mention one other important restriction that I am faced with: I am not allowed to use flash.

So I am generating the charts as PNG files, and using the cfsavecontent to save all of the other html surrounding the chart, including the code that provides the Tips. Thank you very much for the quick responses.

Any more thoughts?

[BKBK]

Wmohns wrote:
Any more thoughts?

Yes, I just had one.

createSalaryChart.cfm
==================
<h2>Employee Salary Analysis</h2>
<cfchart format="png" xaxistitle="Department" yaxistitle="Salary Average">
<!--- etc --->
</cfchart>

displaySalaryChart.cfm
==================
<cfhttp method="GET" url=" http://127.0.0.1:8500/createSalaryChart.cfm"></cfhttp>
<cfoutput>#cfhttp.filecontent#</cfoutput>

[BKBK]

Yet another thought, much lighter on the server than the last one. I took your hint on cfsavecontent and did this:

<cfsavecontent variable="salaryChart">
<h2>Employee Salary Analysis</h2>
<cfchart format="png" xaxistitle="Department" yaxistitle="Salary Average">
<!--- etc --->
</cfchart>
</cfsavecontent>

<cfoutput>#salaryChart#</cfoutput>

It seems to work. (I am on CF8)

[wmohns]

quote:

---

Originally posted by: BKBK
Yet another thought, much lighter on the server than the last one. I took your hint on cfsavecontent and did this:

<cfsavecontent variable="salaryChart">
<h2>Employee Salary Analysis</h2>
<cfchart format="png" xaxistitle="Department" yaxistitle="Salary Average">
<!--- etc --->
</cfchart>
</cfsavecontent>

<cfoutput>#salaryChart#</cfoutput>

It seems to work. (I am on CF8)

---

I'm working on CF8 as well, and this is the approach that I first tried. The problem is that the resulting code relies on a temporary cached chart image, and so it doesn't lend itself to being stored for use in a static site. I am coming to the conclusion that I will just have to generate my site without the tips that display the value points on the graph (since that is what is presenting the difficulty). Thank you very much for your time on this!

[-__cfSearching__-]

wmohns wrote:
I'm working on CF8 as well, and this is the approach that I first tried. The problem is that the resulting code relies on a temporary cached chart image, and so it doesn't lend itself to being stored for use in a static site.

I have not verified it, but I suspect it may be possible using the webcharts3d tools. However, IIRC using png's would require saving the image and the generated javascript as well. All in all it is probably not as simple as your current approach. So assuming it is possible, and there no licensing issues using the webcharts in that manner, you may still decide to forgo the tooltips.

[Guest]

Curious about the page being static... Now I'm not sure how people set these up, but you can have one server as a sub-domain of the other, at which point you could make an ajax call across the two.

[BKBK]

Hi Wmohns,

We should be able to hack this one. Hell, we're on CF8.

Here are some more ideas. In the first sample, it helps to note that your caching problem is with the chart-style that generates the tips, not with the PNG file.

Take the chart example in the livedocs. I have attached the code below for your convenience. It makes use of the built-in datasource, cfdocexamples. So you can run it directly. I added the cfsavecontent tag and the htmlEditFormat function to display the HTML styling that Coldfusion applies to the chart. You should get something like the following

<h1>Employee Salary Analysis</h1>
<IMG SRC="/CFIDE/GraphData.cfm?graphCache=wc50&graphID=Images/4336043540100030.PNG" id="Images_4336043540100030_PNG" name="Images_4336043540100030_PNG" usemap="#Images_4336043540100030_PNG_map" border="0"/>
<table cellpadding='0' cellspacing='1' style='visibility: hidden;display: none; position:absolute;font-family: Dialog;font-size: 11px;background:#FFFFFF;foreground:#333333;border:1px solid #333333;' name='GP1207743590498AAAB' id='GP1207743590498AAAB'><tr><td width='87'>Department</td><td width='54'>Facilities</td></tr><tr><td width='87'>Salary Average</td><td width='54'>35,000</td></tr></table> <table cellpadding='0' cellspacing='1' style='visibility: hidden;display: none; position:absolute;font-family: Dialog;font-size: 11px;background:#FFFFFF;foreground:#333333;border:1px solid #333333;' name='GP1207743590498AAAC' id='GP1207743590498AAAC'><tr><td width='87'>Department</td><td width='46'>HR</td></tr><tr><td width='87'>Salary Average</td><td width='46'>66,000</td></tr></table> <table cellpadding='0' cellspacing='1' style='visibility: hidden;display: none; position:absolute;font-family: Dialog;font-size: 11px;background:#FFFFFF;foreground:#333333;border:1px solid #333333;' name='GP1207743590498AAAD' id='GP1207743590498AAAD'><tr><td width='87'>Department</td><td width='61'>Marketing</td></tr><tr><td width='87'>Salary Average</td><td width='61'>70,000</td></tr></table> <table cellpadding='0' cellspacing='1' style='visibility: hidden;display: none; position:absolute;font-family: Dialog;font-size: 11px;background:#FFFFFF;foreground:#333333;border:1px solid #333333;' name='GP1207743590498AAAE' id='GP1207743590498AAAE'><tr><td width='87'>Department</td><td width='46'>Sales</td></tr><tr><td width='87'>Salary Average</td><td width='46'>55,000</td></tr></table> <table cellpadding='0' cellspacing='1' style='visibility: hidden;display: none; position:absolute;font-family: Dialog;font-size: 11px;background:#FFFFFF;foreground:#333333;border:1px solid #333333;' name='GP1207743590498AAAF' id='GP1207743590498AAAF'><tr><td width='87'>Department</td><td width='53'>Training</td></tr><tr><td width='87'>Salary Average</td><td width='53'>86,000</td></tr></table>

<MAP name='Images_4336043540100030_PNG_map'> <AREA shape='rect' coords='0,0,1,1'/> <AREA shape="rect" coords="269,21,309,199" onMouseover='xx_set_visible("GP1207743590498AAAF",event,true)' onMouseout='xx_set_visible("GP1207743590498AAAF",event,false)' onMousemove='xx_move_tag("GP1207743590498AAAF",event)'/> <AREA shape="rect" coords="219,85,259,199" onMouseover='xx_set_visible("GP1207743590498AAAE",event,true)' onMouseout='xx_set_visible("GP1207743590498AAAE",event,false)' onMousemove='xx_move_tag("GP1207743590498AAAE",event)'/> <AREA shape="rect" coords="169,54,209,199" onMouseover='xx_set_visible("GP1207743590498AAAD",event,true)' onMouseout='xx_set_visible("GP1207743590498AAAD",event,false)' onMousemove='xx_move_tag("GP1207743590498AAAD",event)'/> <AREA shape="rect" coords="119,62,159,199" onMouseover='xx_set_visible("GP1207743590498AAAC",event,true)' onMouseout='xx_set_visible("GP1207743590498AAAC",event,false)' onMousemove='xx_move_tag("GP1207743590498AAAC",event)'/> <AREA shape="rect" coords="69,127,109,199" onMouseover='xx_set_visible("GP1207743590498AAAB",event,true)' onMouseout='xx_set_visible("GP1207743590498AAAB",event,false)' onMousemove='xx_move_tag("GP1207743590498AAAB",event)'/> </MAP>

<script language="javascript"> function xx_set_visible(id, e, value){ if (!xx_supported_client()) return ; xx_get_by_id(id).style.visibility= value ? "visible" : "hidden"; if(value) xx_move_tag(id,e); xx_get_by_id(id).style.display=value ? "" : "none"; } function xx_move_tag(id,e){ if (!xx_supported_client()) return ; var popup = xx_get_by_id(id); if (popup.style.visibility!="visible") return ; var ie=document.all; var ns6=!(!document.getElementById || ie) ; /*document.getElementById AND !document.all*/ var iebody = !(!document.compatMode || document.compatMode=="BackCompat")? document.documentElement : document.body; var dx = 10, dy = 10; var posX=(ns6)?e.pageX : event.x+iebody.scrollLeft; var posY=(ns6)?e.pageY : event.y+iebody.scrollTop; if(ie || ns6) { var parent = popup.offsetParent ; while(parent) { posX -= parent.offsetLeft; posY -= parent.offsetTop; parent=parent.offsetParent; } } var ieNOTopera = !(!ie || window.opera); var rightedge= ieNOTopera ? iebody.clientWidth-event.clientX: window.innerWidth-e.clientX-20 var bottomedge=ieNOTopera ? iebody.clientHeight-event.clientY : window.innerHeight-e.clientY-20 if (xx_less(rightedge-dx,popup.offsetWidth)) posX=ie? iebody.scrollLeft+event.clientX-popup.offsetWidth : window.pageXOffset+e.clientX-popup.offsetWidth; if (xx_less(bottomedge-dy,popup.offsetHeight)) { posY=ie? iebody.scrollTop+event.clientY-popup.offsetHeight : window.pageYOffset+e.clientY-popup.offsetHeight; dy =-dy; } popup.style.left=posX+dx+"px"; popup.style.top=posY+dy+"px" ; } function xx_less(l,r) { return Math.max(l-r,0) == 0 ; /* l LE r */} function xx_and(l, r) { return !(!l || !r); /*l AND r */} function xx_supported_client() { return (document.all) || (document.getElementById);} function xx_get_by_id(id) { return document.all? document.all[id]: document.getElementById? document.getElementById(id) : "" } </script>

This suggests that all you need to do is to replace the temporary dynamically generated path /CFIDE/GraphData.cfm?graphCache=wc50&graphID=Images/4336043540100030.PNG with a static path to the PNG file. that is what I do in my next post.

[BKBK · Accepted solution]

My previous post was about the HTML code that Coldfusion's in-built WebCharts engine generates to be displayed along with a chart. The following code shows how you can combine it with the static PNG chart file.

[wmohns]

Excellent BKBK! I haven't had a chance to implement your solution, but this definitely looks like the right approach. I did not know that there was a function like REReplaceNoCase. Thank you very much for your help with this!

[-__cfSearching__-]

Excellent example BKBK. I almost did not suggest the idea of capturing the webcharts data because I did not have time to test and post an example. Thanks for doing all the heavy lifting :)