CODEWITHSUNDEEP
javascriptjqueryhighcharts
hhh
hhh

Reputation: 167

Loading JQuery dynamically but highcharts fails

I am not really a javascript programmer but I have been struggling for a long time with this problem - any help would be very much appreciated.

In the following jsfiddle - if Jquery is selected from the frameworks and extensions tab the highcharts chart works fine. But the point of the code is I need to dynamically load a different jquery version - to use the chart as a widget of sorts. But changing it to no library (pure JS) the chart does not load.

http://jsfiddle.net/hgera000/JcVLQ/3/

A large part of my code I'm getting from here: http://alexmarandon.com/articles/web_widget_jquery/

Thanks very much

(function() {

// Localize jQuery variable
var jQuery;

/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.7.2') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src",
    "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js");
if (script_tag.readyState) {
  script_tag.onreadystatechange = function () { // For old versions of IE
      if (this.readyState == 'complete' || this.readyState == 'loaded') {
          scriptLoadHandler();
      }
  };
 } else {
  script_tag.onload = scriptLoadHandler;
 }
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
// The jQuery version on the window is the one we want to use
  jQuery = window.jQuery;
  main();
}

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
// Restore $ and window.jQuery to their previous values and store the
// new jQuery in our local jQuery variable
jQuery = window.jQuery.noConflict(true);
// Call our main function
 main(); 
  }

   /******** Our main function ********/
    function main() {

     var chart;
     jQuery(document).ready(function($) { 

    /******* Load CSS *******/
    var css_link = $("<link>", { 
        rel: "stylesheet", 
        type: "text/css", 
        href: "style.css" 
    });
    css_link.appendTo('head');          

    /******* Load HTML *******/

        chart = new Highcharts.Chart({
             credits: {
                 enabled: true,
                 text: '',
                 href: ''
             },
             chart: {
                 renderTo: 'bm-container',
                 events: {
                     click: function () {
                         window.open('http://www.betmetrix.com', '_blank')
                     },
                 },
                 backgroundColor: '#FFFFFF',
                 zoomType: 'xy',
                 type: 'line',
                 marginLeft: 40,
                 marginRight: 40,
                 marginBottom: 40,
             },
             title: {
                 text: 'Election Worm',
                 x: -5,
                 style: {
                     color: '#000000',
                     fontWeight: 'bold',
                     fontSize: '17pt'
                 }
             },
             subtitle: {
                 text: 'Estimated Probability of Victory',
                 x: -5,
                 style: {
                     color: '#000000',
                     //fontWeight: 'bold',
                     fontSize: '13pt'
                 }
             },
             xAxis: {
                 type: 'datetime',
                 minRange: 7 * 24 * 3600000, // 1 week
                 dateTimeLabelFormats: {
                     second: '%H:%M:%S',
                     minute: '%H:%M',
                     hour: '%H:%M',
                     day: '%e %b',
                     week: '%e %b',
                     month: '%b \'%y',
                     year: '%Y'
                 },
                 //max: lnp[lnp.length-1][0]+604800000,
                 //tickInterval: 24*3600*1000*120,
                 //showFirstLabel: false,
                 minTickInterval: 1 * 24 * 3600000, //1 day
                 //maxTickInterval: 1 * 24 * 3600000*365, //30 day
                 startOnTick: false,
                 labels: {
                     style: {
                         color: '#969696',
                         //fontWeight: 'bold',
                         fontSize: '11pt'
                     }
                 }
             },
             yAxis: [{
                 //LHS axis
                 title: {
                     text: '%',
                     align: 'high',
                     rotation: 0,
                     offset: 10,
                     style: {
                         color: '#969696',
                         //fontWeight: 'bold',
                         fontSize: '11pt'
                     }
                 },
                 labels: {
                     style: {
                         color: '#969696',
                         //fontWeight: 'bold',
                         fontSize: '11pt'
                     }
                 },
                 showLastLabel: false,
                 showFirstLabel: false,
                 minRange: 3,
                 minTickInterval: 1,
                 min: 0,
                 max: 100,
                 opposite: false,
                 startOnTick: true,
                 //tickInterval: 5,
                 allowDecimals: false
             }, {
                 //RHS axis
                 title: {
                     text: '%',
                     align: 'high',
                     rotation: 0,
                     offset: 20,
                     style: {
                         color: '#969696',
                         //fontWeight: 'bold',
                         fontSize: '11pt'
                     }
                 },
                 linkedTo: 0,
                 labels: {
                     style: {
                         color: '#969696',
                         //fontWeight: 'bold',
                         fontSize: '11pt'
                     }
                 },
                 showLastLabel: false,
                 minTickInterval: 1,
                 minRange: 3,
                 showFirstLabel: false,
                 startOnTick: true,
                 min: 0,
                 max: 100,
                 opposite: true,
                 //tickInterval: 10,
                 allowDecimals: false
             }],
             tooltip: {
                 xDateFormat: '%d-%b-%Y %l%P', //'%d-%b-%Y %l%P'
                 valueSuffix: '%',
                 valueDecimals: 1
                 //formatter: function () {
                 //  return this.x + '<br/><b>' + this.series.name + ':' + '</b>' + this.y + '%';
                 //}
             },
             legend: {
                 enabled: false
                 //    layout: 'vertical',
                 //    align: 'right',
                 //    verticalAlign: 'left',
                 //   x: -20,
                 //   y: 10,
                 //    borderWidth: 0
             },
             series: [{
                 name: 'Coalition',
                 data: lnp,
                 marker: {
                     enabled: false
                 },
                 yaxis: 0
             }, {
                 name: 'ALP',
                 data: alp,
                 marker: {
                     enabled: false
                 },
                 yaxis: 0
             }],
             exporting: {
                 enabled: false
             }
         });









  });
}

})(); // We call our anonymous function immediately

Upvotes: 2

Views: 2376

Answers (1)

Justin
Justin

Reputation: 396

Although the alexmarandon.com web widget tutorial mentions other libraries, maybe your case would be better suited with an all dynamic "chain load" approach. Once the jquery dynamic load is complete, don't go directly to main(), but instead move on and chain load Highcharts dynamically as well. Add this one more function, remove static, external reference to Highcharts.js, and then replace the call back to scriptLoadHandler() with a call to this chainLoadHighchharts() function, which itself will then pass on to the original scriptLoadHandler().

    function chainLoadHighCharts() {
    var Highcharts;
    /********  Ok, /now/ dynamically load up highchart too... *********/
    if (window.Highcharts === undefined) {
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type", "text/javascript");
        script_tag.setAttribute("src",
            "http://code.highcharts.com/highcharts.js");
        if (script_tag.readyState) {
            script_tag.onreadystatechange = function () { // For old versions of IE
                if (this.readyState == 'complete' || this.readyState == 'loaded') {
                    scriptLoadHandler(); //here is the call that was orginally called directly from the jquery dynamic load.
                }
            };
        } else {
            script_tag.onload = scriptLoadHandler;
        }
        // Try to find the head, otherwise default to the documentElement
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    } else {
        scriptLoadHandler();

        //  script_tag.setAttribute("src","http://code.highcharts.com/modules/exporting.js");
    }
}

Still needs a bit of tightening, but it ran without error for me on jsfiddle.

http://jsfiddle.net/JcVLQ/5/

Upvotes: 1

Related Questions