Who knew you could create CFCHART Maps with ColdFusion 8

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:

somePage.cfm?elemValue=$(value)

Test Code

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 --->
<cfif len(CGI.HTTPS)>
<cfset baseURL = "https://"& CGI.HTTP_HOST &"/">
<cfelse>
<cfset baseURL = "http://"& CGI.HTTP_HOST &"/">
</cfif>

<!--- 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"?>
<map name="Europe">
<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"/>
</item>
</map>
</cfsavecontent>

<!--- Initialize chart settings --->
<cfscript>
oMyWebChart = createObject("Java","com.gp.api.jsp.MxServerComponent");
oMyApp = getPageContext().getServletContext();
oSvr = oMyWebChart.getDefaultInstance(oMyApp);
oMyChart2 = oSvr.newImageSpec();
oMyChart2.width = 500;
oMyChart2.height= 570;
oMyChart2.type = "png";
oMyChart2.style = "#chartStyle#";
oMyChart2.model = "#chartModel#";
</cfscript>

<!--- Create html tag set --->
<cfsavecontent variable="chartImgTag">
<cfoutput>#oSvr.getImageTag(oMyChart2, baseURL& "CFIDE/GraphData.cfm?graphCache=wc50&graphID=")#</cfoutput>
</cfsavecontent>

<!--- Good old Webcharts loves to add an extra /Images/ to the URL --->
<cfset chartImgTag = replace(chartImgTag,  baseURL &"Images/",  baseURL, "All")>

<h2>Map Chart</h2>
<cfoutput>
#chartimgtag#
</cfoutput>