How to resolve Highcharts rendering error in Internet Explorer?

Asked

Viewed 123 times

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:

Gráfico não é completamente exibido no IE 11

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:

Exibido sem erros no 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?

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.