Databases
StackOverflow2013
Postsdbo
POHighchart in new window
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHighchart in new window
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload