Charge X-Axis Highcharts with dates given from and to date

Question

How can I populate the x axis with dates given by from and to?

Essentially, the user enters the date "from" and "to" in my HTML web interface; e.g. 24/08/2011 - 28/08/2011

This will be through HTML text fields whose values ​​are caught using jQuery when the user clicks the View Graph button.

I would like to create a spline diagram whose x-axis starts 2 days before the date “from” and ends 2 days after the date “before”.

So, in the above example, the user provides:

 from -> 24/08/2011 to -> 28/08/2011 

so

 x-axis start -> 22/08/2011 x-axis ends -> 30/08/2011 

I also want it to display 24 hour intervals as their respective dates. Therefore, the x axis should look something like this:

 | | | | | | | | | | | | | |___________________________________________________ | | | | | | | | | 22/08 23/08 24/08 25/08 26/08 27/08 28/08 29/08 30/08 

EDIT:

I found the following code:

 series: [{ type: 'spline', name: 'USD to EUR', pointInterval: 24 * 3600 * 10, pointStart: Date.UTC(<?php echo($year); ?>, 0, <?php echo($day);?>), data: [ 0.8446, 0.8445, 0.8444 ] }] 

But I just can't understand how HighCharts equates time slots to pieces of data. I know, obviously, that this is due to pointInterval ...

I can guess that 24 * 3600 is the number of seconds per day, but what is * 10? How do I get it to display exactly 24-hour intervals?

Answer 1

Here are some links to help you.

• High-Chart xAxis APIs

A jsfiddle sample has also been created to help you get started.

Xaxis

 xAxis: { type: "datetime", dateTimeLabelFormats: { day: '%m-%d' }, tickInterval: 24 * 3600 * 1000, min: Date.UTC(<?php echo $date_from;?>), max: Date.UTC(<?php echo $date_to;?>) } 

Basically, this means that the xAxis type is 'datetime', so tickInterval understands that it is increasing by 86400000 milliseconds , and also sets the xAxis format based on the required date format .

Then $date_from and $date_to should look like this: from PHP handling the form submission.

 $date_from = date("Y, m, d",strtotime($_POST['from']) - 2*86400); $date_to = date("Y, m, d",strtotime($_POST['to']) + 2*86400);