I am working on a chart which reads data from a .csv file and displays the emisivities of four surface types against wavelenghts between 3.660 and 14.559. Example of my source dataframe (in total 531 observations):
x1,x2,y_oakface,y_clybrkcm,y_distd_wn,y_sndpgaz1
3.66027,2732.04,0.965892,0.531653,0.974703,0.710034
3.66544,2728.18,0.965664,0.525966,0.974765,0.703811
3.67063,2724.32,0.968696,0.527477,0.974827,0.709377
…
14.397,694.587,0.975169,0.976188,0.960436,0.982283
14.4775,690.728,0.974855,0.975476,0.959794,0.984235
14.5588,686.869,0.973462,0.977953,0.959163,0.981849
I managed to get the graph working by using the values in x1 column as labels:
emissivity chart
I would like to have the x axis labels displayed as integers between 3-14. What is the best way to go about this? See my code below.
d3.csv("data/emisdata2.csv").then(makeChart);
// Plot the data with Chart.js
function makeChart(emisdata) {
var wlLabels = emisdata.map(function (d) {
return d.x1;
});
var oakData = emisdata.map(function (d) {
return d.y_oakface;
});
var brickData = emisdata.map(function (d) {
return d.y_clybrkcm;
});
var soilData = emisdata.map(function (d) {
return d.y_sndpgaz1;
});
var waterData = emisdata.map(function (d) {
return d.y_distd_wn;
});
const data = {
labels: wlLabels,
datasets: [
{
label: "Oak leaf",
data: oakData,
borderColor: "green",
backgroundColor: 'rgba(0, 77, 0, 0.5)',
pointStyle: false,
},
{
label: "Clay brick",
data: brickData,
borderColor: "red",
backgroundColor: 'rgba(255, 0, 0, 0.5)',
pointStyle: false,
},
{
label: "Sandy soil",
data: soilData,
borderColor: 'rgba(139, 69, 19, 1)',
backgroundColor: 'rgba(139, 69, 19, 0.5)',
pointStyle: false,
},
{
label: "Distilled water",
data: waterData,
borderColor: 'blue',
backgroundColor: 'rgba(0, 0, 255, 0.5)',
pointStyle: false,
}
]
}
const config = {
type: "line",
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Interactive feature 2',
},
},
scales: {
x: {
display: true,
title: {
display: true,
text: 'Wavelength (micrometer)', // X-axis label
},
ticks:{
stepSize: 1,
precision: 0,
}
},
y: {
display: true,
title: {
display: true,
text: 'Emissivity', // Y-axis label
},
suggestedMax: 1,
},
},
}
}
var chart = new Chart("myChart", config)}
I tried playing around with the tick configuration and also defining the x axis manually but neither worked. When I remove the labels the lines disappear.