Data not displaying in Chart JS from PHP JSON

Question

Hi I'm trying to display a dynamic line chart using Chartjs with data pulled from SQL using PHP in JSON format. The data is successfully selected but does not successfully display just a blank chart, any help is appreciated.

$(document).ready(function() {
  var dataPointsA = []
  var dataPointsB = []

  $.ajax({
    type: 'GET',
    url: 'data.php',
    dataType: 'json',
    success: function(field) {

      for (var i = 0; i < field.length; i++) {
        dataPointsA.push({
          x: field[i].datetime,
          y: field[i].roomtemp
        });
        dataPointsB.push({
          x: field[i].datetime,
          y: field[i].tanktemp
        });
      }
console.log(field);
      var chartdata = {
        title: {
          text: "Fish Tank Monitor"
        },

        data: [{
          type: "line",
          name: "line1",
          dataPoints: dataPointsA
        }, {
          type: "line",
          name: "line2",
          dataPoints: dataPointsB
        }, ]
      };
console.log(chartdata);

      var ctx = mycanvas.getContext('2d');

      var barGraph = new Chart(ctx, {
                type: 'line',
                data: chartdata,
                backgroundColor: 'rgba(0, 119, 204, 0.3)'
            });
    }
  });
});

Example JSON

[{"datetime":"2018-07-28 22:33:00.000","roomtemp":26.9,"tanktemp":28.4},{"datetime":"2018-07-28 22:32:00.000","roomtemp":26.9,"tanktemp":28.4},{"datetime":"2018-07-28 22:31:00.000","roomtemp":26.9,"tanktemp":28.4},{"datetime":"2018-07-28 22:30:00.000","roomtemp":26.9,"tanktemp":28.4},{"datetime":"2018-07-28 22:29:00.000","roomtemp":26.9,"tanktemp":28.4},{"datetime":"2018-07-28 22:28:00.000","roomtemp":26.9,"tanktemp":28.4},{"datetime":"2018-07-28 22:27:00.000","roomtemp":26.9,"tanktemp":28.4},{"datetime":"2018-07-28 22:26:00.000","roomtemp":26.8,"tanktemp":28.4},{"datetime":"2018-07-28 22:25:00.000","roomtemp":26.9,"tanktemp":28.4},{"datetime":"2018-07-28 22:24:00.000","roomtemp":26.9,"tanktemp":28.4}]

sangram hati · Accepted Answer · 2018-07-28 21:49:27Z

1

I think its happeing due to incorrect date time format. datetime key you used is acting as a string. I think you need to apply one date and time filter

answered Jul 28, 2018 at 21:49

sangram hati

112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Data not displaying in Chart JS from PHP JSON

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related