ColdFusion in Baltimore Rotating Header Image

choropleth

Creating dynamic thematic drill down maps ONLY with ColdFusion

Here is a step-by-step on how to create data driven thematic (choropleth) maps in ColdFusion. No other software needed. Who needs BI software?

1- Download the usa.map (shape file) and usa.xml (webcharts project -XML file)

2- Place usa.map into your X:ColdFusionWEB-INFcfusionlibmapsCountries directory

3- Edit the usa.xml file to  point to the usa.map file (line 6)

4- Get some data from somewhere. http://msis.cms.hhs.gov/ has data on Medicaid. I used the 2008 total $ paid.

And here’s the code..I used some code from Ray Camden’s blog..so thanks Ray.

[coldfusion]<!—set values and colors —>
<cfscript>
minamount = minmax.minamount;
maxamount = minmax.maxamount;
lo_amount = minamount;
tenth = (maxamount-minamount)/10;
next_Amount = lo_amount+tenth;
colorQ=QueryNew(“color,lo_value,hi_value”,”varchar,VarChar,VarChar”);
row = 1;
</cfscript>
<cfloop list=”#bluelist#” index=”value”>
<cfscript>
QueryAddRow(colorQ,1);
QuerySetCell(colorQ,”color”,value,row);
QuerySetCell(colorQ,”lo_value”,lo_amount,row);
QuerySetCell(colorQ,”hi_value”,next_Amount,row);
row = row+1;
lo_amount = next_Amount;
tenth = (maxamount-minamount)/10;
next_Amount = next_Amount+tenth;
</cfscript>
</cfloop>

<!— Get base server url —>
<cfif len(CGI.HTTPS)>
<cfset baseURL = “https://”& CGI.HTTP_HOST &”/cfusion/”>
<cfelse>
<cfset baseURL = “http://”& CGI.HTTP_HOST &”/cfusion/”>
</cfif>
<!— Extract chart style from the WCP file —>
<cffile action=”read” file=”#ExpandPath(‘rusa.wcp’)#” variable=”xmlResult”>
<cfset xmlResult = XmlParse(
REReplace(xmlResult, “^[^<]*”, “”, “all” )
) />
<cfset wcp = XMLParse(xmlResult)>
<cfset chartStyle = ToString(wcp.project.style.map)>
<!— Create chart data <cfdump var=”#usatotals#”>—>

<cfsavecontent variable=”chartModel”>
<?xml version=”1.0″ encoding=”UTF-8″?>
<map name=”USA”>
<cfoutput query=”usatotals”>
<!— set bg color —>
<cfloop query=”colorQ”>
<cfif usatotals.totalsum GTE lo_value AND usatotals.totalsum LTE hi_value>
<cfset backcolor = color>
</cfif>
</cfloop>
<item name=”#st_desc#” backColor=”#backColor#” popup=”$(name)n$$(value)” value=”#NumberFormat(totalsum,”___.__,”)#”/> </cfoutput>
</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 = 720;
oMyChart2.height= 465;
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”)>

<span class=”important”>Medicaid Total Amount Paid –
FY<cfoutput>#url.fy# – #DollarFormat(grandtotals.totalsum)#</cfoutput></span><br />
(click a state to drill down)
<table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”5″>
<tr>
<td><cfoutput>#chartimgtag#</cfoutput></td>
<td align=”left” valign=”top”><cfoutput>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”2″>
<tr bordercolor=”##000000″>
<td colspan=”2″ class=”style17″>Map legend (in millions)</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><span class=”style17″>Data unavailable </span></td>
</tr>
<!— set colors and values —>
<cfloop query=”colorQ”>
<tr>
<td bgcolor=”#color#”>&nbsp;</td>
<td><span class=”style17″>#DollarFormat(lo_value/1000000)# – #DollarFormat(hi_value/1000000)#</span></td>
</tr>
</cfloop>
</table>
</cfoutput>

[/coldfusion]