I've been struggling to pass my data to the graph, but it just won't cooperate. Interestingly, if I manually input numbers like
data: [1,2,3]
then it works perfectly fine. In my code, you'll notice that I've console.logged both data.weight and data.goal, and they show up in the console as expected.
Take a look at the code snippet below:
var endpoint = '/api/data';
var defaultDataW = [];
var defaultDataG = [];
$.ajax({
method: 'GET',
url: endpoint,
success: function(data){
console.log(data.weight);
console.log(data.goal);
defaultDataW = data.weight;
defaultDataG = data.goal;
var graph = document.getElementById("weight-graph");
Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;
var dataFirst = {
label: "Your Weight (Kg)",
data: defaultDataW,
lineTension: 0,
fill: false,
borderColor: 'red'
};
var dataSecond = {
label: "Your Goal (Kg)",
data: defaultDataG,
lineTension: 0,
fill: false,
borderColor: 'blue'
};
var DateData = {
labels: [],
datasets: [dataFirst, dataSecond]
};
var chartOptions = {
legend: {
display: true,
position: 'top',
labels: {
boxWidth: 80,
fontColor: 'black'
}
}
};
var lineChart = new Chart(graph, {
type: 'line',
data: DateData,
options: chartOptions
});
},
error: function(error_data){
console.log("Error");
console.log(error_data);
}
})