Problem While Including Fusioncharts.js For Fusionmaps And Fusioncharts On Same Page

dkyadav · September 12, 2012

I am trying to integrate FusionMaps and FusionCharts on the same page.

I am using below to include javascript for both of them on a page:

But I am getting "Chart type not supported" for FusionMaps. But if I change the sequence of abobe JS include file. I get same error for FusionCharts. I am including my whole code below:

<head>

<title>Multi Charts</title>

<script type="text/javascript" src="resources/charts/FusionCharts/FusionCharts.js"> </script>

<script type="text/javascript" src="resources/Maps/FusionMaps.js"></script>

FusionCharts.setCurrentRenderer('javascript');

var myMap = new FusionCharts("resources/Maps/FCMap_USA.swf", "myMapId", "750", "450", "0");

$(document).ready(function(e) {

fillChart();

});

function fillChart()

{

$.getJSON("getCharts.cfc?method=getFusionChart&batchId=82642&"+$('form').serialize()+" &returnformat=json&queryformat=column", {}, function(res,code){

$('#div_AVERAGECALLTIME').html(res.DATA.AVERAGECALLTIME[0])

$('#div_CALLRESULTPERHOUR').html(res.DATA.CALLRESULTPERHOUR[0])

$('#div_CALLRESULT').html(res.DATA.CALLRESULT[0])

$('#div_CALLTIMEDISTRIBUTION').html(res.DATA.CALLTIMEDISTRIBUTION[0])

myMap.setXMLData(res.DATA.MAP[0]);

myMap.render("mapContainer");

});

}

</script>

</head>

<body>

<div id="mapContainer">FusionMaps XT will load here!</div> <br />

</div>

</body>

</html>

Can anybody please help and tell me what I am doing wrong here? Thanks!!

September 12, 2012

Hi,

To display a chart (FusionCharts XT) and a map (FusionMaps XT) on same page, you would have to create two separate instances of FusionCharts.

Ref. Code:

var myChart = new FusionCharts("FusionCharts/Column3D.swf", "myChartId", "500", "350", "0", "1");

var myMap = new FusionCharts("FusionCharts/FCMap_World.swf", "myMapId", "500", "350", "0", "1");

Also, you would have to create two separate div for rendering the map and the chart.

Please note, you would need to include necessary JavaScript libraries to render a map and chart, into your project folder.

Please refer the following code:

Ref. Code:


<html>
<head>
	<title>Chart and Map on Same Page - Using FusionCharts XT, FusionMaps XT</title>
	<script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
</head>
<body>
	<div id="chartContainer"></div>
	<div id="mapContainer"></div>
	<script type="text/javascript">

		FusionCharts.setCurrentRenderer("javascript");

		var myChart = new FusionCharts("FusionCharts/Column3D.swf", "myChartId", "500", "350", "0", "1");
		myChart.setXMLUrl("Data/ChartData.xml");
		myChart.render("chartContainer");

		var myMap = new FusionCharts("FusionCharts/FCMap_World.swf", "myMapId", "500", "350", "0", "1");
		myMap.setXMLUrl("Data/MapData.xml");
		myMap.render("mapContainer");

	</script>
	</body>
</html>

Also, refer the following URL's for more information:

http://docs.fusioncharts.com/charts/contents/?FirstChart/FirstChart.html

http://docs.fusioncharts.com/maps/Contents/?FirstMap/first_chart.html

Sign In

Problem While Including Fusioncharts.js For Fusionmaps And Fusioncharts On Same Page

Recommended Posts

dkyadav

Share this post

Link to post

Share on other sites

Guest Sumedh

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