笑的自然

Fusionmaps Problems, Events, Reload Json Data, Cannot Working ....

Recommended Posts

When i click change it, i hope, it could change color for every entity.

 

test code is below...

 

please change js path after next code saved as html.

 

please tell me why? thank you.

<!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>Sales Dashboard | FusionCharts</title>
<script type="text/javascript">
function FC_Event(DOMId, eventType, objParams){
if (eventType=="rollOver"){
	document.getElementById("content").innerHTML = "You rolled over entity with id as " + objParams.id + " having name as " + objParams.lName + " ("+ objParams.sName +  ") and value as " + objParams.value;
}else{
	document.getElementById("content").innerHTML = "Please roll over an entity to see details.";
}
}
</script>
</head>

<body onload="addversion();">
<div id="details"> </div>
<div id="pastdetails"> </div>
<div id="mapContainer" align="center" style="background-color:#5882a8;padding:20px;">FusionMaps XT will load here!</div>
<div id='content'>Please roll over an entity   to see details.</div>
<input type="button" onClick="changeIt();" value="Change It">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="Charts/FusionCharts.js"></script>
<script type="text/javascript" src="Charts/FusionCharts.jQueryPlugin.js"></script>
<script type="text/javascript" src="PowerMap.js"></script>
<script type="text/javascript" src="release-v.js"></script>
<script type="text/javascript">
$(function(){
var defalutCfg = {
	"animation":"0",
	"showlabels":"1",
	"showmarkerlabels":"1",
	"showtooltip":"1",
	"showbevel": "0",
	"showshadow": "0",
	"showexportdatamenuitem": "1",
	"showprintmenuitem": "1",
	"showcanvasborder": "1",
	"borderthickness": "1",
	"exportenabled": "1",
	"exposehoverevent": "1",
	"bordercolor": "005879",
	"fillcolor": "ffffff",//d7f4ff
	"basefont":"Verdana",
	"basefontsize": "12",
	"basefontcolor":"333333",
	"numbersuffix": "m",
	"includevalueinlabels": "1",
	"labelsepchar": ":",
	"legendposition":"bottom",
	"usehovercolor":"1",
	"numberprefix":"$",
	"thousandseparatorposition":"0",
	//"hovercolor": "e6eaee",
	"tooltipbgcolor": "ffffff",
	"tooltipbordercolor": "cad3db",
	"bgcolor":"84b1c6",
	"canvasbordercolor": "375277",
	"canvasborderalpha": "15"
};

var initDataArr = [
	{"id": "NA", "value": "515.1231", "displayValue":'北美: 515 M\n笑的自然测试哦', "toolText":"北美: 515 M\nxx" },
	{"id": "SA", "value": "371233"}, //, "color":"FF9377"
	{"id": "AS", "value": "3875"},
	{"id": "EU", "value": "721237"}, //,"color":'A7E9BC' , "color":'0000FF',"fontColor":"FFFFFF"
	{"id": "AF", "value": "881215"},
	{"id": "AU", "value": "321231"}
];

var cfg = {
	swfUrl: "Maps/FCMap_World.swf", 
	id: "myMapId", 
	width: "880", 
	height: "400", 
	dataFormat: "json", 
	dataSource: {
		"map": defalutCfg,
		"data": initDataArr
	}
};

$("#mapContainer").insertFusionCharts(cfg);

//console.log(cfg)


$("#mapContainer").bind( "fusionchartsentityrollover", function (e, args) { 
	$("#details").html( "You are over entity named: "+ args.label + " with value: " + args.value );
}).bind( "fusionchartsentityrollout", function (e, args) { 
	$("#pastdetails").html( "You are out of entity named: "+ args.label + " with value: " + args.value );
});

});

function changeIt(){
var id = "NA,SA,AS,EU,AF,AU".split(",")[Math.floor(Math.random() * 6)];
setCurrent(id);
}

function setCurrent(id) {
var color = "FFFFFF", font_color = "333333";
var actived_color = "0000FF", actived_font_color = "FFFFFF";//FF9377

//for (var i = 0; i < initDataArr.length ; i++ ) {
//	initDataArr[i].color = id == initDataArr[i].id ? actived_color : color;
//	initDataArr[i].fontColor = id == initDataArr[i].id ? actived_font_color : font_color;
//}
//$("#mapContainer").updateFusionCharts(cfg);

var mapReference = FusionCharts.items["myMapId"]; 
var mapJSON = mapReference.getJSONData();
for (var i = 0; i < mapJSON.data.length ; i++ ) {
	mapJSON.data[i].color = (id == mapJSON.data[i].id) ? actived_color : color;
	mapJSON.data[i].fontcolor = (id == mapJSON.data[i].id) ? actived_font_color : font_color;
}
//console.log(mapJSON)
//mapReference.setJSONData(mapJSON);
mapReference.setChartData(mapJSON, "json");
   //mapReference.render("mapContainer");
}
</script>	
<div align="center" class="text">This dashboard was created using <a href="http://www.fusioncharts.com" target="_blank" id="fcXtVersion" >FusionCharts XT</a>, <a href="http://www.fusioncharts.com/products/suite/fusionwidgets-xt/" target="_blank" id="fwXtVersion">FusionWidgets XT</a> and   <a href="http://www.fusioncharts.com/products/suite/fusionmaps/" target="_blank" id="fmXtVersion">FusionMaps XT</a></div>
</body></html>

Share this post


Link to post
Share on other sites
Guest Sashibhusan

Hi,

 

I am afraid, the "color Change functionality is working fine" using your code and FusionMaps XT V3.3.0 evaluation files, from our end.

 

Please find the attached screen shot of the same and the sample for your reference.

 

Could you please check the sample at your end and share your feedback?

Event_colorChange.zip

post-23588-0-85096400-1364216159_thumb.png

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