Populate Highcharts X-Axis With Dates Given a From And To Date

Question

How it is possible to populate the x axis with dates given a 'from' and 'to' date values?

Essentially, the user will enter a "from" and "to" date in my HTML web interface; for example, 24/08/2011 - 28/08/2011

This will be via HTML textfields whose values are caught using jQuery when a user presses a "View Graph" button.

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

So in the example above, user provides:

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

therefore

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

I also want it to have 24 hour intervals displayed as their corresponding dates. The x-axis should therefore 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 cannot figure out how HighCharts equates time intervals to the parts of data..I know obviously it has to do with pointInterval...

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

Answer 1

Here are some references that should help you out.

• Highcharts API xAxis

Also created a sample jsfiddle to help you start out.

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, what this does is set the type of xAxis to 'datetime' so the tickInterval understands that's it is incrementing by 86400000 milliseconds, and also set the format of the xAxis based on the required date format.
Then the $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);