Dashboard using highcharts.js

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.

When you say "the data is fetched by ajax" do you mean an HTML snippit containing <script/> tags? In which case, why don't you just send the data back? If you must send back HTML and SCRIPT tags, have a look at RequireJS for handling this kind of dependency. — cirrus
The problem is there is no way for me to differentiate between a page load and a chart refresh, so that approach will not work for me. Can you suggest someway of handling this on the client side using js? — user2317558
I'd need more info then - can you elaborate on how you're loading/refreshing the charts? or can you share the code? — cirrus
@cirrus In the case of refresh the chart area (<span>) will already have the HighCharts.js and the refresh tries to include HighCharts.js again which results in error#16. As I mentioned before I tried to overcome this by setting window.highcharts = null if highcharts is already defined, but this results in rendering issues. If I refresh on one chart the other charts get stripped off (partially rendered). Please let me know if there's a better way to solve the problem. Also,, is there any specific reason that this error got introduced in 3.0? — user2317558
@user2317558 Why you cannot only attach highcharts.js as script in the head and then onli iniliaze particular charts? Via ajax you can get data (i.e by JSON or somethins) and initialize chart. — Sebastian Bochan

cirrus cirrus · Accepted Answer · 2013-04-30T08:18:03

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.

Dashboard using highcharts.js

2 Answers