Highcharts not working after jquery upgrade

Question

we have some graphics using

highcharts 2.5.1 back in 2011 bundled with Jquery 1.4.2

and everything works OK but we save some other javascript plugins and they we need to upgrade them as well latest releases have some bug fixed and we want to take advantage of them and they also need Jquery upgrade as well but when i upgrade to latest jquery version

jquery-1.11.1.min then highcharts seems not longer works??

what can i do to make it works as using JQuery 1.4.2

sample code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Example</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>      
    <script type="text/javascript" src="../js/highcharts.js"></script>
    <script type="text/javascript">

        var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'bar'
                },
                title: {
                    text: 'Stacked bar chart'
                },
                xAxis: {
                    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Total fruit consumption'
                    }
                },
                legend: {
                    backgroundColor: '#FFFFFF',
                    reversed: true
                },
                tooltip: {
                    formatter: function() {
                        return ''+
                             this.series.name +': '+ this.y +'';
                    }
                },
                plotOptions: {
                    series: {
                        stacking: 'normal'
                    }
                },
                    series: [{
                    name: 'John',
                    data: [5, 3, 4, 7, 2]
                }, {
                    name: 'Jane',
                    data: [2, 2, 3, 2, 1]
                }, {
                    name: 'Joe',
                    data: [3, 4, 4, 2, 5]
                }]
            });                         
        });             
    </script>       
</head>
<body>
    <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>

generates the right output

使用JQuery 1.4.2

if i change the JQuery version like this

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

generates something like.

i see something like

使用jQuery 1.11

also tested con JQuery 1.10

Answer 1

Check the compatibility page of highcharts

jQuery  

1.4.3 - 1.10.x for all browsers.
2.0.x for modern browsers.

Try using 1.10.x if you can. If you still see the issue, I would suggest create a jsFiddle demonstration of the issue & report here. SO Experts or Highcharts support team can assist you while you are using an officially supported version of jQuery.

EDIT

Your code works well, check out @ http://jsfiddle.net/jugal/9g3679zk/

You may also need to upgrade the Highcharts js

EDIT 2

Using Highcharts 2.1.5 @ http://jsfiddle.net/jugal/9g3679zk/1/ The charts don't load as you have showed, on resizing window it does redraw and chart comes up.

Upgrading to 2.2 seems to fix it @ http://jsfiddle.net/jugal/9g3679zk/2/ You most likely should be at be able to upgrade from 2.1 to 2.2 with your existing license.

Highcharts not working after jquery upgrade

Question

1 answers

solution1
3 ACCPTED 2014-09-21 14:59:07

Highcharts not working after jquery upgrade

Question

1 answers

solution1 3 ACCPTED 2014-09-21 14:59:07

solution1
3 ACCPTED 2014-09-21 14:59:07