title: Loading multiple Highcharts with jquery.load
body: <p>I have a master page which calls in other web pages using jquery.load, for example</p>
  <pre><code>$(&quot;#loading&quot;).show();
  $(&quot;#arena&quot;).load('Project.prx?PID=' + dataReport);
  $(&quot;#loading&quot;).hide();
  </code></pre>
  <p>(Project.prx is in an in-house CGI language like ColdFusion, and it's pumping out HTML and JavaScript.)</p>
  <p>In the browser debugger I get error messages like the following every time I click on a link, viz</p>
  <pre><code>Uncaught Highcharts error #16: www.highcharts.com/errors/16 
  </code></pre>
  <p>Highcharts website says of this error:</p>
  <blockquote>
  <p>Highcharts Error #16</p>
  <p>Highcharts already defined in the page</p>
  <p>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.</p>
  </blockquote>
  <p>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.</p>
  <p>So any idea how to load other Highcharts pages into one with an existing instance of the Highcharts namespace?</p>
  <p><strong>LATER</strong></p>
  <p>I have had some success with not putting highcharts in the controller and only in the targets and issuing</p>
  <pre><code>$(&quot;#loading&quot;).show();
  $(&quot;#arena&quot;).empty();
  delete(Highcharts);
  $(&quot;#arena&quot;).load('Project.prx?PID=' + dataReport);
  $(&quot;#loading&quot;).hide();
  </code></pre>
  <p>However, this has not proved successful in every instance.</p>