princej88 Report post Posted January 23, 2013 Hi, I followed the instructions in the documentation that you have to create a linked chart just link this one: http://docs.fusionch...s-renderat.html Everything worked fine. I even changed the data format to a huge json string, no issues. I wanted to modify this so that I show the map of the united states on the left side and when clicked on a state, show the map of that state on the right side. However, when I click on a corresponding state, the right side just goes blank and no map of the state selected is being shown. The funny thing about it is, if i link the continents on FCMap_World.swf (the map on the left in the link above) to different states, they do display just fine. It's just not working when I am using FCMap_USA.swf map. Here is my code below. All the references are accurate and all files do exist as I was able to get the chart documented in the link above to work. Any help will be greatly appreciated. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Creating my first LinkedChart using FusionMaps XT</title> <script type="text/javascript" src="/approot/fusionmaps/drill/assets/ui/js/jquery.min.js"></script> <script type="text/javascript" src="/approot/fusionmaps/drill/Maps/FusionCharts.js"></script> <script type="text/javascript" src="/approot/fusionmaps/drill/assets/ui/js/lib.js"></script> <!--[if IE 6]> <script type="text/javascript" src="../assets/ui/js/DD_belatedPNG_0.0.8a-min.js"></script> <script> /* select the element name, css selector, background etc */ DD_belatedPNG.fix('img'); /* string argument can be any CSS selector */ </script> <![endif]--> </head> <body> <!-- wrapper --> <div id="wrapper"> <!-- header --> <div id="header"> <div class="logo" title= "FusionMaps XT "> <a href="http://www.fusioncharts.com/products/suite/fusionmaps/" target="_blank"> </a> </div> <h1 class="logo-text">Creating my first LinkedChart using FusionMaps XT</h1> </div> <!-- content area --> <div class="content-area"> <div id="content-area-inner-main"> <p class="text" align="center" > </p> <div id="messageBox" style="margin-left:100px; margin-right:100px; display:none;"></div> <p class="small" align="center"> </p> <div class="clear"></div> <div class="gen-chart-render"> <table> <tr> <td><div id="mapContainer" align="center">FusionMaps.</div></td> <td style="text-align:center; height:250px; width:450px; border:1px dotted #ccc;" valign="middle"><div id="linkedchart-container" >Click on a continent to show detailed map.</div></td></tr></table> <script type="text/javascript"> //var myMap = new FusionCharts("/approot/fusionmaps/drill/Maps/FCMap_World.swf", "myMapId", "450", "250", "0"); //putting new graph in place for testing. var myMap = new FusionCharts("/approot/fusionmaps/drill/Maps/FCMap_USA.swf", "myMapId", "450", "250", "0"); myMap.setJSONData( { "map": { "bordercolor": "005879", "fillcolor": "D7F4FF", "includevalueinlabels": "1", "numberprefix": "{:content:}quot;, "basefontsize": "9" }, "data": [ { "id": "GA", "value": "6921900", "link": "newchart:/approot/fusionmaps/drill/Maps/FCMap_Georgia.swf-xml-NorthAmerica" }, { "id": "AL", "value": "3087120", "link": "newchart:/approot/fusionmaps/drill/Maps/FCMap_Alabama.swf-xml-SouthAmerica" }, { "id": "SC", "value": "2434120", "link": "newchart:/approot/fusionmaps/drill/Maps/FCMap_SouthCarolina.swf-xml-Asia" }, { "id": "CA", "value": "5093230", "link": "newchart:/approot/fusionmaps/drill/Maps/FCMap_California.swf-xml-Europe" }, { "id": "TX", "value": "1032900", "link": "newchart:/approot/fusionmaps/drill/Maps/FCMap_Texas.swf-xml-Africa" }, { "id": "AZ", "value": "3461230", "link": "newchart:/approot/fusionmaps/drill/Maps/FCMap_Arizona.swf-xml-Australia" } ], "linkeddata": [ { "id": "Australia", "linkedmap": { "map": { "bordercolor": "005879", "fillcolor": "FFFFFF", "includevalueinlabels": "1", "numberprefix": "{:content:}quot;, "basefontsize": "9" }, "data": [] } }, { "id": "NorthAmerica", "linkedmap": { "map": { "bordercolor": "005879", "fillcolor": "D7F4FF", "includevalueinlabels": "1", "numberprefix": "{:content:}quot;, "basefontsize": "9" }, "data": [] } }, { "id": "SouthAmerica", "linkedmap": { "map": { "bordercolor": "005879", "fillcolor": "D7F4FF", "includevalueinlabels": "1", "numberprefix": "{:content:}quot;, "basefontsize": "9" }, "data": [] } }, { "id": "Asia", "linkedmap": { "map": { "bordercolor": "005879", "fillcolor": "D7F4FF", "includevalueinlabels": "1", "numberprefix": "{:content:}quot;, "basefontsize": "9" }, "data": [] } }, { "id": "Europe", "linkedmap": { "map": { "bordercolor": "005879", "fillcolor": "D7F4FF", "includevalueinlabels": "1", "numberprefix": "{:content:}quot;, "basefontsize": "9" }, "data": [] } }, { "id": "Africa", "linkedmap": { "map": { "bordercolor": "005879", "fillcolor": "D7F4FF", "includevalueinlabels": "1", "numberprefix": "{:content:}quot;, "basefontsize": "9" }, "data": [] } } ] }); myMap.render("mapContainer"); FusionCharts("myMapId").configureLink ( { "renderAt" : "linkedchart-container", overlayButton: { show : false } }, 0); </script> </div> <p class="highlightBlock">The above sample showcases how to configure LinkedCharts using FusionMaps XT. Click <a href="../../Contents/index.html?javascript/js_linkedcharts.html" target="_blank"> here</a> to know more on how the code of this example works. </p> </div> </div> </div> <script type="text/javascript"><!--// $(document).ready ( function() { showConditionalMessage( "Your browser does not seem to have Flash Player support. JavaScript map is rendered instead.", isJSRenderer(myMap) ); }); // --> </script> </body> </html> Share this post Link to post Share on other sites
princej88 Report post Posted January 24, 2013 Issue has been fixed Although I had referenced the flash files for the state maps with the correct capitalization (upper case 'M' in 'Maps' folder etc.), I was able to find out using fiddler that it was looking for the flash map files in all lowercase, as in the folders and the flash files were all being referenced in lowercase. I am not sure why it is doing that for this map, but I have just made the path to the maps and the maps themselves lowercase and that has fixed the issue. Share this post Link to post Share on other sites
Sanjukta Report post Posted January 29, 2013 Hi, Issue has been fixed Although I had referenced the flash files for the state maps with the correct capitalization (upper case 'M' in 'Maps' folder etc.), I was able to find out using fiddler that it was looking for the flash map files in all lowercase, as in the folders and the flash files were all being referenced in lowercase. I am not sure why it is doing that for this map, but I have just made the path to the maps and the maps themselves lowercase and that has fixed the issue. Thanks for the update! Glad that your issue is resolved. Happy FusionCharting! Share this post Link to post Share on other sites
