Changing Chart Properties

[jgouldtgg]

This is maddening. If we can solve this problem we'll be celebrating tonight.

 

I am trying to change the height of the Bar2d.swf chart based on the number of items in the chart. For this test, I am simply hard-coding the number.

 

Here is the code to generate a map of the United States and a placemarker for a Bar2d chart that will generate when the user clicks on a state on the map.

 

 

<cfset strUSAMapDataUrl = encodeDataURL("Data_USA.cfm",1) />

 

<cfoutput>

#renderChart("/siteadmin/reporting/FusionMaps/FCMap_USA.swf", strUSAMapDataUrl,"" ,"TestMap1Id", "750", "400", false, true)#

</cfoutput>

 

<cfset strXML = "<chart caption='' palette='#palette#' animation='#animateCharts#' yAxisName='Count' xAxisName='' showValues='0' numberPrefix='' seriesNameInToolTip='0' formatNumberScale='0'>">

<cfset strXML = "#strXML##getStateXML('zz')#">

<cfset strXML = "#strXML#<styles><definition><style type='font' name='CaptionFont' size='15' color='#captionFontColor#' /><style type='font' name='SubCaptionFont' bold='0' /></definition><application><apply toObject='caption' styles='CaptionFont' /><apply toObject='SubCaption' styles='SubCaptionFont' /></application></styles>">

<cfset strXML = "#strXML#</chart>">

 

<cfoutput>

#renderChart("/siteadmin/reporting/FusionCharts/Bar2D.swf?ChartNoDataText=Please select a state in the above map.", "",strXML , "TestMapState", "750", "400", false, true)#

</cfoutput>

 

 

For the most part, this works fine.

 

Data_USA.cfm generates the following XML:

 

<map borderColor='005879' fillColor='D7F4FF' numberSuffix='' includeValueInLabels='1' labelSepChar=': ' baseFontSize='9'><colorRange><color minValue='0' maxValue='10' displayValue='Low' color='A7E9BC' /><color minValue='100' maxValue='50' displayValue='Middle' color='FFFFCC' /><color minValue='50' maxValue='9999999' displayValue='High' color='FF9377' /></colorRange><data><entity id='' value='4' link='j-updateStateMap-'/><entity id='AK' value='1' link='j-updateStateMap-AK'/><entity id='AL' value='6' link='j-updateStateMap-AL'/><entity id='AR' value='7' link='j-updateStateMap-AR'/><entity id='AZ' value='15' link='j-updateStateMap-AZ'/><entity id='CA' value='423' link='j-updateStateMap-CA'/><entity id='CO' value='28' link='j-updateStateMap-CO'/><entity id='CT' value='87' link='j-updateStateMap-CT'/><entity id='DC' value='32' link='j-updateStateMap-DC'/><entity id='DE' value='5' link='j-updateStateMap-DE'/><entity id='FL' value='101' link='j-updateStateMap-FL'/><entity id='GA' value='51' link='j-updateStateMap-GA'/><entity id='HI' value='3' link='j-updateStateMap-HI'/><entity id='IA' value='22' link='j-updateStateMap-IA'/><entity id='ID' value='2' link='j-updateStateMap-ID'/><entity id='IL' value='822' link='j-updateStateMap-IL'/><entity id='IN' value='22' link='j-updateStateMap-IN'/><entity id='KS' value='9' link='j-updateStateMap-KS'/><entity id='KY' value='2' link='j-updateStateMap-KY'/><entity id='LA' value='2' link='j-updateStateMap-LA'/><entity id='MA' value='303' link='j-updateStateMap-MA'/><entity id='MD' value='64' link='j-updateStateMap-MD'/><entity id='ME' value='5' link='j-updateStateMap-ME'/><entity id='MI' value='33' link='j-updateStateMap-MI'/><entity id='MN' value='16' link='j-updateStateMap-MN'/><entity id='MO' value='7' link='j-updateStateMap-MO'/><entity id='MS' value='1' link='j-updateStateMap-MS'/><entity id='MT' value='3' link='j-updateStateMap-MT'/><entity id='NC' value='18' link='j-updateStateMap-NC'/><entity id='ND' value='2' link='j-updateStateMap-ND'/><entity id='NE' value='64' link='j-updateStateMap-NE'/><entity id='NH' value='10' link='j-updateStateMap-NH'/><entity id='NJ' value='71' link='j-updateStateMap-NJ'/><entity id='NM' value='1' link='j-updateStateMap-NM'/><entity id='NV' value='3' link='j-updateStateMap-NV'/><entity id='NY' value='599' link='j-updateStateMap-NY'/><entity id='OH' value='132' link='j-updateStateMap-OH'/><entity id='OK' value='7' link='j-updateStateMap-OK'/><entity id='OR' value='20' link='j-updateStateMap-OR'/><entity id='PA' value='40' link='j-updateStateMap-PA'/><entity id='RI' value='56' link='j-updateStateMap-RI'/><entity id='SC' value='18' link='j-updateStateMap-SC'/><entity id='SD' value='4' link='j-updateStateMap-SD'/><entity id='TN' value='16' link='j-updateStateMap-TN'/><entity id='TX' value='72' link='j-updateStateMap-TX'/><entity id='UT' value='8' link='j-updateStateMap-UT'/><entity id='VA' value='48' link='j-updateStateMap-VA'/><entity id='VT' value='2' link='j-updateStateMap-VT'/><entity id='WA' value='16' link='j-updateStateMap-WA'/><entity id='WI' value='35' link='j-updateStateMap-WI'/><entity id='WV' value='1' link='j-updateStateMap-WV'/><entity id='WY' value='1' link='j-updateStateMap-WY'/></data></map>

Clicking a state on the USA map calls the function updateStateMap()

function updateStateMap(state_code){ var strURL = "Data_State.cfm?state_code=" + state_code; strURL = escape(strURL); var chartObj = getChartFromId("TestMapState"); if (state_code = 'FL'){ chartObj.resizeTo( "750", "950" ); } else if (state_code = 'NY'){ chartObj.resizeTo( "750", "750" ); } chartObj.setDataURL(strURL); chartObj.render("TestMapStateDiv"); }

Notice that I am trying to resize from the original 750x400 if the state is FL or NY.

Data_State.cfm generates the following XML:

<chart caption='' palette='2' animation='1' yAxisName='Count' xAxisName='' showValues='0' numberPrefix='' seriesNameInToolTip='0' formatNumberScale='0'><set label='ALBANY' value='1' /><set label='ALLEGANY' value='1' /><set label='BRONX' value='1' /><set label='BROOME' value='5' /><set label='DUTCHESS' value='2' /><set label='FRANKLIN' value='1' /><set label='GREENE' value='2' /><set label='KINGS' value='19' /><set label='MONROE-REM' value='3' /><set label='NASSAU' value='32' /><set label='NEW YORK' value='264' /><set label='ONONDAGA' value='4' /><set label='ORANGE' value='6' /><set label='PUTNAM' value='3' /><set label='QUEENS' value='9' /><set label='RICHMOND' value='7' /><set label='ROCKLAND' value='4' /><set label='SARATOGA' value='2' /><set label='SCHENECTADY' value='8' /><set label='SUFFOLK' value='170' /><set label='TIOGA' value='1' /><set label='ULSTER' value='2' /><set label='Unknown' value='30' /><set label='WAYNE' value='1' /><set label='WESTCHESTER' value='21' /><styles><definition><style type='font' name='CaptionFont' size='15' color='666666' /><style type='font' name='SubCaptionFont' bold='0' /></definition><application><apply toObject='caption' styles='CaptionFont' /><apply toObject='SubCaption' styles='SubCaptionFont' /></application></styles></chart>

So why is it that the size of the Bar2d chart will not resize?

 

 

Ultimately, I will want to display the map of the particular state in TestStateDiv, meaning that I will need to change the SWF file on the fly. However, let's figure out how to dynamically change height and width first.

 

 

Thank you.

 

 

Jeff

 

 

[jgouldtgg]

I figured it out. Thanks anyway.

[Swarnam]