Sign in to follow this  
笑的自然

Why Event Rollover And Rollout Cannot Work In Ie9/ie8/chrome

Recommended Posts

<!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>
<link  rel='stylesheet' href="Contents/Style.css" />


</head>

<body onload="addversion();">
<div id="details"> </div>
<div id="pastdetails"> </div>
<div id="mapContainer" align="center" style="background-color:#5882a8;padding:80px;"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script language="JavaScript" src="Charts/FusionCharts.js"></script>
<script language="JavaScript" src="PowerMap.js"></script>
<script language="JavaScript" src="release-v.js"></script>
<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>
<script type="text/javascript">
var map = new FusionCharts("Maps/FCMap_World.swf", "myMapId", "880", "400", "0", "1");
//map.setDataURL("Data/Maps/RegionWiseSales_zh.xml"); 
map.setJSONData({
"map": {
	"animation":"1",
	"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"
},
"data": [
	{"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'},
	{"id": "AF", "value": "881215"},
	{"id": "AU", "value": "321231"}
]
});
map.render("mapContainer");

function myChartListener1(eventObject, argumentsObject){
  $("#details").html( "You are over entity named: "+ argumentsObject.label + " with value: " + argumentsObject.value );
}
FusionCharts("myMapId").addEventListener ("EntityRollover" , myChartListener1 );

function myChartListener2(eventObject, argumentsObject){
 $("#pastdetails").text( "You are out of entity named: "+ argumentsObject.label + " with value: " + argumentsObject.value );
}
FusionCharts("myMapId").addEventListener ("EntityRollout" , myChartListener2 );

</script>	
<div id='content'>Please roll over an entity   to see details.</div>
<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 Rollover and Rollout events are working fine using your code and FusionMaps XT V3.3.0 evaluation files, in IE8, IE9 and Chrome, from our end.

 

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

 

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

 

Awaiting your response!

Event_Rollover.zip

post-23588-0-15019000-1364203318_thumb.png

Share this post


Link to post
Share on other sites

Hi Team,
 
Thanks for the solution you provided.
But I was not able to get the result in IE8/ IE9 or chrome.
I was getting the result in FireFox.
Please help me out in fixing this issue.
 
Attached is the screenshot for reference.

 

Thank You.

 

Regards

Prashant.

post-48816-0-00170100-1373211245_thumb.png

Share this post


Link to post
Share on other sites
Guest Sumedh

Hi Prashant,

 

From the screen-shot, it seems you are trying to load the sample directly (through local system).

 

Could you please try loading the sample through local server? (like XAMPP, IIS etc.)

 

Also, if you want to load the Flash chart through local system, then you would need to configure the Flash Player Global Security settings.

 

For more information, please refer the following link:

http://docs.fusioncharts.com/charts/Tools/FlashPlayerSecuritySetup/HowToSetup.html

 

Hope this helps!

Share this post


Link to post
Share on other sites

Hi Sumedh and Team,

 

I tried editing the global settings as mentioned in the above link. But still no luck. 

Could you please guide me what else I might need to do?

 

Thank You.

 

Regards,

Prashant.

Share this post


Link to post
Share on other sites

Hi Prashant,

 

Could you please verify if your Chrome browser is using Adobe Flash Player and not Pep Flash Player (default for Chrome)? You may disable Pep and use Adobe Flash player by going to plugins and clicking on disable link. You may refer screenshot1 for the same.

 

Also, please check if the folder "Event_Rollover" is present in the Flash Player Global Security settings. You may refer screenshot2 for the same. 

 

Hope this helps.

 

 

post-37797-0-18083600-1373891106_thumb.png

post-37797-0-25790000-1373891116_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
Sign in to follow this