I am new here and have a question regarding the y2 axis in the c3 graph.
Namely, the values refer only to y and not also to y2 as I defined in the code.
I enabled y2 and assigned data14: ‘y2’
What am I doing wrong?
function parseData(createGraph) {
Papa.parse("log.csv", {
download: true,
complete: function(results) {
createGraph(results.data);
},
error: function(err) {
console.error("Napaka pri nalaganju podatkov:", err);
}
});
}
function createGraph(data) {
//var cas = [];
var dateTimeLabels = [];
var data2 = ["Temperatura CPU"];
var data10 = ["Temperatura okolica"];
var data14 = ["Delovanje ventilatorja"];
data = data.filter(row => row.length > 1);
var totalRows = data.length;
console.log("Skupno število vrstic po filtriranju:", totalRows);
var startIndex = Math.max(0, totalRows -288 );
for (var i = startIndex; i < totalRows; i++) {
console.log("Vrsta " + i + ": ", data[i]);
var date = data[i][0];
var time = data[i][1];
if (time && time.trim()) {
time = time.trim();
var formattedDateTime = `${date.split('-').reverse().join('-')}/${time.substring(0, 5)}`;
dateTimeLabels.push(formattedDateTime);
} else {
console.warn("čas ni definiran ali prazen za vrstico:", data[i]);
}
data2.push(data[i][2] !== undefined ? data[i][2] : null);
data10.push(data[i][3] !== undefined ? data[i][3] : null);
data14.push(data[i][4] !== undefined ? data[i][4] : null);
}
console.log("Oznake za datum in čas:", dateTimeLabels);
console.log("Temperatura CPU:", data2);
console.log("Temperatura okolica:", data10);
console.log("Delovanje ventilatorja (data14):", data14);
var chart = c3.generate({
bindto: '#chart',
size: {
height: 400,
width: window.innerWidth - 100
},
data: {
x: 'x',
columns: [
['x'].concat(dateTimeLabels),
data2,
data10,
data14
],
axes: {
data2: 'y',
data10: 'y',
data14: 'y2'
},
types:{
data2: 'line',
data10: 'line',
data14: 'line'
}
},
axis: {
x: {
type: 'category',
tick: {
rotate: 40,
multiline: false,
culling: {max: 12}
},
label: 'Čas'
},
y: {
label: 'Temperatura (°C)',
tick: {
format: d3.format(".1f")
}
},
y2: {
show: true,
label: 'Delovanje ventilatorja',
tick: {
format: d3.format(".0f"),
values: [0, 10]
}
}
},
zoom: {
enabled: true
},
grid: {
x: { show: true },
y: { show: true },
y2: { show: true }
}
});
}
parseData(createGraph);
I apologize, my code has Slovenian words
I tried to find the answer online, even with chatgpt, but it didn’t work
New contributor
Jan81 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2
I believe that the “axes” property names have to be the same as the first element of the associated data.
In other words, this:
var data2 = ["Temperatura CPU"];
Has to match the property name here:
data: {
...
axes: {
"Temperatura CPU": 'y',
// instead of data2: 'y',
...
},
types:{
"Temperatura CPU": 'line',
// here also
...
}
Check this example
function parseData(createGraph) {
/*
Papa.parse("log.csv", {
download: true,
complete: function(results) {
createGraph(results.data);
},
error: function(err) {
console.error("Napaka pri nalaganju podatkov:", err);
}
});
*/
const fakeData = [
['2000-01-01','18:00:00', 1,2,0],
['2000-01-02','18:00:00', 11,12,10],
['2000-01-03','18:00:00', 5,15,0],
['2000-01-04','18:00:00', 11,12,10],
['2000-01-05','18:00:00', 10,20,0],
['2000-01-06','18:00:00', 11,12,10],
];
createGraph(fakeData);
}
function createGraph(data) {
//var cas = [];
var dateTimeLabels = [];
var data2 = ["Temperatura CPU"];
var data10 = ["Temperatura okolica"];
var data14 = ["Delovanje ventilatorja"];
data = data.filter(row => row.length > 1);
var totalRows = data.length;
//console.log("Skupno število vrstic po filtriranju:", totalRows);
var startIndex = Math.max(0, totalRows -288 );
for (var i = startIndex; i < totalRows; i++) {
//console.log("Vrsta " + i + ": ", data[i]);
var date = data[i][0];
var time = data[i][1];
if (time && time.trim()) {
time = time.trim();
var formattedDateTime = `${date.split('-').reverse().join('-')}/${time.substring(0, 5)}`;
dateTimeLabels.push(formattedDateTime);
} else {
console.warn("čas ni definiran ali prazen za vrstico:", data[i]);
}
data2.push(data[i][2] !== undefined ? data[i][2] : null);
data10.push(data[i][3] !== undefined ? data[i][3] : null);
data14.push(data[i][4] !== undefined ? data[i][4] : null);
}
//console.log("Oznake za datum in čas:", dateTimeLabels);
//console.log("Temperatura CPU:", data2);
//console.log("Temperatura okolica:", data10);
//console.log("Delovanje ventilatorja (data14):", data14);
var chart = c3.generate({
bindto: '#chart',
size: {
height: 400,
width: window.innerWidth - 100
},
data: {
x: 'x',
columns: [
['x'].concat(dateTimeLabels),
data2,
data10,
data14
],
axes: {
"Temperatura CPU": 'y',
"Temperatura okolica": 'y',
"Delovanje ventilatorja": 'y2'
},
types:{
"Temperatura CPU": 'line',
"Temperatura okolica": 'line',
"Delovanje ventilatorja": 'line'
}
},
axis: {
x: {
type: 'category',
tick: {
rotate: 40,
multiline: false,
culling: {max: 12}
},
label: 'Čas'
},
y: {
label: 'Temperatura (°C)',
tick: {
format: d3.format(".1f")
}
},
y2: {
show: true,
label: 'Delovanje ventilatorja',
tick: {
format: d3.format(".0f"),
values: [0, 10]
}
}
},
zoom: {
enabled: true
},
grid: {
x: { show: true },
y: { show: true },
y2: { show: true }
}
});
}
parseData(createGraph);<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>
<div id="chart"></div>