Skip to content Skip to sidebar Skip to footer

Preserving JQuery Dependency For Highcharts With RequireJS Optimizer

I'm testing out requireJS and am trying to make a simple project using highcharts. I've started with the requireJS multipage example project as a starting point. My dir structure

Solution 1:

Please take look at very simple example which use require js http://jsfiddle.net/wAM3h/

    require({
    paths: {
        jquery: "//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min",
        hchart: [
            "http://code.highcharts.com/highcharts",
            "http://code.highcharts.com/highcharts-more",
            "http://code.highcharts.com/modules/exporting"
        ]
    }
},
['jquery', 'hchart'], function($, hc) {

    window.chart = new Highcharts.Chart(options);
    });

Solution 2:

Not sure you're still involved with the project or not:

I see that you've not defined the path to the highcharts library in the code above. I could not see it even in the repo you mentioned.

And, again, highcharts prevents re-declaration of this namespace, so you must use a different name - Hence, you must use a different name while shim-ming it

Note: Libraries like highcharts can be safely used in an amd module without using a shim (unless you need explicit access to the object exported by it).

So, your Config File should look like this:

requirejs.config({
    baseUrl: 'js/lib',
    paths: {
        app: '../app',
        'highstock-custom-name': 'path/to/highcharts.js'
    },
    shim: {
        "highstock-custom-name": {
          ... //as is, although not necessary
        }
    }
});

Post a Comment for "Preserving JQuery Dependency For Highcharts With RequireJS Optimizer"