2015-05-29 127 views
0

我想创建一个简单的程序,从我的数据库中获取天气数据,并将其显示在网页上。我现在设置的方式是,您必须在文本框中输入一个值才能获取数据。Highcharts无法显示数据

我的HTML代码:

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>Database</title> 
     </head> 
     <body> 
      Name: <input type="text" id="name"> 
      <input type="submit" id="name-submit" value="Grab"> 
      <div id="name-data"></div> 
      <div id="container" style="min-width: 310px; height: 400px; 
      margin: 0 auto"></div> 
      <script src="http://code.jquery.com/jquery-1.8.0.min.js"> 
      </script> 
      <script src="js/global.js"></script> 
      <script src="http://code.highcharts.com/highcharts.js"></script> 
      <script src="http://code.highcharts.com/modules/exporting.js">    </script> 
     </body> 
    </html> 

我的PHP代码:

<?php 
if(isset($_POST['name']) === true && empty($_POST['name']) === false) { 
    mysql_connect("localhost", "root", "Logilube163"); 
    mysql_select_db("Weather_Test_Simple_Schema__Rev1"); 
    $query = mysql_query("SELECT * FROM Location"); 
     while($row = mysql_fetch_array($query)){ 
      $time = strtotime($row['time']) * 1000; 
      $tempF = $row['temp_f']; 
      ![enter image description here][1]$data []= [(int)$time, (int)$tempF]; 
     } 
    echo json_encode($data); 
    } 
?> 

的代码能够查询我的数据库,并把数据放入数组$的数据。

然后使用json_encode()对数据数组进行编码;功能,并被转移到JavaScript文件,它被成功地读出并放置在html页面上。

我的JS代码:

$('input#name-submit').on('click', function(){ 
var name = $('input#name').val(); 
    if($.trim(name)!=''){ 
     $.post('/ajaxdb/ajax/name.php',{name: name}, function(data){ 
      $('div#name-data').text(data); // Outputs the data before the graph 

      $('#container').highcharts({ 
      chart: { 
       zoomType: 'x' 
      }, 

      xAxis: { 
      type: 'datetime', 
      minRange: 24 * 3600000 
     }, 

      title : { 
       text : 'Weather Data' 
      }, 

      series : [{ 
       data: data // <-- This data is not being read in by the graph 
       //[[1432813308000,78],[1432813904000,77],[1432813968000,77],[1432814016000,77],[1432815600000,78],[1432832464000,66],[1432843057000,65],[1432843731000,65]] 
       //The above data is read in by the graph and plots just fine. 
      }] 
     }); 
    }); 
    } 
}); 

我的输出结果是这样的: enter image description here

的问题是,这是在JavaScript中读出,这个相同的数据不能够被放置在高图表中。相反,图表是使用正确的轴创建的,但没有任何数据点。但是,当我输入由标签创建的数据点时,数据绘制得很好。

+1

尝试首先按日期对数据进行排序 - 数据必须按x值排序,并且您的数据看起来不是(似乎也有重复的x值)。我还会找到x值为0的两个主要数据点的原因,并修复或消除它们 – jlbriggs

回答

0

要回答我的问题,我发现我所需要的代码:

header("Content-type: text/json"); 

在我的PHP文件的顶部。