display two charts with IE
Question
I can't display 2 charts with IE while it works with Chrome and FF. Only one chart is displayed. Here my code :
function pie() {
$('#pie_projet').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Nombre de projet ANRU par communes'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
connectorColor: '#000000',
style: {
fontSize: '8px',
color: 'black'
},
format: '<b>{point.name}</b>: {point.y}'
}
}
},
colors: [<?php echo join($tabSliceColor,',') ?>],
series: [{
type: 'pie',
name: 'Nb projet',
//document.getElementsByName(data_pie)[0].value
data: [<?php echo join($data_pie, ',') ?>]
}]
});
};
function groupBar() {
$('#bar_projet').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Nombre d\'opérations par année et par type d opérations ANRU'
},
subtitle: {
text: 'Source: Valenciennes Métropole'
},
xAxis: {
categories: [<?php echo join($legend_bar,',') ?>],
title: {
text: null
},
labels: {
rotation: -45,
style: {
fontSize: '9px'
}
}
},
yAxis: [{
min: 0,
max: 200,
labels: {
style: {
color: 'red'
}
},
title: {
text: 'Nombre total d\'opérations',
align: 'middle'
},
labels: {
overflow: 'justify'
},
opposite: true
},
// second yAxis
{
min: 0,
max: 10,
labels:{
style :{
color: 'red'
}
},
title: {
text: 'Nombre d\'opérations',
align: 'middle'
},
labels: {
overflow: 'justify'
}
}],
tooltip: {
valueSuffix: ' opérations'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 50,
y: 60,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true,
itemStyle: {
color: 'black',
fontSize: '7px'
}
},
colors: [<?php echo join($tabOpColor,',') ?>],
plotOptions: {
series: {
animation: false
},
spline: {
dataLabels: {
enabled: true,
crop : false // permet de ne pas bloquer l'affichage d'un label si hot
}
}
},
series: [<?php echo join($series_bar,',') ?>,<?php echo $line_data?>]
});
};
I call the 2 fonctions like this :
<BODY onLoad ='pie();groupBar();'>
The charts are put in DIV :
<div id='bar_projet' style='min-width: 400px; height: 400px; margin: 0 auto'></div>
<div id='pie_projet' style='min-width: 400px; height: 400px; margin: 0 auto'></div>
With IE I see only one chart , the second one and with Chrome and FF I see both of them.
Thanks for your help !
2 answers
solution1
0 2013-09-27 13:20:27
Have you tried initialising it on load using jquery instead of in the body onLoad ?
$(function () {
pie();
groupBar();
}
solution2
0 2013-09-27 13:25:21
This problem occurs only in IE and not in any other browser right??? Using inspector check the id of the tags associated with your chart they are probably repeating (for example check your loading div's id) that is where I usually make my mistake.
It is because IE goes nuts when two tags have the same id.
Hope it helps
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.