2
I’m having problems with a Highcharts chart in Internet Explorer (I tested versions 9 and 11). Same chart displays error-free in Firefox and Chrome.
Look at the problem below:
I noticed that the problem occurs when I have a large amount of data to display on the screen. Each data group (dates, series A, series B, series C) has approximately 8,000 records (data are given every 5 minutes from day 15/09 to day 15/10). I also noticed that the dots are there, even in IE, but the lines stop being rendered unexpectedly.
If I decrease the amount of data by taking another period, for example, the graph is displayed smoothly in IE:
Follows my code:
<script type="text/javascript">
$(function() {
var intervaloDatas = '<%= intervaloDatasSplit %>';
var intervaloGrandezaA = '<%= intervaloGrandezaASplit %>';
var intervaloGrandezaB = '<%= intervaloGrandezaBSplit %>';
var intervaloGrandezaC = '<%= intervaloGrandezaCSplit %>';
var labelCanalA = 'Kw';
var labelCanalB = 'kVar Ind';
var labelCanalC = 'kVAr Cap';
var cliente = '949085';
var seriesOne = new Array();
seriesOne = intervaloDatas.split(',');
var seriesA = new Array();
seriesA = intervaloGrandezaA.split(',');
var seriesB = new Array();
seriesB = intervaloGrandezaB.split(',');
var seriesC = new Array();
seriesC = intervaloGrandezaC.split(',');
var dataA = new Array(seriesOne.length);
var dataB = new Array(seriesOne.length);
var dataC = new Array(seriesOne.length);
for (var i = 0; i < seriesOne.length; i++) {
dataA[i] = new Array(2);
dataA[i][0] = Date.parse(seriesOne[i]);
dataA[i][1] = parseFloat(seriesA[i]);
}
for (var i = 0; i < seriesOne.length; i++) {
dataB[i] = new Array(2);
dataB[i][0] = Date.parse(seriesOne[i]);
dataB[i][1] = parseFloat(seriesB[i]);
}
for (var i = 0; i < seriesOne.length; i++) {
dataC[i] = new Array(2);
dataC[i][0] = Date.parse(seriesOne[i]);
dataC[i][1] = parseFloat(seriesC[i]);
}
Highcharts.setOptions({
lang: {
months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
shortMonths: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
weekdays: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
loading: ['Atualizando o gráfico...aguarde'],
contextButtonTitle: 'Exportar gráfico',
decimalPoint: ',',
thousandsSep: '.',
downloadJPEG: 'Baixar imagem JPEG',
downloadPDF: 'Baixar arquivo PDF',
downloadPNG: 'Baixar imagem PNG',
downloadSVG: 'Baixar vetor SVG',
printChart: 'Imprimir gráfico',
rangeSelectorFrom: 'De',
rangeSelectorTo: 'Para',
rangeSelectorZoom: 'Zoom',
resetZoom: 'Limpar Zoom',
resetZoomTitle: 'Voltar Zoom para nível 1:1'
}
});
$('#container').highcharts({
chart: {
zoomType: 'x',
borderWidth: 2,
borderRadius: 20,
plotBorderColor: "DodgerBlue"
},
credits:
{
enabled: false
},
exporting: {
buttons: {
contextButtons: {
enabled: false,
menuItems: null
}
},
enabled: false
},
title: {
text: 'Curva de Carga - Cliente: ' + cliente
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
}
},
yAxis: {
text: null
},
legend: {
enabled: true
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'line',
name: labelCanalA,
data: dataA,
color: "#008000"
},
{
type: 'line',
name: labelCanalB,
data: dataB,
color: "#0000FF"
},
{
type: 'line',
name: labelCanalC,
data: dataC,
color: "#FF0000"
}]
});
});
</script>
The data is being sent by code Behind, in the format below:
public String intervaloDatasSplit { get; set; }
public String intervaloGrandezaASplit { get; set; }
public String intervaloGrandezaBSplit { get; set; }
public String intervaloGrandezaCSplit { get; set; }
intervaloDatasSplit = "9/16/2015 12:50:00 AM,9/16/2015 12:55:00 AM,9/16/2015 1:00:00 AM";
intervaloGrandezaASplit = "12.67,12.96,11.81";
intervaloGrandezaBSplit = "5.18,4.9,4.9";
intervaloGrandezaCSplit = "0,0,0";
Note: I am only informing the first 3 data of each range for illustrative purposes.
Someone’s been through something like this?