StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here is an Highcharts exemple working with an "oldschool" popup :</p> <p><strong>index.html</strong></p> <pre><code><!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> </code></pre> <p><strong>popup.html</strong></p> <pre><code><!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> </code></pre> <p>If this solution doesn't fit to you, could you tell us which JavaScript libraries you use (this example relies on jQuery). As the documentation says, highcharts requires either jQuery, Mootools or Prototype : <a href="http://www.highcharts.com/documentation/how-to-use" rel="nofollow noreferrer">http://www.highcharts.com/documentation/how-to-use</a></p> <p>If you are able to use jQuery, you can replace that popup by using some cooler effects like those ones : <a href="http://jqueryui.com/demos/dialog/" rel="nofollow noreferrer">http://jqueryui.com/demos/dialog/</a> </p> <p>Despite of that, if you want assistance for your script, could you consider making a <a href="http://jsfiddle.net/" rel="nofollow noreferrer">jsfiddle</a>, i'm not able to reproduce your error.</p> <p><strong>EDIT :</strong></p> <p>Okay, so you have all the stuff to deal with that.</p> <p>I see two options :</p> <ul> <li><p>You send the user input <code>series</code> JSON data to your server by an AJAX request. Then your server send you back a view or a bunch of html/js containing your highchart with the user datas. Back to the client, you do wathever you want with that (like triggering a popup containing the graph). I'm not too comfortable with backbone but i'm sure you can generate a template and render it back (this may help <a href="http://japhr.blogspot.fr/2011/08/getting-started-with-backbonejs-view.html" rel="nofollow noreferrer">http://japhr.blogspot.fr/2011/08/getting-started-with-backbonejs-view.html</a>)</p></li> <li><p>The other solution would be to directly set your template (containing the graph) to the view but hidding him by default. Then, when the <code>series</code> are correctly setted by the user, you simply display the template (in a popup for example). This solution avoid a server call, so I would suggest that.</p></li> </ul> <p><strong>EDIT 2 :</strong> </p> <p>So, I've made a jsFiddle showing a basic example on how to update a chart based on a user input : <a href="http://jsfiddle.net/MxtkM/" rel="nofollow noreferrer">http://jsfiddle.net/MxtkM/</a></p> <p>The example updates the last value of all the series on the graph, here is how :</p> <pre><code>$('#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 } }); </code></pre> <p>This example use the method setData by providing a new data array. If this doesn't fit your needs, there is an another method to refresh your graph in whitch you rerender all the graph by doing <code>var chart = new Highcharts.Chart(options);</code>. (This is explained in the links above).</p> <p>This two links are also a good read : </p> <ul> <li><a href="https://stackoverflow.com/questions/4210879/reload-chart-data-via-json-with-highcharts">Reload chart data via JSON with Highcharts</a></li> <li><a href="http://www.highcharts.com/documentation/how-to-use" rel="nofollow noreferrer">http://www.highcharts.com/documentation/how-to-use</a> (part 3 and 4)</li> </ul> <p>Now you shoud be able to do whatever you want with your graph based on a user input.</p>

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