All geek questions in one place

Loading multiple Highcharts using jquery.load

I have a main page that calls other web pages using jquery.load like

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

(Project.prx is in its own CGI language, such as ColdFusion, and deflates HTML and JavaScript.)

In the browser debugger, I get error messages like the following, every time I click the link, namely

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

Highcharts says this error:

Error Highcharts # 16

Screen charts already defined on the page

This error occurs the second time that Highcharts or Highstock are loaded onto the same page, so the Highcharts namespace is already defined. Keep in mind that the Highcharts.Chart constructor and all Highcharts functions are included in Highstock, so if you use a combination of Chart and StockChart in combination, you need to download the highstock.js file.

Since I'm using jquery load () and div targeting in the current document, this is a fair call to Highcharts to claim that I am loading a second instance of the namespace. However, 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 had some success when I did not put high diagrams in the controller and only for purposes and gave out

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

However, this was not successful in every case.

+5
source share
3 answers

It’s best not to download downloaded files. You can do this by loading Highcharts once on the main page and not loading any of the later loaded Highcharts pages.

The second solution is to place the diagrams in separate iframes.

Another way is to load the Highcharts library in JavaScript on Highcharts pages using "if" to check if it is loaded.

+1
source

This is a fair call to Highcharts to claim that I am loading a second instance of the namespace. However, this is what I want to do.

I do not think that this is actually what you want to do. It is never necessary to download the highcharts library twice. You just want to load two charts on one page.

A simple solution:

Remove <script src="http://code.highcharts.com/highcharts.js"></script> (or, nevertheless, you download this file) from the output of your prx file. No need to call delete(Highcharts); I do not think that in this case the line even does something.

A slightly more reliable solution:

If you need to have access to Project.prx?id=123 directly through your browser (possibly for testing), you will need to output this output in full HTML depending on what it is called.

Modern browsers will include the X-Requested-With: XMLHttpRequest header, which you can check in your server code, and accordingly provide a wrapped or inverted graph; however, this method is indeed not reliable. A more robust solution would be to specify how you want it in the query string. For example, can you make Project.prx? Id = 123 provided you with:

 <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>
+1
source

You can load Project.prx in an iframe.

+1
source

Source: https://habr.com/ru/post/1207372/

More articles:


All Articles