Using AJAX to request SQL Data - php

Question

I am using chart.js to create graphs. I'm trying to generate a graph for bdi vs date for specific customers based on their unique IDs. When you visit customer.php that specific customers ID can be found in the URL. I'm trying to request the bdi vs. date data from data.php and query it to generate a line graph.
This is what I have so far:
Customer.php (Chart.js Code);
$(document).ready(function(){
$.ajax({
url: "charts/data.php",
method: "GET",
success: function(data) {
console.log(data);
var bdi = [];
var date = [];
for(var i in data) {
date.push( data[i].date);
bdi.push(data[i].bdi);
}
var chartdata = {
labels: date,
datasets : [
{
label: 'BDI',
backgroundColor: 'rgba(239, 243, 255, 0.75)',
borderColor: 'rgba(84, 132, 255, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: bdi
}
]
};
var ctx = $("#mycanvas");
var barGraph = new Chart(ctx, {
type: 'line',
data: chartdata,
options: {
responsive: true,
legend: {
position: 'bottom',
},
scales: {
yAxes: [{
ticks: {
fontColor: "rgba(0,0,0,0.5)",
fontStyle: "bold",
beginAtZero: true,
maxTicksLimit: 5,
padding: 20
},
gridLines: {
drawTicks: false,
drawBorder: false,
}
}],
xAxes: [{
gridLines: {
zeroLineColor: "transparent",
display: false
},
ticks: {
padding: 20,
fontColor: "rgba(0,0,0,0.5)",
fontStyle: "bold"
}
}]
},
tooltips: {
backgroundColor: 'rgba(255,255,255)',
titleFontColor: 'rgb(184,189,201)',
bodyFontColor: 'black',
displayColors: false,
borderColor: 'rgb(214,217,225)',
borderWidth: 1,
caretSize: 5,
cornerRadius: 2,
xPadding: 10,
yPadding: 10
}
}
});
},
error: function(data) {
console.log(data);
}
});
});
data.php:
<?php
session_start();
//setting header to json
header('Content-Type: application/json');
require_once '../config/config.php';
require_once '../includes/auth_validate.php';
$cid = htmlentities ($_GET['customer_id']);
//get connection
//query to get data from the table
$sql = sprintf("SELECT treatment_log.bdi, treatment_log.date FROM treatment_log WHERE treatment_fk = ? ORDER BY created_at");
$stmt = mysqli_stmt_init($conn);
mysqli_stmt_prepare($stmt, $sql);
mysqli_stmt_bind_param($stmt, "i", $cid);
mysqli_stmt_execute($stmt);
$data = array();
mysqli_stmt_bind_result($stmt, $bdi, $date);
while(mysqli_stmt_fetch($stmt)) {
$data[] = array('bdi' => $bdi, 'date' => $date);
}
//free memory associated with result
$result->close();
//now print the data
print json_encode($data);
I cant seem to generate a graph. I'm not sure what I'm doing wrong!
Example of data to be graphed:
[{"bdi":"4","date":"2018-07-11"},{"bdi":"1","date":"2018-07-21"},{"bdi":"5","date":"2018-07-21"},{"bdi":"34","date":"2018-07-21"},{"bdi":"34","date":"2018-07-21"},{"bdi":"3","date":"2018-07-22"},{"bdi":"2","date":"2018-07-23"},{"bdi":"12","date":"2018-07-23"},{"bdi":"3","date":"2018-07-24"},{"bdi":"2","date":"2018-07-25"},{"bdi":"12","date":"2018-07-30"},{"bdi":"3","date":"2018-07-30"},{"bdi":"4","date":"2018-07-30"},{"bdi":"11","date":"2018-07-30"}]