Dashboard using highcharts.js - highcharts

Question

I'm trying to build a dashboard using highcharts.js(multiple charts are displayed on a page), the data for these charts are fetched via ajax. Each of these charts can be refreshed independently. Initially when I was trying to get this working I was getting error #16 and I figured out that HighCharts.js was included and the ajax response was sending back HighCharts again and hence this error was being thrown by HighCharts.
To circumvent this I added js code to check if HighCharts was already defined and if it was I set it to null
if(window.Highcharts){
window.Highcharts = null;
}
This seemed to solve the problem, but however I now see that when I refresh one chart the other chart(s) on the dashboard seem to have some rendering issues - a part of the other chart(s) seems to have been stripped off.
Please let me know if what I'm doing is right, also please let me know a better way in which I can avoid loading HighCharts is its already loaded.

Answer 1

Assuming you have control over the HTML you're rendering, you need to do either;
Place highcharts (and other scripts) as a dependency in the page container so that you're sure it loads only once.
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.

Answer 2

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.