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

Using 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

Using jQuery 1.11

also tested con JQuery 1.10

what is the issue that you are seeing? Any errors in the javascript console? Please provide adequate information in the question — Jugal Thakkar
i dont see the graphics and in other graphics the data is not displayed. — chiperortiz
Code works well with the latest highcharts and jquery jsfiddle.net/jugal/9g3679zk What version of highcharts are you using? Update it to the latest available version as per your license — Jugal Thakkar

Jugal Thakkar Jugal Thakkar · Accepted Answer · 2014-09-21T14:59:07

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

1 Answers