Highcharts: Force показать XAxis с DateTime

Question

Моя Highcharts диаграмма теперь показывает, как это: http://img90.imageshack.us/img90/3892/chart1p.png

Но мне нужно, чтобы выглядеть следующим образом: http://img545.imageshack.us/img545/1333/chart2p.png

В настоящее время его не показывать пустые значения по часам.

Мой код:

index.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script type="text/javascript"> 
    var chart; 
    $(document).ready(function() { 
     var options = { 
      chart: { 
       renderTo: 'chart', 
       defaultSeriesType: 'spline' 
      }, 
      title: { 
       text: 'Earnings Today', 
      }, 
      subtitle: { 
       text: '' 
      }, 
      xAxis: { 
       type: 'datetime', 
       tickInterval: 3600 * 1000, 
       tickWidth: 0, 
       labels: { 
        align: 'center', 
        formatter: function() { 
         return Highcharts.dateFormat('%l%p', this.value); 
        } 
       }, 
      }, 
      yAxis: { 
       title: { 
        text: 'Earnings' 
       }, 
       min: 0, 
       tickInterval: 2, 
      }, 
      plotOptions: { 
       spline: { 
        marker: { 
         radius: 4, 
         lineColor: '#666666', 
         lineWidth: 1 
        } 
       } 
      }, 
      tooltip: { 
       valueDecimals: 2, 
       crosshairs: true, 
       formatter: function() { 
        return '$' + this.y; 
       } 
      }, 
      series: [{ 
        name: 'Earnings Today, USD' 
       } 
      ] 
     } 
     jQuery.get('data_today.php', null, function (tsv) { 
      var lines = []; 
      earnings = []; 
      try { 
       tsv = tsv.split(/\n/g); 
       jQuery.each(tsv, function (i, line) { 
        line = line.split(/\t/); 
        date = Date.parse(line[0] + ' UTC'); 
        val = line[1]; 
        earnings.push([date, parseFloat(line[1].replace(',', '.'), 10)]); 
       }); 
      } catch (e) {} 
      options.series[0].data = earnings; 
      chart = new Highcharts.Chart(options); 
     }); 
    }); 
</script> 

data_today.php

<?php 
session_start(); 
require_once('config.php'); 
require_once('config_mysql.php'); 

$link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD); 
if (!$link) 
{ 
    die('Failed to connect to server: ' . mysql_error()); 
} 

$db = mysql_select_db(DB_DATABASE); 
if (!$db) 
{ 
    die("Unable to select database"); 
} 

$result = mysql_query("SELECT earn_date,SUM(amount) as val FROM user_earnings WHERE user_id='$USER_ID' AND DATE(earn_date) = DATE(NOW()) GROUP BY earn_date"); 
if ($result) 
{ 
    while ($row = mysql_fetch_array($result)) 
    { 
     $d = date("l, F, j, Y G:i:s", strtotime($row["earn_date"])); 
     echo $d . "\t" . $row['val'] . "\n"; 
    } 
} 
else 
{ 
    die(mysql_error()); 
} 
mysql_close($link); 
?> 

Таким образом, (если его не достаточно ясна) Мне нужен этот код, чтобы показать весь день и показать также пустые значения по часам.

У меня есть почти нулевой опыт Highcharts и JavaScript, поэтому мне нужна помощь с этим :)

Также ищут альтернативный способ для запуска MySql запрос в index.php, так что я не нужно data_today.php

Благодаря

Answer 1

Установите XAxis ниже

xAxis: { 
    ordinal: false 
} 

Answer 2

Для пустых пространств вы должны иметь null значения. Затем установите connectNulls: false.

Example