StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You should change the datepicker onselect event handler</p> <pre><code>onSelect: function( selectedDate ) { var option = this.id == "from" ? "minDate" : "maxDate", instance = $( this ).data( "datepicker" ), date = $.datepicker.parseDate( instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings ); dates.not( this ).datepicker( "option", option, date ); } </code></pre> <p>to this:</p> <pre><code>onSelect: function( selectedDate ) { var option = this.id == "from" ? "minDate" : "maxDate", instance = $( this ).data( "datepicker" ), date = $.datepicker.parseDate( instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings ); dates.not( this ).datepicker( "option", option, date ); var startDate=$("#from")[0].value; var endDate=$("#to")[0].value; if (startDate!=="" && endDate!=="") { startDate=startDate.split("/"); endDate=endDate.split("/"); chart.xAxis[0].setExtremes( Date.UTC(startDate[2], startDate[0]-1, startDate[1]), Date.UTC(endDate[2], endDate[0]-1, endDate[1]) ); } } </code></pre> <p>It is just a proof of concept, the zoom is updated only if the two input field have a value without checking if it is a valid date or not.</p> <p>You can use the <a href="http://highcharts.com/stock/ref/#axis-object" rel="nofollow">chart.xAxis[0].getExtremes()</a> to change the zoom also if just a field is filled.</p> <p>I don't know much about Jquery (I'm used to Mootools) and don't know anything on the datepicker component and maybe there is a more elegant way to get an interval, but it is up to you and don't depend on Highstock.</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