Can someone help me understand why the green line dataset in chart.js is using multiple lines to connect random points? I've had this chart configured with the data below for awhile now and this just started happening today. The chart is populated using data from a custom API. The data that is being returned was changed up today but I don't see how that could effect it like this.
Im concerned about the bottom green line. It should just be one line connecting the data points. However, it connects random points with multiple lines rather than just one line. I have two charts set up this way. The second chart is behaving how it supposed to. I will include photos of that chart below as referrence.
Here it is by itself on the chart and zoomed in for better viewing. This has been driving me crazy because I cant figure out why it all of a sudden started doing this. Any help is greatly appreciated! Thanks!
const config = {
data: {
datasets: [{
type: "scatter",
label: "Meter VS. Temp",
data: [{
x: obj.model.data.average_dry_bulb_temperature[365],
y: obj.model.data.raw_value[365]
}, {
x: obj.model.data.average_dry_bulb_temperature[366],
y: obj.model.data.raw_value[366]
}, {
x: obj.model.data.average_dry_bulb_temperature[367],
y: obj.model.data.raw_value[367]
}, {
x: obj.model.data.average_dry_bulb_temperature[368],
y: obj.model.data.raw_value[368]
}, {
x: obj.model.data.average_dry_bulb_temperature[369],
y: obj.model.data.raw_value[369]
}, {
x: obj.model.data.average_dry_bulb_temperature[370],
y: obj.model.data.raw_value[370]
}, {
x: obj.model.data.average_dry_bulb_temperature[371],
y: obj.model.data.raw_value[371]
}, {
x: obj.model.data.average_dry_bulb_temperature[372],
y: obj.model.data.raw_value[372]
}, {
x: obj.model.data.average_dry_bulb_temperature[373],
y: obj.model.data.raw_value[373]
}, {
x: obj.model.data.average_dry_bulb_temperature[374],
y: obj.model.data.raw_value[374]
}, {
x: obj.model.data.average_dry_bulb_temperature[375],
y: obj.model.data.raw_value[375]
}, {
x: obj.model.data.average_dry_bulb_temperature[376],
y: obj.model.data.raw_value[376]
}, {
x: obj.model.data.average_dry_bulb_temperature[377],
y: obj.model.data.raw_value[377]
}, {
x: obj.model.data.average_dry_bulb_temperature[378],
y: obj.model.data.raw_value[378]
}, {
x: obj.model.data.average_dry_bulb_temperature[379],
y: obj.model.data.raw_value[379]
}, {
x: obj.model.data.average_dry_bulb_temperature[380],
y: obj.model.data.raw_value[380]
}, {
x: obj.model.data.average_dry_bulb_temperature[381],
y: obj.model.data.raw_value[381]
}, {
x: obj.model.data.average_dry_bulb_temperature[382],
y: obj.model.data.raw_value[382]
}, {
x: obj.model.data.average_dry_bulb_temperature[383],
y: obj.model.data.raw_value[383]
}, {
x: obj.model.data.average_dry_bulb_temperature[384],
y: obj.model.data.raw_value[384]
}, {
x: obj.model.data.average_dry_bulb_temperature[385],
y: obj.model.data.raw_value[385]
}, {
x: obj.model.data.average_dry_bulb_temperature[386],
y: obj.model.data.raw_value[386]
}, {
x: obj.model.data.average_dry_bulb_temperature[387],
y: obj.model.data.raw_value[387]
}, {
x: obj.model.data.average_dry_bulb_temperature[388],
y: obj.model.data.raw_value[388]
}, {
x: obj.model.data.average_dry_bulb_temperature[389],
y: obj.model.data.raw_value[389]
}, {
x: obj.model.data.average_dry_bulb_temperature[390],
y: obj.model.data.raw_value[390]
}, {
x: obj.model.data.average_dry_bulb_temperature[391],
y: obj.model.data.raw_value[391]
}, {
x: obj.model.data.average_dry_bulb_temperature[392],
y: obj.model.data.raw_value[392]
}, {
x: obj.model.data.average_dry_bulb_temperature[393],
y: obj.model.data.raw_value[393]
}, {
x: obj.model.data.average_dry_bulb_temperature[394],
y: obj.model.data.raw_value[394]
}, {
x: obj.model.data.average_dry_bulb_temperature[395],
y: obj.model.data.raw_value[395]
}
],
backgroundColor: 'rgb(255, 0, 0)',
pointRadius: 5
}, {
type: 'line',
label: 'High Limit',
data: [{
x: obj.model.data.average_dry_bulb_temperature[365],
y: obj.model.data.predicted_value_upper_bound[365]
}, {
x: obj.model.data.average_dry_bulb_temperature[366],
y: obj.model.data.predicted_value_upper_bound[366]
}, {
x: obj.model.data.average_dry_bulb_temperature[367],
y: obj.model.data.predicted_value_upper_bound[367]
}, {
x: obj.model.data.average_dry_bulb_temperature[368],
y: obj.model.data.predicted_value_upper_bound[368]
}, {
x: obj.model.data.average_dry_bulb_temperature[369],
y: obj.model.data.predicted_value_upper_bound[369]
}, {
x: obj.model.data.average_dry_bulb_temperature[370],
y: obj.model.data.predicted_value_upper_bound[370]
}, {
x: obj.model.data.average_dry_bulb_temperature[371],
y: obj.model.data.predicted_value_upper_bound[371]
}, {
x: obj.model.data.average_dry_bulb_temperature[372],
y: obj.model.data.predicted_value_upper_bound[372]
}, {
x: obj.model.data.average_dry_bulb_temperature[373],
y: obj.model.data.predicted_value_upper_bound[373]
}, {
x: obj.model.data.average_dry_bulb_temperature[374],
y: obj.model.data.predicted_value_upper_bound[374]
}, {
x: obj.model.data.average_dry_bulb_temperature[375],
y: obj.model.data.predicted_value_upper_bound[375]
}, {
x: obj.model.data.average_dry_bulb_temperature[376],
y: obj.model.data.predicted_value_upper_bound[376]
}, {
x: obj.model.data.average_dry_bulb_temperature[377],
y: obj.model.data.predicted_value_upper_bound[377]
}, {
x: obj.model.data.average_dry_bulb_temperature[378],
y: obj.model.data.predicted_value_upper_bound[378]
}, {
x: obj.model.data.average_dry_bulb_temperature[379],
y: obj.model.data.predicted_value_upper_bound[379]
}, {
x: obj.model.data.average_dry_bulb_temperature[380],
y: obj.model.data.predicted_value_upper_bound[380]
}, {
x: obj.model.data.average_dry_bulb_temperature[381],
y: obj.model.data.predicted_value_upper_bound[381]
}, {
x: obj.model.data.average_dry_bulb_temperature[382],
y: obj.model.data.predicted_value_upper_bound[382]
}, {
x: obj.model.data.average_dry_bulb_temperature[383],
y: obj.model.data.predicted_value_upper_bound[383]
}, {
x: obj.model.data.average_dry_bulb_temperature[384],
y: obj.model.data.predicted_value_upper_bound[384]
}, {
x: obj.model.data.average_dry_bulb_temperature[385],
y: obj.model.data.predicted_value_upper_bound[385]
}, {
x: obj.model.data.average_dry_bulb_temperature[386],
y: obj.model.data.predicted_value_upper_bound[386]
}, {
x: obj.model.data.average_dry_bulb_temperature[387],
y: obj.model.data.predicted_value_upper_bound[387]
}, {
x: obj.model.data.average_dry_bulb_temperature[388],
y: obj.model.data.predicted_value_upper_bound[388]
}, {
x: obj.model.data.average_dry_bulb_temperature[389],
y: obj.model.data.predicted_value_upper_bound[389]
}, {
x: obj.model.data.average_dry_bulb_temperature[390],
y: obj.model.data.predicted_value_upper_bound[390]
}, {
x: obj.model.data.average_dry_bulb_temperature[391],
y: obj.model.data.predicted_value_upper_bound[391]
}, {
x: obj.model.data.average_dry_bulb_temperature[392],
y: obj.model.data.predicted_value_upper_bound[392]
}, {
x: obj.model.data.average_dry_bulb_temperature[393],
y: obj.model.data.predicted_value_upper_bound[393]
}, {
x: obj.model.data.average_dry_bulb_temperature[394],
y: obj.model.data.predicted_value_upper_bound[394]
}, {
x: obj.model.data.average_dry_bulb_temperature[395],
y: obj.model.data.predicted_value_upper_bound[395]
}
],
fill: false,
pointRadius: 0,
borderColor: 'rgb(0, 0, 255)',
}, {
type: 'line',
label: 'Low Limit',
data: [{
x: obj.model.data.average_dry_bulb_temperature[365],
y: obj.model.data.predicted_value_lower_bound[365]
}, {
x: obj.model.data.average_dry_bulb_temperature[366],
y: obj.model.data.predicted_value_lower_bound[366]
}, {
x: obj.model.data.average_dry_bulb_temperature[367],
y: obj.model.data.predicted_value_lower_bound[367]
}, {
x: obj.model.data.average_dry_bulb_temperature[368],
y: obj.model.data.predicted_value_lower_bound[368]
}, {
x: obj.model.data.average_dry_bulb_temperature[369],
y: obj.model.data.predicted_value_lower_bound[369]
}, {
x: obj.model.data.average_dry_bulb_temperature[370],
y: obj.model.data.predicted_value_lower_bound[370]
}, {
x: obj.model.data.average_dry_bulb_temperature[371],
y: obj.model.data.predicted_value_lower_bound[371]
}, {
x: obj.model.data.average_dry_bulb_temperature[372],
y: obj.model.data.predicted_value_lower_bound[372]
}, {
x: obj.model.data.average_dry_bulb_temperature[373],
y: obj.model.data.predicted_value_lower_bound[373]
}, {
x: obj.model.data.average_dry_bulb_temperature[374],
y: obj.model.data.predicted_value_lower_bound[374]
}, {
x: obj.model.data.average_dry_bulb_temperature[375],
y: obj.model.data.predicted_value_lower_bound[375]
}, {
x: obj.model.data.average_dry_bulb_temperature[376],
y: obj.model.data.predicted_value_lower_bound[376]
}, {
x: obj.model.data.average_dry_bulb_temperature[377],
y: obj.model.data.predicted_value_lower_bound[377]
}, {
x: obj.model.data.average_dry_bulb_temperature[378],
y: obj.model.data.predicted_value_lower_bound[378]
}, {
x: obj.model.data.average_dry_bulb_temperature[379],
y: obj.model.data.predicted_value_lower_bound[379]
}, {
x: obj.model.data.average_dry_bulb_temperature[380],
y: obj.model.data.predicted_value_lower_bound[380]
}, {
x: obj.model.data.average_dry_bulb_temperature[381],
y: obj.model.data.predicted_value_lower_bound[381]
}, {
x: obj.model.data.average_dry_bulb_temperature[382],
y: obj.model.data.predicted_value_lower_bound[382]
}, {
x: obj.model.data.average_dry_bulb_temperature[383],
y: obj.model.data.predicted_value_lower_bound[383]
}, {
x: obj.model.data.average_dry_bulb_temperature[384],
y: obj.model.data.predicted_value_lower_bound[384]
}, {
x: obj.model.data.average_dry_bulb_temperature[385],
y: obj.model.data.predicted_value_lower_bound[385]
}, {
x: obj.model.data.average_dry_bulb_temperature[386],
y: obj.model.data.predicted_value_lower_bound[386]
}, {
x: obj.model.data.average_dry_bulb_temperature[387],
y: obj.model.data.predicted_value_lower_bound[387]
}, {
x: obj.model.data.average_dry_bulb_temperature[388],
y: obj.model.data.predicted_value_lower_bound[388]
}, {
x: obj.model.data.average_dry_bulb_temperature[389],
y: obj.model.data.predicted_value_lower_bound[389]
}, {
x: obj.model.data.average_dry_bulb_temperature[390],
y: obj.model.data.predicted_value_lower_bound[390]
}, {
x: obj.model.data.average_dry_bulb_temperature[391],
y: obj.model.data.predicted_value_lower_bound[391]
}, {
x: obj.model.data.average_dry_bulb_temperature[392],
y: obj.model.data.predicted_value_lower_bound[392]
}, {
x: obj.model.data.average_dry_bulb_temperature[393],
y: obj.model.data.predicted_value_lower_bound[393]
}, {
x: obj.model.data.average_dry_bulb_temperature[394],
y: obj.model.data.predicted_value_lower_bound[394]
}, {
x: obj.model.data.average_dry_bulb_temperature[395],
y: obj.model.data.predicted_value_lower_bound[395]
}],
fill: false,
pointRadius: 0,
borderColor: 'rgb(0, 128, 0)',
tension: 0.1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};
let ctx = document.getElementById('myChart').getContext('2d');
let myChart = new Chart(ctx, config);
This is the chart that is behaving normally. The line graph is connected by one line and it goes in order. Rather than connecting random plots with multiple lines like the one above. The data set for this chart is very similar to the one above. The only difference is the x-axis variables.
CodePudding user response：
This is because your first dataset is a scatter, and by default scatter charts dont draw lines between points so you either need to change the datasetType to line or add this line to the scatter dataset: showLine: true
EDIT:
Chart.js draws its points in order you provide them, the weird behaviour comes from the fact you give the points in a random order so if you want a smooth line you will need to sort the dataset first on incrementing x values and then provide it to chart.js