Drilldown Map Displaying Another Chart

mie131085 · October 15, 2012

hi there,

just a simple question here,

is it possible that the fusion maps drill down to another chart?

for example on clicking the map, we then will be displayed another chart type

on that same chart canvas (e.g. display on the same div tag)

I am right now doing the drill down part. from the fusion maps (that shows the region name & total quantity)

and upon clicking on one of the region for that map, the user then will be displayed with another chart (i.e. column3d.swf)

with specific datas (for example company list & each respected data that resides in that region) .

is that even possible?

i want to do based on this attribute on each region for that map (upon clicking one of the region inside that map)

NOTE : when the user click, the new xml is build based on that specific chart & passed it back to the user with a different data

& different chart

 link="newchart-xmlurl-company.php?region=Myregion"

Edited October 15, 2012 by mie131085

Sanjukta · October 15, 2012

Hi,

hi there,

just a simple question here,

is it possible that the fusion maps drill down to another chart?

for example on clicking the map, we then will be displayed another chart type

on that same chart canvas (e.g. display on the same div tag)

I am right now doing the drill down part. from the fusion maps (that shows the region name & total quantity)

and upon clicking on one of the region for that map, the user then will be displayed with another chart (i.e. column3d.swf)

with specific datas (for example company list & each respected data that resides in that region) .

is that even possible?

i want to do based on this attribute on each region for that map (upon clicking one of the region inside that map)

NOTE : when the user click, the new xml is build based on that specific chart & passed it back to the user with a different data

& different chart
 link="newchart-xmlurl-company.php?region=Myregion" 

Yes, it is possible to drill-down from a map entity to a chart in order to display the data, as per your requirement. In the attached sample, we have demonstrated the drill-down feature from a map to the charts.

Could you please confirm if you are trying to track the chart and create & pass the XML data accordingly? In case yes, this is natively not possible. However, you can achieve this with the help of a query string and pass the chart type.

Please note that the link for each continent is defined in the following format:

link='newchart:Pie3D.swf-xmlurl-data1.xml'

The link can be broken down into:

newChart prefix: used to indicate that it must invoke LinkedChart.

The type of chart or the name of the chart SWF file (Pie3D.swf here)is added separated by a colon (:).

xmlurl indicates that URL method is used to specify data for linked chart; in case of JSON data, jsonurl is used.

data1.xml is the URL specifying the data path for the linked chart that opens when this entity is clicked.

For further details on the above, please refer to the following link.

Ref.- http://docs.fusionch...s/Overview.html

Also, please try keeping the Chart SWF files in another folder ("Chart" folder) inside the main folder where the HTML file is placed.

Also, please specify the folder path in the following code snippet in the HTML.

FusionCharts("MyMapId").configureLink (
	{
			"swfSrcPath" : "Chart/"

       }, 0);

Please check with the attached sample for your reference and see if this helps.

Looking forward to your feedback.

DriilDown_MapAndChart.zip

mie131085 · October 17, 2012

Hi there,

Hi,

Yes, it is possible to drill-down from a map entity to a chart in order to display the data, as per your requirement. In the attached sample, we have demonstrated the drill-down feature from a map to the charts.

Could you please confirm if you are trying to track the chart and create & pass the XML data accordingly? In case yes, this is natively not possible. However, you can achieve this with the help of a query string and pass the chart type.

Please note that the link for each continent is defined in the following format:
link='newchart:Pie3D.swf-xmlurl-data1.xml'
The link can be broken down into:

newChart prefix: used to indicate that it must invoke LinkedChart.

The type of chart or the name of the chart SWF file (Pie3D.swf here)is added separated by a colon (:).

xmlurl indicates that URL method is used to specify data for linked chart; in case of JSON data, jsonurl is used.

data1.xml is the URL specifying the data path for the linked chart that opens when this entity is clicked.

For further details on the above, please refer to the following link.

Ref.- http://docs.fusionch...s/Overview.html

Also, please try keeping the Chart SWF files in another folder ("Chart" folder) inside the main folder where the HTML file is placed.

Also, please specify the folder path in the following code snippet in the HTML.
FusionCharts("MyMapId").configureLink (
	{
			"swfSrcPath" : "Chart/"

       }, 0);
Please check with the attached sample for your reference and see if this helps.

Looking forward to your feedback.

thanx for your reply,

i did try to test it out one of your example just now (the download link). it runs ok on my PC (on localhost)

but am facing some problem when i'm changing the sourcecode map to FCMap_Malaysia.swf & xmldata to dataMalaysia.xml;

using this xmldata - dataMalaysia.xml :


<map showCanvasBorder="0" borderColor="FFFFFF" connectorColor="000000" fillAlpha="80" hoverColor="FFFFFF" showBevel="0" numberSuffix="yang memohon" legendBorderColor="F1f1f1" legendPosition="bottom">
<data>
<entity id="001" value="81" link="newchart:Pie3D.swf-xmlurl-server.php?negeriid=01" />
<entity id="004" value="41" link="newchart:Pie3D.swf-xmlurl-server.php?negeriid=02" />
<entity id="005" value="39" link="newchart:Pie3D.swf-xmlurl-server.php?negeriid=03" />


..so on

</data>
</map>

on server side programming (for me in php) which is server.php it's just creates a dummy data


<?php

echo "<chart><set label='test' value='1200' /></chart>";

?>

the example html file :


<html>
 <head> 
   <title>My map using LinkedCharts feature</title> 
   <script type="text/javascript" src="FusionCharts.js"></script>
 </head> 
 <body> 
   <div id="mapContainer">FusionMaps XT will load here!</div> 
   <script type="text/javascript"><!--

     var myMap = new FusionCharts ("FCMap_Malaysia.swf", "MyMapId", "700", "400", "0","1");
     myMap.setXMLUrl ("dataMalaysia.xml");
     myMap.render("mapContainer"); 

 	FusionCharts("MyMapId").configureLink (
	{
			"swfSrcPath" : "Chart/"

       }, 0);
   // --> 
   </script>
 </body> 
</html>

but once i'm running the html example file, the malaysia map is then displayed. but upon click on one of the region i've been redirected to another page

which is The Webpage cannot be displayed. just wondering what went wrong here. is my own sourcecode is in wrong format or is the fusionmap file (malaysia map) is

generating the error?

Edited October 17, 2012 by mie131085

Sanjukta · October 17, 2012

Hi,

Hi there,

thanx for your reply,

i did try to test it out one of your example just now (the download link). it runs ok on my PC (on localhost)

but am facing some problem when i'm changing the sourcecode map to FCMap_Malaysia.swf & xmldata to dataMalaysia.xml;

using this xmldata - dataMalaysia.xml :
<map showCanvasBorder="0" borderColor="FFFFFF" connectorColor="000000" fillAlpha="80" hoverColor="FFFFFF" showBevel="0" numberSuffix="yang memohon" legendBorderColor="F1f1f1" legendPosition="bottom">
<data>
<entity id="001" value="81" link="newchart:Pie3D.swf-xmlurl-server.php?negeriid=01" />
<entity id="004" value="41" link="newchart:Pie3D.swf-xmlurl-server.php?negeriid=02" />
<entity id="005" value="39" link="newchart:Pie3D.swf-xmlurl-server.php?negeriid=03" />

..so on

</data>
</map>
on server side programming (for me in php) which is server.php it's just creates a dummy data
<?php

echo "<chart><set label='test' value='1200' /></chart>";

?>
the example html file :
<html>
 <head> 
   <title>My map using LinkedCharts feature</title> 
   <script type="text/javascript" src="FusionCharts.js"></script>
 </head> 
 <body> 
   <div id="mapContainer">FusionMaps XT will load here!</div> 
   <script type="text/javascript"> 
   </script>
 </body> 
</html>
but once i'm running the html example file, the malaysia map is then displayed. but upon click on one of the region i've been redirected to another page

which is The Webpage cannot be displayed. just wondering what went wrong here. is my own sourcecode is in wrong format or is the fusionmap file (malaysia map) is

generating the error?

Could you please let us know what is displayed on the address bar when the error "The Webpage cannot be displayed" is shown?

Also, please confirm that you are not using any older versions of FusionMaps. The LinkedChart feature is supported since FusionMaps XT.

Looking forward to your reply.

mie131085 · October 18, 2012

thanks, the problem now solved.

it's actually the FusionMaps file that i've using for this development.

the file that i've used is the old version, If I'm not mistaken 3.1.1 .

download the new version & it now work.

Hi,

Could you please let us know what is displayed on the address bar when the error "The Webpage cannot be displayed" is shown?

Also, please confirm that you are not using any older versions of FusionMaps. The LinkedChart feature is supported since FusionMaps XT.

Looking forward to your reply.

Sanjukta · October 18, 2012

Hi,

thanks, the problem now solved.

it's actually the FusionMaps file that i've using for this development.

the file that i've used is the old version, If I'm not mistaken 3.1.1 .

download the new version & it now work.

Glad that your issue is resolved!

Happy FusionCharting!

awheinr · July 16, 2015

Hello,

Along these same lines, is it possible to have embedded linked maps? I want to be able to go multiple levels. I have not yet seen an example or documentation describing how to do so. Below is an example in which I'm drilling down from the world map, then to the regional map, and then down the a USA map. It currently does not work, but am not sure what I am doing wrong. I'm assuming it's possible.

Thanks in advance!!

"chart": {

"dataFormat": "json",

"formatNumberScale":"0",

"showLabels": "1",

"nullEntityColor": "#C2C2D6",

"nullEntityAlpha":"50",

"hoverOnNull": "0",

"useSNameInLabels" : "0",

"entityFillColor" : "#A8A8A8",

"entityFillHoverColor" : "#E5E5E9",

"formatNumberScale":"0",

"bgColor":"#000000",

"bgAlpha":"0",

"showBorder": "0",

"showCanvasBorder": "0",

"toolTipColor": "#ffffff",

"toolTipBorderThickness": "0",

"toolTipBgColor": "#000000",

"toolTipBgAlpha": "80",

"toolTipBorderRadius": "2",

"toolTipPadding": "5"

},

"colorrange": {

"color": [

{

"minvalue": "50",

"maxvalue": "299",

"displayvalue": "Average",

"code": "#f8bd19"

},

{

"minvalue": "300",

"maxvalue": "1000",

"code": "#6baa01"

}

]

},

"data": [

{

"id": "NA",

"displayValue": "North America",

"value": "57.2",

"link": "newchart:maps/northamericawocentral-json-NA"

},

{

"id": "SA",

"value": "57.1",

"showLabel" : "1"

},

{

"id": "AS",

"value": "247",

"showLabel" : "1"

},

{

"id": "EU",

"value": "188.5",

"showLabel" : "1"

},

{

"id": "AF",

"value": "87.2",

"showLabel" : "1"

},

{

"id": "AU",

"value": "8.32",

"showLabel" : "1"

}

],

"linkeddata": [

{

"id": "NA",

"linkedchart": {

"chart": {

"showLabels": "1",

"bgColor":"#000000",

"bgAlpha":"0",

"showBorder": "0",

"showCanvasBorder": "0"

},

"colorrange": {

"color": [

{

"minvalue": "50",

"maxvalue": "299",

"displayvalue": "Average",

"code": "#f8bd19"

},

{

"minvalue": "300",

"maxvalue": "1000",

"code": "#6baa01"

}

]

},

"data": [

{

"id": "CA",

"value": "99"

},

{

"id": "GL",

"value": "200"

},

{

"id": "MX",

"value": "210"

},

{

"id": "US",

"value": "220",

"link": "newchart:maps/usa-json-US"

}

],

"linkeddata": [

{

"id": "US",

"linkedchart": {

"chart": {

"showLabels": "1",

"bgColor":"#000000",

"bgAlpha":"0",

"showBorder": "0",

"showCanvasBorder": "0"

},

"colorrange": {

"color": [

{

"minvalue": "50",

"maxvalue": "299",

"displayvalue": "Average",

"code": "#f8bd19"

},

{

"minvalue": "300",

"maxvalue": "1000",

"code": "#6baa01"

}

]

},

"data": [

{

"id": "HI",

"value": "99"

},

{

"id": "DC",

"value": "99"

},

{

"id": "MD",

"value": "90"

},

{

"id": "DE",

"value": "96"

},

{

"id": "RI",

"value": "90"

},

{

"id": "WA",

"value": "228"

},

{

"id": "OR",

"value": "105"

},

{

"id": "CA",

"value": "221"

},

{

"id": "AK",

"value": "260"

},

{

"id": "ID",

"value": "396"

},

{

"id": "NV",

"value": "169"

},

{

"id": "AZ",

"value": "435"

},

{

"id": "MT",

"value": "445"

},

{

"id": "WY",

"value": "455"

},

{

"id": "UT",

"value": "227"

},

{

"id": "CO",

"value": "214"

},

{

"id": "NM",

"value": "196"

},

{

"id": "ND",

"value": "331"

},

{

"id": "SD",

"value": "374"

},

{

"id": "NE",

"value": "329"

},

{

"id": "KS",

"value": "231"

},

{

"id": "OK",

"value": "150"

},

{

"id": "TX",

"value": "202"

},

{

"id": "MN",

"value": "137"

},

{

"id": "IA",

"value": "143"

},

{

"id": "MO",

"value": "424"

},

{

"id": "AR",

"value": "485"

},

{

"id": "LA",

"value": "124"

},

{

"id": "WI",

"value": "181"

},

{

"id": "IL",

"value": "120"

},

{

"id": "KY",

"value": "309"

},

{

"id": "TN",

"value": "250"

},

{

"id": "MS",

"value": "351"

},

{

"id": "AL",

"value": "271"

},

{

"id": "GA",

"value": "124"

},

{

"id": "MI",

"value": "120"

},

{

"id": "IN",

"value": "205"

},

{

"id": "OH",

"value": "476"

},

{

"id": "PA",

"value": "445"

},

{

"id": "NY",

"value": "369"

},

{

"id": "VT",

"value": "322"

},

{

"id": "NH",

"value": "216"

},

{

"id": "ME",

"value": "404"

},

{

"id": "MA",

"value": "165"

},

{

"id": "CT",

"value": "316"

},

{

"id": "NJ",

"value": "553"

},

{

"id": "WV",

"value": "560"

},

{

"id": "VA",

"value": "565"

},

{

"id": "NC",

"value": "534"

},

{

"id": "SC",

"value": "503"

},

{

"id": "FL",

"value": "503"

}

]

}

]

}

]

}

Edited July 16, 2015 by awheinr

Moonmi Sonowal · July 20, 2015

Hi,

Could you please have a look at the fiddle of a drill down map http://jsfiddle.net/fusioncharts/FxgCD/ ?

In the above fiddle, if you click North America , the map drills down to another map.

Hope this helps. Feel free to revert back to us for any further assistance.

Thanks.

Sign In

Drilldown Map Displaying Another Chart

Recommended Posts

mie131085

Share this post

Link to post

Share on other sites

Sanjukta

Share this post

Link to post

Share on other sites

mie131085

Share this post

Link to post

Share on other sites

Sanjukta

Share this post

Link to post

Share on other sites

mie131085

Share this post

Link to post

Share on other sites

Sanjukta

Share this post

Link to post

Share on other sites

awheinr

Share this post

Link to post

Share on other sites

Moonmi Sonowal

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity