All geek questions in one place

Highchart in a new window

I use highcharts to display charts on my page. It works fine, but some of the data on the graph is too "compressed", so I have to find a way to see a larger graph.

I read several posts over the Internet on this subject: - in general, they suggest using highslide, but I don’t want to, because my page is already repainted with scripts - someone is trying to pop up in a pop-up window, this may come in handy to me, but I failed - the only quasi-working example that suits me is as follows: (inside the options object, I add these properties).

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('<script type="text/javascript" src="script/highcharts/js/highcharts.js"></script>\ <script type="text/javascript" src="script/highcharts/js/modules/exporting.js"></script>'); this.options.renderTo=divtag; var chart = new Highcharts.Chart(this.options); win.document.close(); } }, exportButton: { enabled: true }, printButton: { enabled: true } } }

However, it does not work, because the div tag is not inserted, and all I get is

 <html> <head> <script type="text/javascript" src="script/highcharts/js/highcharts.js"> </script> <script type="text/javascript" src="script/highcharts/js/modules/exporting.js"></script> </head></html>

I can not understand the error. I know that this should be something simple, but I can’t get out alone.

- EDIT ---

Finally, I realized which one could be a working strategy: create the "chartpopup.html" page and pass it the parameters needed to create a copy of the displayed chart.

So now I have:

index.html

  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!--------> 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);

and chartpopup.html:

  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Chart full Size</title> <script type="text/javascript" src="script/jquery-1.7.1-min.js"></script> <script type="text/javascript" src="script/highcharts/js/highcharts.js"></script> <script type="text/javascript" src="script/highcharts/js/modules/exporting.js"> </script> </head> <body> <div id="container" style="min-width: 400px; height: 650; margin: 0 auto"></div> <script> var chart; $(document).ready(function() { var mychart=window.opener.generalPurposeGlobalVar; mychart.options.chart.renderTo= 'container'; chart = new Highcharts.Chart(mychart.options); }); </script> </body> </html>

These two pages actually work ONLY with the default schedule. If I change and redraw the graph, I cannot play it on the pop-up page!

The code I use to change the schedule is basically this:

  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 a point I calculated before
+4
source share
3 answers

After wandering around and asking questions, I found out that the best way to do this is to make a full-screen mode div that contains a chart.

This is a very simple solution, but it works.

This post is very useful. How to make a full screen div?

A function like the following should do the trick in the div "#graph":

 function fullscr() { $('#graph').css({ width: $(window).width(), height: $(window).height() }); }

I hope for this help.

+1
source

Here is an example of Highcharts that works with the "oldschool" popup:

index.html

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>highcharts foobar</title> </head> <body> <a href="javascript:open_chart_popup();">Open Chart Popup</a> <script> function open_chart_popup() { window.open('popup.html', 'chart popup title', 'width=1680px height=1050px'); } </script> </body> </html>

popup.html

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>highcharts foobar</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> </head> <body> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> <script> var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'line', marginRight: 130, marginBottom: 25 }, title: { text: 'Monthly Average Temperature', x: -20 //center }, subtitle: { text: 'Source: WorldClimate.com', x: -20 }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { title: { text: 'Temperature (°C)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y +'°C'; } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 }, series: [{ name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: 'New York', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] }, { name: 'Berlin', data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] }, { name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] }] }); }); </script> </body> </html>

If this solution does not suit you, could you tell us which JavaScript libraries you are using (jQuery is used in this example). As the documentation says, high-performance diagrams require either jQuery, Mootools, or Prototype: http://www.highcharts.com/documentation/how-to-use

If you can use jQuery, you can replace this popup using some cooler effects, such as: http://jqueryui.com/demos/dialog/ p>

Despite this, if you want help for your script, can you consider creating jsfiddle , I am not able to reproduce your error.

EDIT:

Good, so you have everything to handle it.

I see two options:

  • You are sending series JSON user data to your server at the request of AJAX. Then your server will send you a view or a bunch of html / js containing your highchart with user data. Returning to the client, you will do what you want (for example, launch a pop-up window containing a graph). I'm not too comfortable with the spine, but I'm sure you can generate the template and return it (this can help http://japhr.blogspot.fr/2011/08/getting-started-with-backbonejs-view.html )

  • Another solution would be to directly tune your template (containing the graph) to the view, but by default it will be fired. Then, when series correctly configured by the user, you simply show the template (for example, in a pop-up window). This solution avoids calling the server, so I would suggest this.

EDIT 2:

So, I made jsFiddle showing a basic example of how to update a chart based on user input: http://jsfiddle.net/MxtkM/

The example updates the last value of all series on the chart, here's how:

 $('#december_value').bind('keyup', function() { var user_input_value = parseFloat($(this).val()); // cast to float for (var s in chart.series) { // loop through the series var old_data = chart.series[s].data; var new_data = []; for (var d in old_data ) { // loop through data objects new_data.push(old_data[d].config); // config property contains the y value } new_data[new_data.length - 1] = user_input_value; // update the last value chart.series[s].setData(new_data); // use setData method to refresh the datas of the serie } });

This example uses the setData method, providing a new data array. If this does not meet your needs, there is another way to update your chart if you redraw the entire chart by doing var chart = new Highcharts.Chart(options); . (This is explained in the links above).

These two links also read well:

Now you can do whatever you want with your schedule based on user input.

+4
source

The best solution would be full-screen HTML5 API for full-screen viewing

 function fullScreen(){ var elem = document.getElementById("highchart_div_id"); if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); } }

However, this piece of code only works in next-generation browsers, and I have hands on the working output from Google chrome and Mozilla Firefox

good afternoon

+1
source

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

More articles:


All Articles