flot chart pulling data from mysql ajax js

Question

i'm trying to pull data from a mysql database and plot in a flot chart. i've seen dozens of posts but it's not working for me. I successfully get flot charts working in php http://oven.luckybat.space/batoven1.0_s.php

firstly here's the url for the data intellipool.overcast.net.au/PCsystem/getdataforflot.php it seems to be in the correct format. i want to plot temperature versus time

I get an 'error alert' when i load the page that runs this script

there is a

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

on the wordpress webpage

help appreciated

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

});

as per instructions i've added

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

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

i'm still getting the error, do i need to do more on the server (by contacting hosting?)

do i need to assign JSON data coming in to a variable?

the full function() is

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

 });
}

it just shows `No 'Access-Control-Allow-Origin' header is present on the requested resource.` what this error means you can find [here](https://stackoverflow.com/a/20434788/2534646) — Curiousdev, Jun 06 '17 at 11:54
so the $ajax url need to be the exact same domain as the website where the js code is?? — Justin Schmidt, Jun 06 '17 at 12:22
Yes that's what exactly the problem is do you have rights to the server which you're calling `http://intellipool.overcast.net.au/PCsystem/getdataforflot.php` ? if yes than you must have to `Enable CORS` to the server — Curiousdev, Jun 06 '17 at 12:25
i've moved the $ajax url file to http://overcast.net.au/getdataforflot.p‌hp, still not woking! if i move all the .js files as well would that work? i can ask the webhoster whether he can change 'enable CORS to the server — Justin Schmidt, Jun 06 '17 at 13:17
ohh that's not an issue you just put this on top of getdataforflot.php `header('Access-Control-Allow-Origin: *');` and than try to access with same ajax function and make sure your syntax for ajax function is valid in your question it's invalid need some correction let me know if u r not able to correct — Curiousdev, Jun 06 '17 at 13:23
some correction has been made in question now it's syntactically fine — Curiousdev, Jun 06 '17 at 13:29
i've tried and failed! the question has been updated with what i've done — Justin Schmidt, Jun 06 '17 at 14:18
('Access-Control-Allow-Origin: *'); [[1496765558000,"26"],[1496764656000,"26"], — Justin Schmidt, Jun 06 '17 at 16:26
appears before the data on http://intellipool.overcast.net.au/PCsystem/getdataforflot.php is that an issue? — Justin Schmidt, Jun 06 '17 at 16:27
remove `document.write('hello!! there ajaxplot() AJAX has been called');` from function — Curiousdev, Jun 07 '17 at 05:42

score 0 · Answer 1 · answered Jun 07 '17 at 05:44

Open your http://overcast.net.au/js-tests/ link open console write below function

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

});
}

THEN

call ajaxplot() in console it should work.

See screenshot

In your console there are many errors resolve all and it should work..

flot chart pulling data from mysql ajax js

1 Answers1