CODEWITHSUNDEEP
javascriptjqueryhighchartsupgrade
chiperortiz
chiperortiz

Reputation: 4991

Highcharts not working after jquery upgrade

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

Upvotes: 0

Views: 2650

Answers (1)

Jugal Thakkar
Jugal Thakkar

Reputation: 13472

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.

Upvotes: 3

Related Questions