从mysql ajax js中提取数据的flot chart

时间:2017-06-06 11:42:45

标签: jquery mysql ajax charts flot

我正在尝试从mysql数据库中提取数据并在flot图表中绘图。我已经看过几十个帖子,但它对我不起作用。 我成功地获得了在php中工作的flot图表 http://oven.luckybat.space/batoven1.0_s.php

首先,这是数据的网址 intellipool.overcast.net.au/PCsystem/getdataforflot.php 它似乎是正确的格式。 我想绘制温度与时间的关系

当我加载运行此脚本的页面时,我收到'错误警告'

有一个

     <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);
}

 });
}

1 个答案:

答案 0 :(得分:0)

打开http://overcast.net.au/js-tests/链接打开控制台写下面的功能

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);
    },

});
}

,然后

在控制台中调用它ajaxplot()

查看截图 enter image description here

在你的控制台中有许多错误解决所有问题,它应该可以正常工作..