Ever since reading Raymond Camden's entry on creating gauge charts with ColdFusion 8, I have had charts on the brain. I continued to experiment with the webcharts utility and discovered yet another neat webcharts tool. One that can be used to create map charts like this:
The tool is called Map Editor and it allows you to edit SHP or CSHP files and save them as a webcharts3d .MAP file. You can then use the .MAP file with the webcharts utility to create your chart. You can launch the Map Editor from the command line.
C:\ColdFusion8\lib> java -jar wc50.jar --mapedit
Now I did not have any .SHP files lying around, so I downloaded one from esri.com. Then I opened up the file in Map Editor and modified the xml to add a few country names.
After saving the file with a .MAP extension, I opened up the webcharts utility and selected a map chart. Now initially the chart preview was blank, because ColdFusion 8's jar does not ship with any .MAP files. But after changing the source to point to my new .MAP file the preview appeared.
Then I saved my project as a WCP file, ran my test code and it produced a great looking map chart. Pretty cool stuff!
09/03/2009: Just like the "url" element of cfchart, you can display another url when one of the chart elements is clicked. Simply use the webcharts utility to set the action attribute to the desired cfm page. You can use pseudo variables like $(value) to pass information about the selected element as url parameters. Example action:
Aside from minor changes for the chart type, the code is entirely borrowed from Raymond Camden's entry on gauge charts . (His example was good, so why re-invent the wheel ;) Anyway, all credit and thanks for the code go to him.
<!--- Get base server url --->
<cfset baseURL = "https://"& CGI.HTTP_HOST &"/">
<cfset baseURL = "http://"& CGI.HTTP_HOST &"/">
<!--- Extract chart style from the WCP file --->
<cfset wcp = XMLParse( ExpandPath("./testMap.wcp") )>
<cfset chartStyle = ToString(wcp.project.style.map)>
<!--- Create sample chart data --->
<cfsavecontent variable="chartModel"><?xml version="1.0" encoding="UTF-8"?>
<item name="Country" popup="$(name)">
<item name="United Kingdom" backColor="#ECC362"/>
<item name="Spain" backColor="#F1D372"/>
<item name="Portugal" backColor="#C7BE7B"/>
<item name="France" backColor="#989A74"/>
<item name="Item" backColor="#D17610"/>
<!--- Initialize chart settings --->
oMyWebChart = createObject("Java","com.gp.api.jsp.MxServerComponent");
oMyApp = getPageContext().getServletContext();
oSvr = oMyWebChart.getDefaultInstance(oMyApp);
oMyChart2 = oSvr.newImageSpec();
oMyChart2.width = 500;
oMyChart2.type = "png";
oMyChart2.style = "#chartStyle#";
oMyChart2.model = "#chartModel#";
<!--- Create html tag set --->
<cfoutput>#oSvr.getImageTag(oMyChart2, baseURL& "CFIDE/GraphData.cfm?graphCache=wc50&graphID=")#</cfoutput>
<!--- Good old Webcharts loves to add an extra /Images/ to the URL --->
<cfset chartImgTag = replace(chartImgTag, baseURL &"Images/", baseURL, "All")>