Known Participant

Answered

saving cfchart output for use in static site

Forum|Forum|18 years ago
April 2, 2008
4 replies
2949 views

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?

Advanced techniques

This topic has been closed for replies.

Correct answer BKBK

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.

A

Anonymous

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

Community Expert

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

Correct answer

Community Expert

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.

BKBK

Community Expert

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">

</cfchart>

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

BKBK

Community Expert

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">

</cfchart>
</cfsavecontent>

<cfoutput>#salaryChart#</cfoutput>

It seems to work. (I am on CF8)

W

wmohnsAuthor

Known Participant

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">

</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!

N

Newsgroup_User

Inspiring

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

Community Expert

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>

W

wmohnsAuthor

Known Participant

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?

E

editcorp

Inspiring

Can you simply cfcache the page?

Regards,
Michael
--

W

wmohnsAuthor

Known Participant

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded