Question

I’m using highcharts to generate a chart from a table of values in the database. I wanted to be able to select a date range to pass into highcharts javascript.

Im using jquery datepicker. So the values get filled in the form

<form id='myform'>
<label for="from">From</label>
<input type="text" id="from" name="from"/>
<label for="to">to</label>
<input type="text" id="to" name="to"/>
<div class="demo">
<input type="submit" value="Submit">

And want to submit that to the highcharts

$(function() {
        new Highcharts.Chart({

This is ALL located in the view. in a script tag. Can someone tell me how I can pass the date values from the input form into this javascript function to then rebuild the chart on the page using the user input values? How can I access “to” and “from” label then refresh the chart?

Answer 1

You should get the date from your input fields by accessing:

document.getElementById('from').value;

EDIT: A better way would be to use the jQuery datepicker events:

$('.selector').datepicker({
    onSelect: function(dateText, inst) { ... }
});

and try to get the date as a javascript date object.

To set the range of the charts axis you can use:

chart.xAxis[0].setExtremes(Date.UTC(startYear, startMonth - 1, startDay), Date.UTC(endYear, endMonth - 1, endDay));  

In your submit function. The chart will automatically redraw after the axis extremes are set.