I am using CanvasJS in order to draw some charts from the data of IoT spread around.
These charts are multi-series line charts and data is composed by the server side. I am developing in MVC .NET core. I attach here below a JSFiddle demonstrating the issue.
JS Fiddle Multi Series Strange Lines
The thing is that indeed I build this chart object a bit differently in my application but the problem with the view is the same. By something like the below code.
function createChart(incoming_data) {
var lcl = JSON.parse(JSON.stringify(incoming_data));
var titleText = eval('({' + lcl.title_dynamic + '})');
var dataVals = eval(lcl.my_data);
var chartCfg = {
zoomEnabled: true,
exportEnabled: true,
animationEnabled: true,
//height: 600,
axisX: {
title: "chart updates every 5 secs",
labelFontSize: 12,
titleFontSize: 20,
crosshair: {
enabled: true,
snapToDataPoint: true
},
labelAngle: -40,
labelFormatter: function (e) {
return CanvasJS.formatDate(e.value, "DD MMM HH:mm:ss");
}
},
axisY: {
crosshair: {
enabled: true,
snapToDataPoint: true,
valueFormatString: "#,##0"
}
},
toolTip: {
shared: false,
contentFormatter: function (e) {
var content = " ";
for (var i = 0; i < e.entries.length; i++) {
content += CanvasJS.formatDate(e.entries[i].dataPoint.x, "DD/MM/YYYY HH:mm:ss") + "<br/>";
content += " " + e.entries[i].dataSeries.name + " : " + "<strong>" + e.entries[i].dataPoint.y + "</strong>";
content += "<br/>";
}
return content;
}
},
legend: {
//dockInsidePlotArea: true,
cursor: "pointer",
verticalAlign: "center",
horizontalAlign : "left", // "top" , "bottom"
fontSize: 18,
itemmouseover: function (e) {
e.dataSeries.lineThickness = e.chart.data[e.dataSeriesIndex].lineThickness * 3;
e.dataSeries.markerSize = e.chart.data[e.dataSeriesIndex].markerSize + 5;
e.chart.render();
},
itemmouseout: function (e) {
e.dataSeries.lineThickness = e.chart.data[e.dataSeriesIndex].lineThickness / 3;
e.dataSeries.markerSize = e.chart.data[e.dataSeriesIndex].markerSize - 5;
e.chart.render();
},
itemclick: function (e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
e.chart.render();
}
}
};
chart = new CanvasJS.Chart("chart-container", chartCfg);
chart.options.title = titleText;
chart.options.data = dataVals;
Another strange thing is sometimes if I draw with a different dataset even with a larger one, that doesn’t happen.
PS. Mostly the data points I got from the server side are ~1.5million.
Any idea what can be the reason for this? Is it maybe because some points are the same datetime and different values?
.
