Home/ Questions/Q 7194259
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T20:20:07+00:00

I am trying to load highcharts dynamically as shown in below code: It is

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    $.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
        });
    });
});
    • 0