Handling empty data in Jscharting
Use regular Javascript to filter out the bad data.
To remove entries/rows where s1 or s2 is null or undefined:
jsonData = jsonData.filter( ({s1, s2}) => s1 != null && s2 != null);
I think you need to use parseFloat(d.s1) || null.
And, on series, set emptyPointMode to default, ignore, or treatAsZero.
Demo JsFiddle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Empty point mode</title>
</head>
<body>
<script src="https://code.jscharting.com/latest/jscharting.js"></script>
<div id="chartDiv" style="width: 100%; height: 400px;"></div>
<script>
function showData(t) {
var jsonData = JSC.csv2Json(t, {
coerce: function (d) {
return {
Date: d.date,
s1: (parseFloat(d.s1) || null),
s2: (parseFloat(d.s2) || null),
s3: (parseFloat(d.s3) || null),
}
}
});
var s1Points = JSC.nest()
.key('Date')
.rollup('s1')
.points(jsonData);
var s2Points = JSC.nest()
.key('Date')
.rollup('s2')
.points(jsonData);
var s3Points = JSC.nest()
.key('Date')
.rollup('s3')
.points(jsonData);
var chart = JSC.chart('chartDiv', {
debug: true,
type: 'line',
legend_visible: true,
title: {
position: 'top',
padding: 7,
fill: ['orange', 'orange', 0],
opacity: 0.4,
boxVisible: true,
label: {
text: 'emptyPointMode: default / ignore / treatAsZero',
align: 'left'
}
},
legend: {
position: 'inside right top',
defaultEntry_value: '%value'
},
defaultCultureName: "hu-SK",
xAxis: {
crosshair_enabled: true,
scale: {
type: 'time',
time: {
parser: 'YYYY-MM-DD',
}
},
formatString: 'dd',
},
yAxis: {
orientation: 'opposite',
formatString: 'c'
},
defaultSeries: {
firstPoint_label_text: '<b>%seriesName</b>',
defaultPoint_marker: {
type: 'circle',
fill: 'white',
outline: { width: 2, color: 'currentColor' }
}
},
series: [
{
name: 'default',
points: s1Points,
emptyPointMode: 'default'
},
{
name: 'ignore',
points: s2Points,
emptyPointMode: 'ignore'
},
{
name: 'treatAsZero',
points: s3Points,
emptyPointMode: 'treatAsZero'
}
]
});
}
const data = `date,s1,s2,s3
2022-01-1,22.2,33,15
2022-01-2,25.2,30,17
2022-01-3,30.1.2,35,13
2022-01-4,20.2,25,15
2022-01-5,,,
2022-01-6,22.2,30,15
2022-01-7,23.2,31,15,
2022-01-8,23.2,31.5,16
`;
showData(data);
</script>
</body>
</html>In above demo 5th day has no data.
The demo may not run on Stackoverflow. Use the JsFiddle link.