與highcharts

我試圖用highcharts繪製的文檔加載從MySQL表中的數據繪製的MySQL數據：的HTML看起來像這樣：與highcharts

function FetchData(){ 
     //alert("Fetching"); 
     $.ajax({ 
      url: 'php/reports/fetch_data.php', 
      success: function(data) { 
       dataTemp = []; 
       for(i=0;i<data.length;i++){ 
        dataTemp.push(data[i][0]); // '1' index for getting that temp value. '0' for date.  
       } 

       c_temperature.series[0].data = dataTemp; 
       for(i=0;i<data.length;i++){ 
        dataTemp.push(data[i][1]); // '1' index for getting that temp value. '0' for date.  
       } 
       c_temperature.series[1].data = dataTemp; 
       } 

      }); 

function DrawCharts(){ 
     c_temperature = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'dashboard', 
       defaultSeriesType: 'spline', 
      }, 
      title: { 
       text: 'Temperatur' 
      }, 
      xAxis: { 
       type: 'datetime', 
       tickPixelInterval: 150, 
       maxZoom: 20 * 1000 
      }, 
      yAxis: { 
       minPadding: 0.2, 
       maxPadding: 0.2, 
       title: { 
        text: 'Value', 
        margin: 10 
       } 
      }, 
       legend:{ 
        enabled: false 
       }, 
       credits:{ 
        enabled: false 
       }, 
       series: [{ 
        name: 'Temperatur', 
        data: [] 
       }] 
     }); 

$(document).ready(function() { 
     DrawCharts(); 
     FetchDevices(); 
     FetchData(); 



    }); 

<body> 
<div id="dashboard"> 
</div> 
<div class="clear"></div> 
</body>

我調用PHP看起來像這樣：

try { 
    $con = new PDO("mysql:host=$servername; dbname=$dbname", $username, $password);# 
    echo 'Connected</br>'; 
    $sql = "select ZEIT,FEUCHTE,TEMPERATUR,LUX,PITCH from ".$mac. 
    " order by ID"; 

    foreach($con - > query($sql) as $row) { 
     $x = $row['ZEIT']; 
     /*$x = mktime()*1000;*/ 
     $y_h = (float) $row['FEUCHTE']; 
     /*$y_t=(float)$row['TEMPERATUR']; 
     $y_l=(float)$row['LUX']; 
     $y_a=(float)$row['PITCH'];*/ 
     $ret = array($x, $y_h, /*$y_t,$y_l,$y_a,$mac*/); 
     echo json_encode($ret); 
    } 
    $con = null; 
}

php代碼成功返回數據。但我沒有看到一個圖形，並且用瀏覽器控制檯進行調試也沒有給出任何線索。任何建議我做錯了什麼？

貝斯特問候

來源

2015-05-31 eyst

瀏覽器的錯誤控制檯上？這兩個函數都沒有關閉'}' – lshettyl

另外我在腳本標記 –

中看不到您的代碼您應該初始化Ajax回調中的圖表，因爲在那一刻您的請求還沒有完成。 –

你想用c_temperature.series[0].setData(dataTemp, true);和c_temperature.series[1].setData(dataTemp, true);。通過設置數據，實際上並沒有告訴高層重繪圖表，因此在更新數據時沒有任何事情發生。

來源

2015-05-31 11:07:06 FrankerZ

因此，圖表區域現在正確顯示，但沒有圖表， – eyst

圖表區域現在正在顯示，但沒有圖表。這似乎是我的ajax調用fetch_data.php沒有被執行。如果我取消註釋行提醒（「提取」）;沒有警報窗口會出現。我在做ajax調用有什麼問題嗎？ – eyst

我認爲它與您在進行操作時的順序有關：首先您創建圖表，然後進行ajax調用來獲取數據，但您沒有更新圖表。

嘗試在ajax成功回調中移動圖表創建：首先使用從PHP接收的數據填充系列數組，然後構造傳遞serie數組作爲選項的圖表;像這樣：

success: function(data) { 

    var data_series = []; 

    /* here populate the data_series array from your PHP results */ 

    new Highcharts.Chart({ 

    /* here other options... */ 

    series: data_series 

});

來源

2015-05-31 11:09:51 Moppo

好吧我會嘗試，ajax現在已經成功執行，我的php json echo被搞砸了 – eyst

解決方案是否工作？ – Moppo

所以這是我現在在做什麼：

function FetchData(){ 
     $.ajax({ 
      type: "POST", 
      url: 'php/reports/fetch_data.php', 
      data: "", 
      dataType: 'json', 
      success: function(data) { 
       var points = data; 
       c_temperature = new Highcharts.Chart({ 
        chart: { 
         renderTo: 'dashboard', 
         defaultSeriesType: 'spline', 
        }, 
        title: { 
         text: 'Temperatur' 
        }, 
        xAxis: { 
         type: 'datetime', 
         tickPixelInterval: 150, 
         maxZoom: 20 * 1000 
        }, 
        yAxis: { 
         minPadding: 0.2, 
         maxPadding: 0.2, 
         title: { 
          text: '°C', 
          margin: 10 
         } 
        }, 
         legend:{ 
          enabled: false 
         }, 
         credits:{ 
          enabled: false 
         }, 
         series: points 
       }); 

       /*dataTemp = []; 
       for(i=0;i<data.length;i++){ 
       dataTemp.push(data[0][i]); 

       } 
       c_temperature.series[0].setData(dataTemp, true); 
       for(i=0;i<data.length;i++){ 
        dataTemp.push(data[1][i]); 

        } 
       c_temperature.series[1].setData(dataTemp, true);*/ 
       } 

      }); 
    }

結果：它顯示的圖形，但仍沒有情節。 PHP的收益已被更改爲這個：

try { 
$con = new PDO("mysql:host=$servername; dbname=$dbname" ,$username, $password); 

$sql = "select ZEIT,FEUCHTE,TEMPERATUR,LUX,PITCH from ".$mac." where ID>'60080' order by ID"; 
$x = array(); 
$y_h = array(); 
foreach ($con->query($sql) as $row) 
    { 

    $x[]=$row['ZEIT']; 
    $y_h[]=(float)$row['FEUCHTE']; 

    $ret = array($x,$y_h); 
    } 
    echo json_encode($ret); 

$con = null;

}

來源

2015-05-31 14:39:25 eyst

確保您從PHP返回的數據採用正確格式的highchart – Moppo

回答

相關問題