title: Highchart in new window
body: <p>I use highcharts to display a chart in my page.
  It works fine, but some times data in graph is too "condensed" so I should find a way to see the graph in a greater size.</p>
  
  <p>I read several posts over internet on this subject:
  - in general they suggest to use highslide, but i don't want to, as my page is already overlaoded by scripts
  -somebody tries to pop up the content in a popup, it could fit to me but I didn't succeed
  - the only quasi-working example which fits to me seems to be the following:
  (inside the options object I add this properties).</p>
  
  <pre><code>exporting: {
                      buttons: {
                          popUpBtn: {
                              symbol: 'square',
                              _titleKey: 'FullScreenButtonTitle',
                              x: -60,
                              symbolSize:18,
                              symbolFill: '#B5C9DF',
                              hoverSymbolFill: '#779ABF',
                              onclick: function () {
                                  var win=window.open('','','location=0,titlebar=0,status=0,width=780,height=350');
                                  win.focus();
                                  var divtag = win.document.createElement("div");
                                  divtag.id = "div1";
                                  win.document.body.appendChild(divtag);
                                  win.document.write('&lt;script type="text/javascript" src="script/highcharts/js/highcharts.js"&gt;&lt;/script&gt;\
                                                                      &lt;script type="text/javascript" src="script/highcharts/js/modules/exporting.js"&gt;&lt;/script&gt;');
                                  this.options.renderTo=divtag;
                                  var chart = new Highcharts.Chart(this.options);
  
                                  win.document.close();
                              }
                          },
                          exportButton: {
                              enabled: true
                          },
                          printButton: {
                              enabled: true
                          }
  
                      }
                  }
  </code></pre>
  
  <p>However it is not working, as the div tag is not inserted and all i get is this</p>
  
  <pre><code>&lt;html&gt;
   &lt;head&gt;
     &lt;script type="text/javascript" src="script/highcharts/js/highcharts.js"&gt;  &lt;/script&gt;
      &lt;script type="text/javascript" src="script/highcharts/js/modules/exporting.js"&gt;&lt;/script&gt;
      &lt;/head&gt;&lt;/html&gt;
  </code></pre>
  
  <p>I can't understand the error.
  I know it should be something simple but I can't get out alone.</p>
  
  <p><strong>--EDIT ---</strong></p>
  
  <p>I finally understood which could be a working strategy: create a "chartpopup.html" page, and passing it the parameters needed to build the copy of the graph I visualize.</p>
  
  <p>So now I have:</p>
  
  <p>index.html:</p>
  
  <pre><code>    chartOptions = {
              series: [
                  {
                      name: 'example',
                      data: [83.6, 78.8, 98.5, 93.4, 106.0]
                  }]    
            //// CUT SOME CODE
  
                  exporting: {
                      buttons: {
                          popUpBtn: {
                              enabled:true,
                              symbol: 'square',
                              _titleKey: 'FullScreenButtonTitle',
                              x: -60,
                              symbolSize:18,
                              symbolFill: '#B5C9DF',
                              hoverSymbolFill: '#779ABF',
                              onclick: function () {
                                  look this!--------&gt; generalPurposeGlobalVar = this;
                                  var win=window.open('./chartpopup.html','Full Size Chart','location=0,titlebar=0,status=0,width=780,height=650');
  
                              }
                          },
                          exportButton: {
                              enabled: true
                          },
                          printButton: {
                              enabled: true
                          }
  
                      }
                  }
              };
          this.highChart=new Highcharts.Chart(this.chartOptions);
  </code></pre>
  
  <p>and chartpopup.html:</p>
  
  <pre><code>   &lt;!DOCTYPE html&gt;
     &lt;html&gt;
     &lt;head&gt;
         &lt;meta charset="utf-8"&gt;
         &lt;title&gt;Chart full Size&lt;/title&gt;
     &lt;script type="text/javascript" src="script/jquery-1.7.1-min.js"&gt;&lt;/script&gt;
     &lt;script type="text/javascript" src="script/highcharts/js/highcharts.js"&gt;&lt;/script&gt;
     &lt;script type="text/javascript" src="script/highcharts/js/modules/exporting.js"&gt;              &lt;/script&gt;
  
     &lt;/head&gt;
     &lt;body&gt;
  
     &lt;div id="container" style="min-width: 400px; height: 650; margin: 0 auto"&gt;&lt;/div&gt;
  
     &lt;script&gt;
     var chart;
  
     $(document).ready(function() {
  
         var mychart=window.opener.generalPurposeGlobalVar;
  
         mychart.options.chart.renderTo= 'container';
         chart = new Highcharts.Chart(mychart.options);
  
  
     });
     &lt;/script&gt;
     &lt;/body&gt;
     &lt;/html&gt;
  </code></pre>
  
  <p>This two pages are actually working ONLY with the default graph. If I modify and re-render the graph, I'm not able to reproduce it on the popup page!</p>
  
  <p>The code I use to modify the graph is basically this:</p>
  
  <pre><code>        this.chartOptions.series=[{name:field.split('_').join('\n')}];
          this.highChart.destroy();
          this.highChart=new Highcharts.Chart(this.chartOptions);
          this.highChart.xAxis[0].setCategories(_.isEmpty(mygroups) ? [] : mygroups);
          this.highChart.series[0].setData([]);
          this.highChart.setTitle({text: this.highChart.title.text},{text:(field.split('_').join(' ')),  });
          this.highChart.redraw();//
     [...]
          self.highChart.series[0].addPoint(result);//it's a point I calculated before
  </code></pre>