CODEWITHSUNDEEP
javascriptjqueryhighcharts
Ravi Chinoy
Ravi Chinoy

Reputation: 165

How to dynamically load highcharts

I am trying to load highcharts dynamically as shown in below code: It is not able to recognize highcharts variable. If I load highcharts by static means, it works. Please help.

I am using jquery version 4 and highcharts latest version 1.0

<html>
<head>
//loading jquery
<script src="js/libs/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
var chart1;

$(document).ready(function() {
$.getScript('js/libs/highcharts.src.js', function() {

            });


  chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'chart1',
            type: 'bar'
         },
         title: {
            text: 'Fruit Consumption'
         },
         xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
         },
         yAxis: {
            title: {
               text: 'Fruit eaten'
            }
         },
         series: [{
            name: 'Jane',
            data: [1, 0, 4]
         }, {
            name: 'John',
            data: [5, 7, 3]
         }]
      });
   });


</script>


</head>

<body>
<div id="chart1"></div>

</div>
</body>
</html>

Upvotes: 3

Views: 3645

Answers (1)

mVChr
mVChr

Reputation: 50177

$.getScript() is an asynchronous operation, meaning it will go fetch the script but won't wait for it to be done before processing the rest of the code. Therefore you need to wait for some sort of indication that the code has been retrieved. If you look at the docs you will notice that $.getScript() has a success callback function just for this purpose. In fact, you already have an empty success function in your code, just move the Highcharts declaration there. In other words, do this:

$(document).ready(function() {
    $.getScript('js/libs/highcharts.src.js', function() {
        chart1 = new Highcharts.Chart({
            // Highcharts options
        });
    });
});

Upvotes: 12

Related Questions