flot chart從mysql中提取數據ajax js

我想從一個mysql數據庫中提取數據並繪製在一個flot圖表中。我看過幾十個帖子，但它不適合我。我順利拿到在PHP http://oven.luckybat.space/batoven1.0_s.php flot chart從mysql中提取數據ajax js

工作FLOT圖表首先這裏是爲 intellipool.overcast.net.au/PCsystem/getdataforflot.php 它似乎是在正確的格式的數據的URL。我想繪製溫度隨時間的變化

我得到一個「錯誤警報」當我加載運行此腳本

有一個

 <p> id="graph3" style="width:1000px;height:500px;">graph3</p>

在WordPress的網頁

頁

幫助讚賞

$.ajax({ 
    type: "GET", 
    dataType: 'json', 
    url: 'http://intellipool.overcast.net.au/PCsystem/getdataforflot.php', 


    error: function() { 
     alert("An error occurred."); 
    }, 
    success: function(data) { 
    alert("got the data dude"); 
    var options = { 
     xaxis: { 
     mode: "time", 
     mintickSize: [1, "hours"], 
     axisLabel: 'Time', 
     min: ((new Date().getTime()) - 24 * 60 * 60 * 1000), 
     max: (new Date()).getTime() 
     }, 
     yaxes: [{ 
     tickFormatter: function(val, axis) { 
      return val + "\u00B0C"; 
     }, 
     max: 50, 
     axisLabel: "Temperature", 
     axisLabelUseCanvas: true, 
     axisLabelFontSizePixels: 12, 
     axisLabelPadding: 5 
     }, { 
     position: "right", 
     tickFormatter: function(val, axis) { 
      return val + "%"; 
     }, 
     max: 100, 
     axisLabel: "Humidity", 
     axisLabelUseCanvas: true, 
     axisLabelFontSizePixels: 12, 
     axisLabelPadding: 10 
     }], 
    }; 
    $.plot("#graph3", data, options); 
    } 

});

按照說明我已經添加

  <header> ('Access-Control-Allow-Origin: *'); </header>

到http://intellipool.overcast.net.au/PCsystem/getdataforflot.php

我仍然得到錯誤，做我需要做更多的服務器上（通過舉辦聯絡？）

我需要分配JSON數據進入一個變量？

的全部功能（）是

function ajaxplot() { 
document.write('hello!! there ajaxplot() AJAX has been called'); 
$.ajaxSetup({ cache: false }); 

    $.ajax({ 
    type: "GET", 
    dataType: 'json', 
    url: 'http://intellipool.overcast.net.au/PCsystem/getdataforflot.php', 

    error: function() { 
    alert("An error occurred."); 
    }, 
success: function(data) { 
    alert("got the data dude"); 
    var options = { 
    xaxis: { 
    mode: "time", 
    mintickSize: [1, "hours"], 
    axisLabel: 'Time', 
    min: ((new Date().getTime()) - 24 * 60 * 60 * 1000), 
    max: (new Date()).getTime() 
    }, 
    yaxes: [{ 
    tickFormatter: function(val, axis) { 
     return val + "\u00B0C"; 
    }, 
    max: 50, 
    axisLabel: "Temperature", 
    axisLabelUseCanvas: true, 
    axisLabelFontSizePixels: 12, 
    axisLabelPadding: 5 
    }, { 
    position: "right", 
    tickFormatter: function(val, axis) { 
     return val + "%"; 
    }, 
    max: 100, 
    axisLabel: "Humidity", 
    axisLabelUseCanvas: true, 
    axisLabelFontSizePixels: 12, 
    axisLabelPadding: 10 
    }], 
}; 
$.plot("#graph3", data, options); 
} 

}); 
}

來源

2017-06-06 Justin Schmidt

它只是顯示'無「訪問控制允許來源」標頭出現在請求資源。「這個錯誤意味着你可以找到[這裏]（https://stackoverflow.com/a/20434788/2534646） – Curiousdev

所以$ ajax url需要與js代碼所在的網站完全相同的域名？？ –

是的，這就是問題所在，你有權訪問你所稱的服務器'http：// intellipool.overcast.net.au/PCsystem/getdataforflot.php'？如果是的話，你必須'啓用CORS'到服務器 – Curiousdev

打開以下功能

function ajaxplot() { 
$.ajaxSetup({ cache: false }); 

$.ajax({ 
    type: "GET", 
    dataType: 'json', 
    url: '/getdataforflot.php', 
    error: function() { 
     alert("An error occurred."); 
    }, 
    success: function(data) { 
    debugger; 
    alert("got the data dude"); 
    //var data1 = [[1496765558000,"26"],[1496764656000,"26"],[1496763754000,"26"],[1496762851000,"26"],[1496761949000,"26"]]; 
    var data1 = data; 
    var options = { 
     xaxis: { 
     mode: "time", 
     mintickSize: [1, "hours"], 
     axisLabel: 'Time', 
     min: ((new Date().getTime()) - 24 * 60 * 60 * 1000), 
     max: (new Date()).getTime() 
     }, 
     yaxes: [{ 
     tickFormatter: function(val, axis) { 
      return val + "\u00B0C"; 
     }, 
     max: 50, 
     axisLabel: "Temperature", 
     axisLabelUseCanvas: true, 
     axisLabelFontSizePixels: 12, 
     axisLabelPadding: 5 
     }, { 
     position: "right", 
     tickFormatter: function(val, axis) { 
      return val + "%"; 
     }, 
     max: 100, 
     axisLabel: "Humidity", 
     axisLabelUseCanvas: true, 
     axisLabelFontSizePixels: 12, 
     axisLabelPadding: 10 
     }], 
    }; 
    $.plot("#graph3", data1, options); 
    }, 

}); 
}

您http://overcast.net.au/js-tests/鏈接打開控制檯寫THEN

呼叫ajaxplot()在控制檯它應該工作。

見截圖

在控制檯中有許多錯誤解決一切，它應該工作..

來源

2017-06-07 05:44:39 Curiousdev

感謝您的幫助光盤，這工作！ –

不客氣@Justin Schmidt乾杯:) – Curiousdev

flot chart從mysql中提取數據ajax js

回答

相關問題