dkyadav

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

Recommended Posts

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:

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

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

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:

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Multi Charts</title>

<script type='text/javascript' src='resources/js/jquery.js'></script>

<script type='text/javascript' src='resources/js/jqueryui.js'></script>

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

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

 

<link rel="stylesheet" type="text/css" href="resources/css/main.css" />

 

<script type="text/javascript">

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="outer" style="width:100%">

<div id="inner">

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

<div id="div_AVERAGECALLTIME" class="blocks"></div>

<div id="div_CALLRESULTPERHOUR" class="blocks"></div><br />

<div id="div_CALLRESULT" class="blocks"></div>

<div id="div_CALLTIMEDISTRIBUTION" class="blocks"></div>

</div>

</div>

</body>

</html>

 

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

Share this post


Link to post
Share on other sites
Guest Sumedh

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

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