[Solved]-Dashboard using highcharts.js-Highcharts

Why are you loading highcharts with each span? You only need to load it once when the document loads.

Highcharts does not need to load each time a chart is refreshed...it's already there.

All you need to do to refresh individual charts via ajax is return a json object of the data for that chart, and re initialize the chart with the existing options that were set when the page loaded.

Assuming you have control over the HTML you're rendering, you need to do either;

1. Place highcharts (and other scripts) as a dependency in the page container so that you're sure it loads only once.
2. Conditionally load HighCharts dynamically rather than statically.

Eg something like this;

function buildChart(func) {
    if (window.Highcharts === undefined) {
        console.log("Highcharts is not loaded, fetching...");
        $.getScript("http://code.highcharts.com/highcharts.js", function () {
            alert("HighCharts was loaded");
            func(); // build chart
        });
    }
    else {
        console.log("HighCharts was already loaded");
        func(); // build chart
    }


}

// test
buildChart(function () {
    // build chart
    console.log("Read to build chart with:", window.Highcharts);
})

However, this simple example doesn't cater for concurrent requests whilst highcharts is still being loaded. So for conditional loading like this, I would look into using a library like RequireJS, YepNope or HeadJS which can handle these dependencies for you. You are then able to include the HighCharts script in your components as often as you like and they'll only be loaded once.