Loading multiple Highcharts with jquery.load

Question

I have a master page which calls in other web pages using jquery.load, for example

$("#loading").show();
$("#arena").load('Project.prx?PID=' + dataReport);
$("#loading").hide();

(Project.prx is in an in-house CGI language like ColdFusion, and it's pumping out HTML and JavaScript.)

In the browser debugger I get error messages like the following every time I click on a link, viz

Uncaught Highcharts error #16: www.highcharts.com/errors/16

Highcharts website says of this error:

Highcharts Error #16

Highcharts already defined in the page

This error happens the second time Highcharts or Highstock is loaded in the same page, so the Highcharts namespace is already defined. Keep in mind that the Highcharts.Chart constructor and all features of Highcharts are included in Highstock, so if you are running Chart and StockChart in combination, you only need to load the highstock.js file.

As I'm using jquery's load() and targeting a div in the current document, it is a fair call for Highcharts to claim that I'm loading a second instance of the namespace. Nevertheless, this is what I want to do.

So any idea how to load other Highcharts pages into one with an existing instance of the Highcharts namespace?

LATER

I have had some success with not putting highcharts in the controller and only in the targets and issuing

$("#loading").show();
$("#arena").empty();
delete(Highcharts);
$("#arena").load('Project.prx?PID=' + dataReport);
$("#loading").hide();

However, this has not proved successful in every instance.

The problem is not that you are loading two graphs, but two highcharts codes... What I'd do is strip the script tag from Project.prx to avoid that. If you need to display Project.prx on a page by itself, then only add the script tag if the request is not an AJAX call... — Salketer
– Salketer, Commented Nov 21, 2014 at 7:27

Kacper Madej · Accepted Answer · 2014-11-26 14:50:27Z

1

+50

The best would be to do not load loaded files. You can do it by loading Highcharts once in main page and do not load in any of later loaded Highcharts pages.

Second solution is to put charts in separate iframes.

Another way is to load Highcharts library in JavaScript in Highcharts pages while using 'if' to check if it is already loaded.

answered Nov 26, 2014 at 14:50

Kacper Madej

7,89627 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Casey Rule · Accepted Answer · 2014-11-24 02:25:42Z

It is a fair call for Highcharts to claim that I'm loading a second instance of the namespace. Nevertheless, this is what I want to do.

I don't think that actually is what you want to do. There is never a reason to load the highcharts library twice. You simply want to load two charts on the same page.

The simple solution:

Remove <script src="http://code.highcharts.com/highcharts.js"></script> (or however you load this file) from the output of your prx file. No need to call delete(Highcharts); I don't think that line even does anything in this case.

The slightly more robust solution:

If you need to be able to access Project.prx?id=123 directly through your browser (maybe for testing), you'll need to wrap that output up in full HTML depending on how it's called.

Modern browsers will include the header X-Requested-With: XMLHttpRequest which you can test for in your server code and provide the wrapped or upwrapped chart accordingly; however, this method is really not reliable. A more reliable solution would be to specify how you want it in the query string. For instance, you could make it so that Project.prx?id=123 will give you:

<div id="container"></div>
<script type="text/javascript" >
    $('#container').highcharts({
       ...
    });
</script>

but Project.prx?id=123&v=test will give you:

<!DOCTYPE html>
<html>
<head>
    <title>Data Report 123</title>
    <script src="//code.jquery.com/jquery-2.1.0.js" type="text/javascript" ></script>
    <script src="http://code.highcharts.com/highcharts.js" type="text/javascript" ></script>
</head>
    <body>
        <div id="container"></div>
        <script type="text/javascript" >
            $('#container').highcharts({
            ...
            });
        </script>
    </body>
</html>

thunder · Accepted Answer · 2014-11-29 19:19:33Z

1

You can load Project.prx in an iframe.

answered Nov 29, 2014 at 19:19

thunder

2301 silver badge8 bronze badges

Collectives™ on Stack Overflow

Loading multiple Highcharts with jquery.load

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related