Chart.js version: 2.9.4 I have a function that renders a chart based on inputData coming from PHP, displaying multiple axes, based on the sensorType (always maximum of two axes):
function renderChart(chart, sensorDataList) {
var dates = {};
var datasets = [];
var yAxes = {};
var sensorTypes = {};
sensorDataList.forEach(function(sensorData, index) {
var sensorId = sensorData.id;
var sensorName = sensorData.Nome;
var sensorType = sensorData.tipo_sensore.nome;
var jsonData = sensorData.jsonData;
console.log(sensorType);
if (!sensorTypes[sensorType]) {
sensorTypes[sensorType] = 'y-axis-' + Object.keys(sensorTypes).length;
yAxes.push({
id: sensorTypes[sensorType],
type: 'linear',
position: yAxes.length === 0 ? 'left' : 'right',
display: true,
scaleLabel: {
display: true,
labelString: sensorType
}
});
}
dates = jsonData.map(function(item) {
var unixTimestamp = item.data_lettura;
var date = luxon.DateTime.fromMillis(unixTimestamp);
var date = date.minus({
hours: 2
});
var formattedDate = date.toFormat('dd-MM-yy HH:mm');
return formattedDate;
}).reverse();
var values = jsonData.map(function(item) {
return parseFloat(item.dati[sensorId]);
}).reverse();
var color = getRandomColor();
datasets.push({
label: sensorName,
data: values,
borderColor: color,
borderWidth: 2,
fill: false,
yAxisID: sensorTypes[sensorType]
});
});
console.log(yAxes);
console.log(datasets);
var ctx = chart[0].getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: dates, // Assuming dates are the same for all sensors
datasets: datasets
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
type: 'time',
time: {
unit: 'day'
},
title: {
display: true,
text: 'Data'
}
},
y: yAxes
}
}
});
}
By logging the two arrays (yAxes and datasets) everything looks perfect:
yAxes:
Array [ {…}, {…} ]
0: Object { id: "y-axis-0", type: "linear", position: "left", … }
display: true
id: "y-axis-0"
position: "left"
scaleLabel: Object { display: true, labelString: "Deformazione" }
type: "linear"
<prototype>: Object { … }
1: Object { id: "y-axis-1", type: "linear", position: "right", … }
display: true
id: "y-axis-1"
position: "right"
scaleLabel: Object { display: true, labelString: "Temperatura" }
type: "linear"
<prototype>: Object { … }
length: 2
<prototype>: Array []
datasets:
Array(4) [ {…}, {…}, {…}, {…} ]
0: Object { label: "sez. 1_C1", borderColor: "#FD796E", borderWidth: 2, … }
_meta: Object { 2: {…} }
borderColor: "#FD796E"
borderWidth: 2
data: Array(4) [ 1891.047, 1891.463, 1891.848, … ]
fill: false
label: "sez. 1_C1"
yAxisID: "y-axis-0"
<prototype>: Object { … }
1: Object { label: "sez. 1_C2", borderColor: "#967305", borderWidth: 2, … }
_meta: Object { 2: {…} }
borderColor: "#967305"
borderWidth: 2
data: Array(4) [ 1529.378, 1529.778, 1530.14, … ]
fill: false
label: "sez. 1_C2"
yAxisID: "y-axis-0"
<prototype>: Object { … }
2: Object { label: "sez. 1_C3", borderColor: "#24D303", borderWidth: 2, … }
_meta: Object { 2: {…} }
borderColor: "#24D303"
borderWidth: 2
data: Array(4) [ 992.7305, 993.128, 993.5017, … ]
fill: false
label: "sez. 1_C3"
yAxisID: "y-axis-0"
<prototype>: Object { … }
3: Object { label: "Temperatura sez.1", borderColor: "#B54A8C", borderWidth: 2, … }
_meta: Object { 2: {…} }
borderColor: "#B54A8C"
borderWidth: 2
data: Array(4) [ 21.3703, 21.34067, 21.31012, … ]
fill: false
label: "Temperatura sez.1"
yAxisID: "y-axis-1"
<prototype>: Object { … }
length: 4
<prototype>: Array []
And I still get the error: Uncaught TypeError: yScale is undefined. I've tried debugging and everything looks good. Any idea how to fix this?
There is a syntax error, simply replace:
scales: {
x: {
...
},
y: yAxes
}
with:
scales: {
x: {
...
},
yAxes: yAxes
}