I have a implemented a highchart into my rails 3 application and am trying to extend it further so that it has a highchart attached to it. The purpose of why I am trying to do this is so that a user can select a specific date and it will load the data for that selected date. I searched and found something similar to what I am trying to achieve /

Here you have the normal basic highstock chart Basic stock chart. What I am trying to do is replace the range selector with the datepicker. Is this feasible, and if so how do I go about doing this. I've followed the example (first link I supplied) and have the datepicker implemented. What I am now struggling to do is make the datepicker actually work with highcharts. My knowledge with javascript is not to the highest so sorry for what may seem to be an easy question.

All that I am struggling with is replacing the date range selector with the datepicker..

I have a implemented a highchart into my rails 3 application and am trying to extend it further so that it has a highchart attached to it. The purpose of why I am trying to do this is so that a user can select a specific date and it will load the data for that selected date. I searched and found something similar to what I am trying to achieve http://jsfiddle/E8WQ5/8/

Here you have the normal basic highstock chart Basic stock chart. What I am trying to do is replace the range selector with the datepicker. Is this feasible, and if so how do I go about doing this. I've followed the example (first link I supplied) and have the datepicker implemented. What I am now struggling to do is make the datepicker actually work with highcharts. My knowledge with javascript is not to the highest so sorry for what may seem to be an easy question.

All that I am struggling with is replacing the date range selector with the datepicker..

• javascript
• jquery-ui
• datepicker
• highcharts

1 Answer 1

You should change the datepicker onselect event handler

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

to this:

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])
        );
    }
}

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.

You can use the chart.xAxis[0].getExtremes() to change the zoom also if just a field is filled.

I don't know much about Jquery (I'm used to Mootools) and don't know anything on the datepicker ponent and maybe there is a more elegant way to get an interval, but it is up to you and don't depend on Highstock.