I am using highChart and highMap with div's created as slides.We are using jquery cycle 2 for the slide effect.
After certain time, the charts are overlapping in Mozilla. But in Chrome hidden slides chart disappears,but legend are present. Image Link is given below.
Sample Code:
jsp code:
<div id="cycle-slideshow" style="width: 100%;">
<div class="container-fluid animated" id="container_<%=i%>" style="opacity: 0.01;width: 100%;">
<div class="row">
<div class="container-fluid" id="container">
<div class="row border-bottom">
<nav class="navbar navbar-static-top white-bg main_header" role="navigation" style="margin-bottom: 0">
<div class="header" id="header">
<div class="col-lg-12" style="max-height:25px">
<div class="col-lg-6">
<h2 >
<s:property value="name" escape="false"/>
</h2>
</div>
<div class="col-lg-6">
<h4 class="pull-right push-bottom" style="margin-top:25px;">
<span class="timeData" style="text-align:center;"></span>
</h4>
</div>
</div>
</div>
</nav>
</div>
<!-------------------header end------------------------>
<!-------------------------graph and stream area---------------------------->
<!----------------------left panel start-------------------->
<div class="wrapper wrapper-content" style="padding: 6px 5px 20px !important;">
<div class="row">
<div class="col-lg-9" id="graph_area">
<div class="row_custom">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins" style="margin-bottom:14px;">
<div class="ibox-title graph_header">
<h5><s:property value="settings[1].elementName" escape="false"/></h5>
</div>
<div class="ibox-content" style="padding-bottom:4px;">
<div class="row">
<div class="col-lg-12" style="padding:4px;" id="<s:property value="settings[1].elementId"/>_<s:property value="settings[1].id"/>_<s:property value="id"/>" >
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" >
<div class="col-lg-6">
<div class="row" style="margin-left:1px!important;">
<div class="ibox float-e-margins">
<div class="ibox-title graph_header">
<h5><s:property value="settings[3].elementName"/></h5>
</div>
<div class="ibox-content" style="padding-bottom:4px;">
<div class="row" >
<div class="col-lg-12" id="<s:property value="settings[3].elementId"/>_<s:property value="settings[3].id"/>_<s:property value="id"/>" style="display:inline-block;">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="ibox float-e-margins">
<div class="ibox-title graph_header">
<h5><s:property value="settings[4].elementName"/></h5>
</div>
<div class="ibox-content" style="padding-bottom:14px;">
<div class="row">
<div class="col-lg-12" style="padding:4px;display:inline-block;" id="<s:property value="settings[4].elementId"/>_<s:property value="settings[4].id"/>_<s:property value="id"/>" >
//area for map
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------left panel End-------------------->
<!----------------------right panel start-------------------->
<div class="col-lg-3" id="data_stream_div" >
<div class="row">
<div class="ibox float-e-margins">
<div class="ibox-title graph_header">
<h5><s:property value="settings[2].elementName"/></h5>
</div>
<div class="ibox-content" id="temp_1_stream" style="padding-left:1px!important;">
<div>
<div class="feed-activity-list" style="padding:4px;" id="<s:property value="settings[2].elementId"/>_<s:property value="settings[2].id"/>_<s:property value="id"/>" >
//area for table
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------right panel End---------------------->
</div>
</div>
<!---------------------graph area------------------>
</div>
</div>
</div>
<div class="container-fluid animated" id="container_<%=i%>" style="opacity: 0.01;width: 100%;">
<div class="row">
<div class="container-fluid" id="container">
<div class="row border-bottom">
<nav class="navbar navbar-static-top white-bg main_header" role="navigation" style="margin-bottom: 0">
<div class="header" id="header">
<div class="col-lg-12" style="max-height:25px">
<div class="col-lg-6">
<h2 >
<s:property value="name" escape="false"/>
</h2>
</div>
<div class="col-lg-6">
<h4 class="pull-right push-bottom" style="margin-top:25px;">
<span class="timeData" style="text-align:center;"></span>
</h4>
</div>
</div>
</div>
</nav>
</div>
<!-------------------header end------------------------>
<!-------------------------graph and stream area---------------------------->
<!----------------------left panel start-------------------->
<div class="wrapper wrapper-content" style="padding: 6px 5px 20px !important;">
<div class="row">
<div class="col-lg-9" id="graph_area">
<div class="row_custom">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins" style="margin-bottom:14px;">
<div class="ibox-title graph_header">
<h5><s:property value="settings[1].elementName" escape="false"/></h5>
</div>
<div class="ibox-content" style="padding-bottom:4px;">
<div class="row">
<div class="col-lg-12" style="padding:4px;" id="<s:property value="settings[1].elementId"/>_<s:property value="settings[1].id"/>_<s:property value="id"/>" >
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" >
<div class="col-lg-6">
<div class="row" style="margin-left:1px!important;">
<div class="ibox float-e-margins">
<div class="ibox-title graph_header">
<h5><s:property value="settings[3].elementName"/></h5>
</div>
<div class="ibox-content" style="padding-bottom:4px;">
<div class="row" >
<div class="col-lg-12" id="<s:property value="settings[3].elementId"/>_<s:property value="settings[3].id"/>_<s:property value="id"/>" style="display:inline-block;">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="ibox float-e-margins">
<div class="ibox-title graph_header">
<h5><s:property value="settings[4].elementName"/></h5>
</div>
<div class="ibox-content" style="padding-bottom:14px;">
<div class="row">
<div class="col-lg-12" style="padding:4px;display:inline-block;" id="<s:property value="settings[4].elementId"/>_<s:property value="settings[4].id"/>_<s:property value="id"/>" >
//area for piechart
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------left panel End-------------------->
<!----------------------right panel start-------------------->
<div class="col-lg-3" id="data_stream_div" >
<div class="row">
<div class="ibox float-e-margins">
<div class="ibox-title graph_header">
<h5><s:property value="settings[2].elementName"/></h5>
</div>
<div class="ibox-content" id="temp_1_stream" style="padding-left:1px!important;">
<div>
<div class="feed-activity-list" style="padding:4px;" id="<s:property value="settings[2].elementId"/>_<s:property value="settings[2].id"/>_<s:property value="id"/>" >
//area for table
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------right panel End---------------------->
</div>
</div>
<!---------------------graph area------------------>
</div>
</div>
</div>
</div>
code for slider:
function getslider(){
$('#cycle-slideshow').cycle({
timeout: 90000,
slides: '> div',
fx:'fade'
});
$( '#cycle-slideshow' ).on( 'cycle-after', function( event, opts ) {
console.log("lastRunTime "+lastRunTime);
console.log("timedifference "+((lastRunTime-event.timeStamp)/1000));
lastRunTime=event.timeStamp;
});
}
code for piechart:
function getShareOfVoice() {
$.ajax({
type:"POST",
dataType:"json",
url:'<s:url value="XXXXXX',
data:{sampledata : sampledate},
cache: false,
async:"false",
success:function(data) {
console.log("in success for share of voice");
var vals = JSON.parse(JSON.stringify(data));
if(vals.data.length>0){
var dataArray = vals.data;
var overallseries = [];
overallShareOfVoiceOptions.chart.renderTo = divid;
for ( var pos = 0; pos < dataArray.length; pos++) {
var d = dataArray[pos];
var dd = {};
var legend_icon = " ";
if (d.pic != null
&& typeof d.pic !== "undefined"
&& d.pic.length > 0) {
legend_icon = '<img style="width: 45px; height: 30px" src="'+d.pic+'" >';
} else {
legend_icon = d.name;
}
dd.color = d.cssStyle;
dd.y = d.count;
dd.name = legend_icon;
overallseries.push(dd);
}
overallShareOfVoiceOptions.series[0].data = overallseries;
if (overallseries.length > 0) {
var shareOfVoiceOverallGraph = new Highcharts.Chart(
overallShareOfVoiceOptions);
}
if (draw !== true) {
progressbar(divid);
}
setTimeout(function() {
getShareOfVoice();
}, 5 * 60 * 1000);
}
},error:function(data){
setTimeout(function() {
getShareOfVoice();
}, 2 * 60 * 1000);
}
});
}
code for highMap:
function getRegionChart() {
$.ajax({
type:"POST",
url:'XXXXXXXXXXXXXXXX',
dataType:'json',
data : {sampledata : sampledata},
success : function(data){
var regions = JSON.parse(JSON.stringify(data));
if(regions.length > 0){
$('#' + divid).highcharts('Map',{
title : {
text : null
},
subtitle : {
text : null
},
mapNavigation : {
enabled : false,
buttonOptions : {
verticalAlign : 'bottom'
}
},
legend : {
align : 'left',
layout : 'vertical',
verticalAlign : 'middle',
y : 10,
floating : true,
borderWidth : 0,
backgroundColor : 'white',
},
colorAxis : {
min : 0,
minColor : '#cccc00',
maxColor : '#666600'
},
navigation : {
menuItemStyle : {
fontSize : '10px'
},
buttonOptions : {
enabled : false
}
},
credits : {
enabled : false
},
series : [ {
data : regions,
mapData : Highcharts.maps['countries/in/custom/in-all-disputed'],
joinBy : 'hc-key',
name : 'State',
states : {
hover : {
color : '#BADA55'
}
},
dataLabels : {
enabled : true,
formatter : function() {
if(!(this.point.options["show"]))
return;
return this.point.value+ "%";
}
}
} ]
});
setTimeout(function() {
getRegionChart();
}, 5*60 *1000);
}
},error : function(data) {
setTimeout(function() {
getRegionChart();
},2*60 * 1000);
}
});
}