princej88

Odd Linked Charts Behaviour

Recommended Posts

Hi,

 

I am trying to create a linked chart that when an entity on the parent map is clicked that the child map is shown in a div on the right side. Now this works perfectly in the code below:

 


<!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>Linked Fusionmaps Test</title>
       <script type="text/javascript" src="/approot/fusionmaps/drill/Maps/FusionCharts.js"></script>
   </head>
   <body>
           <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:350px; width:550px; border:1px dotted #ccc;" valign="middle"><div id="linkedchart-container"  >Linked map will load here.</div></td></tr></table>
                       <script type="text/javascript">

var myMap = new FusionCharts("/approot/fusionmaps/drill/maps/fcmap_usa.swf", "myMapId", "650", "450", "0");
myMap.setJSONData({
   "map": {
       "includevalueinlabels": "1",
       "numberprefix": "{:content:}quot;,
       "basefontsize": "9"
   },
    "colorrange": {
   "color": [
     {
       "minvalue": "0",
       "maxvalue": "2",
       "displayvalue": "Low",
       "color": "CC0001"
     },
     {
       "minvalue": "2",
       "maxvalue": "5",
       "displayvalue": "Medium",
       "color": "FFCC33"
     },
     {
       "minvalue": "5",
       "maxvalue": "10",
       "displayvalue": "High",
       "color": "069F06"
     }
   ]
 },
   "data": [
{
"id" : "AL",
"value" : "1",
"link" : "newchart:/approot/fusionmaps/drill/maps/fcmap_usa-xml-alabama.swf"
},
{
"id" : "CA",
"value" : "8",
"link" : "newchart:/approot/fusionmaps/drill/maps/fcmap_california.swf-xml-california"
},
{
"id" : "CO",
"value" : "2",
"link" : "newchart:/approot/fusionmaps/drill/maps/fcmap_colorado.swf-xml-colorado"
},
{
"id" : "FL",
"value" : "3",
"link" : "newchart:/approot/fusionmaps/drill/maps/fcmap_florida.swf-xml-florida"
},
{
"id" : "IA",
"value" : "1",
"link" : "newchart:/approot/fusionmaps/drill/maps/fcmap_iowa.swf-xml-iowa"
},
{
"id" : "IL",
"value" : "2",
"link" : "newchart:/approot/fusionmaps/drill/maps/fcmap_illinois.swf-xml-illinois"
},
{
"id" : "IN",
"value" : "2",
"link" : "newchart:/approot/fusionmaps/drill/maps/fcmap_indiana.swf-xml-indiana"
},
{
"id" : "MA",
"value" : "1",
"link" : "newchart:/approot/fusionmaps/drill/maps/fcmap_massachusetts.swf-xml-massachusetts"
},
{
"id" : "MD",
"value" : "1",
"link" :"newchart:/approot/fusionmaps/drill/maps/fcmap_maryland.swf-xml-maryland"
},
{
"id" : "MI",
"value" : "1",
"link" :"newchart:/approot/fusionmaps/drill/maps/fcmap_michigan.swf-xml-michigan"
},
{
"id" : "MN",
"value" : "2",
"link" : "newchart:/approot/fusionmaps/drill/maps/fcmap_minnesota.swf-xml-minnesota"
},
{
"id" : "MO",
"value" : "1",
"link" : "newchart:/approot/fusionmaps/drill/maps/fcmap_missouri.swf-xml-missouri"
},
{
"id" : "NV",
"value" : "1",
"link" : "newchart:/approot/fusionmaps/drill/maps/fcmap_nevada.swf-xml-nevada"
}
,{
"id" : "OH",
"value" : "1",
"link" : "newchart:/approot/fusionmaps/drill/maps/fcmap_ohio.swf-xml-ohio"
},
{
"id" : "SC",
"value" : "1",
"link" : "newchart:/approot/fusionmaps/drill/maps/fcmap_southcarolina.swf-xml-southcarolina"
},
{
"id" : "TN",
"value" : "1",
"link" : "newchart:/approot/fusionmaps/drill/maps/fcmap_tennessee.swf-xml-tennessee"
},
{
"id" : "TX",
"value" : "4",
"link" : "newchart:/approot/fusionmaps/drill/maps/fcmap_texas.swf-xml-texas"
},
{
"id" : "UT",
"value" : "2",
"link" : "newchart:/approot/fusionmaps/drill/maps/fcmap_utah.swf-xml-utah"
},
{
"id" : "WA",
"value" : "3",
"link" : "newchart:/approot/fusionmaps/drill/maps/fcmap_washington.swf-xml-washington"
},
{
"id" : "WI",
"value" : "1",
"link" :"newchart:/approot/fusionmaps/drill/maps/fcmap_wisconsin.swf-xml-wisconsin"
}

],
   "linkeddata": [ {
       "id": "arizona",
       "linkedmap": {
           "map": {
               "bordercolor": "005879",
               "fillcolor": "FFFFFF",
               "includevalueinlabels": "1",
               "numberprefix": "{:content:}quot;,
               "basefontsize": "9"
           },
              	"data": []
       }
   }, {
   "id": "georgia",
   "linkedmap": {
       "map": {
           "bordercolor": "005879",
           "fillcolor": "D7F4FF",
           "includevalueinlabels": "1",
           "numberprefix": "{:content:}quot;,
           "basefontsize": "9"
       },
                 "data": []
   }
}, {
   "id": "alabama",
   "linkedmap": {
       "map": {
		"bordercolor": "FFFFFF",
		"connectorcolor": "000000",
		"fillalpha": "70",
		"hovercolor": "FFFFFF",
		"showbevel": "0",
		"interactiveAnimation" : "1",
		"interactiveAnimDuration" : "1",
		"enableSnapLegend": "1"
       },
                 "data": []
   }
}, {
   "id": "southcarolina",
   "linkedmap": {
       "map": {
           "bordercolor": "005879",
           "fillcolor": "D7F4FF",
           "includevalueinlabels": "1",
           "numberprefix": "{:content:}quot;,
           "basefontsize": "9"
       },
                 "data": []
   }
}, {
   "id": "california",
   "linkedmap": {
       "map": {
           "bordercolor": "005879",
           "fillcolor": "d9d9d9",
           "includevalueinlabels": "1",
           "numberprefix": "{:content:}quot;,
           "basefontsize": "9"
       },
       "data": []
   }
}, {
   "id": "texas",
   "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>
               </div>
           </div>

   </body>

</html>

 

 

Now I have modified this to work with the map of Europe and what I want to happen is when a country is clicked from the left map, I want to display the map of the country on the right side. Here is where I am getting the odd behaviour. When I click on an entity (country) from the parent map, it looks as though the html page is trying to open the map with a new url. The url that appears in the browser bar is: newchart://path/to/swf-xml-Austria. I have attached a screenshot of this happening. The really odd thing is that the code above works perfectly for the USA Map. All i had done was change the references in the html to point to a new map flash file and modify the data to reflect the new map and this is the odd behaviour that I am getting. Any help on this would be greatly appreciated. I have spent way too much time trying to figure this out. Thanks ahead of time for your help.

 

Thanks,

Prince

post-29915-0-50233100-1359603912_thumb.jpg

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now