My attempt to visualize the data stored in a Google Sheet using Chart.js resulted in a multi-axis line chart. The data I have looks like this:
https://i.stack.imgur.com/F8lC7.png
When trying out the following code, I encountered an issue where only the first two data points (0:00 and 1:00) were displayed instead of the entire dataset. Additionally, there was only a single Y-axis present. Can someone identify what's wrong with my code?
https://i.stack.imgur.com/gFtkq.png
function GenerateChart(labels, valuesA, valuesB, title) {
var data = {
labels: labels,
datasets: [{
label: 'Temperature',
data: valuesA,
},
{
label: title,
data: valuesB,
}]
};
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Temperature',
fill: false,
data: valuesA,
backgroundColor: ['rgb(255, 99, 132, 0.8)']
},{
label: 'Relative Humidity',
fill: false,
data: valuesB,
backgroundColor: ['rgb(255, 99, 132, 0.8)'],
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {
beginAtZero: true,
scaleLabel: {
display: false,
labelString: ''
}
}
}],
yAxes: [{
scaleLabel: {
display: false,
labelString: ''
}
}]
},
},
}
]}})
return myChart;
}
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var json = JSON.parse(this.response);
console.log(json);
// Map json labels back to values array
var labels = json.feed.entry.map(function (e) {
return e.gsx$tag.$t;
});
// Map json values back to values array
var valuesA = json.feed.entry.map(function (e) {
return e.gsx$dailytemperature.$t
});
// Map json values back to values array
var valuesB = json.feed.entry.map(function (e) {
return e.gsx$dailyrh.$t
});
GenerateChart(labels, valuesA, valuesB, "Temperature", "Relative Humidity");
}
};
xhttp.open("GET", "https://spreadsheets.google.com/", false);
xhttp.send();
Your assistance would be greatly appreciated. Thank you for your help.