When i am trying to load my chart.js line graph with about 2000 points graph "crash" as seen in photo. It works in all browsers includin Edge but not in internet explorer 11. I would need your help with this problem. Image: Randered graph.
Console doesnt return any error.
Chart.defaults.global.animation.duration = 0;
var ctx = document.getElementById("canvas").getContext("2d");
var config = {
data: lineChartData,
options: {
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: <?php echo $data['max']; ?>,
borderColor: 'rgba(231, 76, 60,1.0)',
borderWidth: 0.5
}, {
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: <?php echo $data['min']; ?>,
borderColor: 'rgba(231, 76, 60,1.0)',
borderWidth: 0.5
}]
},
responsive: true,
elements: {
point: {
radius: 0,
pointHitRadius: 1
}
},
hoverMode: 'index',
stacked: false,
tooltips: {
mode: 'index',
intersect: false
},
scales: {
xAxes: [{
type: 'time',
time: {
displayFormats: {
'millisecond': 'DD MMM',
'second': 'DD MMM',
'minute': 'DD MMM',
'hour': 'DD MMM',
'day': 'DD MMM',
'week': 'DD MMM',
'month': 'DD MMM',
'quarter': 'DD MMM',
'year': 'DD MMM',
},
unitStepSize: 1,
unit: 'day',
},
gridLines: {
display: false,
}
}]
}
}
};
config.data.datasets.forEach(function(dataset) {
dataset.borderColor = colr;
dataset.backgroundColor = colr;
});
window.myLine = Chart.Line(ctx, config);
I allready tried to change Doctype, checking code in JSHint but it doesn't work.
In some of your data, e.g.,
{y:25.9,x:"2018-04-18 12:37:38\n"}
You have an extra \n which is causing the date to be invalid, remove this and the graph appears to work as intended.
I modified some border widths.
<head>
<title>Test
</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script type="text/javascript">
if (Number.MAX_SAFE_INTEGER === undefined) {
console.log("max increase;");
Number.MAX_SAFE_INTEGER = 9007199254740991;
}
if (Number.MIN_SAFE_INTEGER === undefined) {
Number.MIN_SAFE_INTEGER = -9007199254740991;
console.log("min idecrease;");
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js">
</script>
<script type="text/javascript">
if (Number.MAX_SAFE_INTEGER === undefined) {
console.log("max increase;");
Number.MAX_SAFE_INTEGER = 9007199254740991;
}
if (Number.MIN_SAFE_INTEGER === undefined) {
Number.MIN_SAFE_INTEGER = -9007199254740991;
console.log("min idecrease;");
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js">
</script>
</head>
<body>
<div style="width:95%;">
<canvas id="canvas" style="height:400px;">
</canvas>
</div>
<script>
Chart.defaults.global.animation.duration = 0;
if (Number.MAX_SAFE_INTEGER === undefined) {
console.log("max increase;");
Number.MAX_SAFE_INTEGER = 9007199254740991;
}
if (Number.MIN_SAFE_INTEGER === undefined) {
Number.MIN_SAFE_INTEGER = -9007199254740991;
console.log("min idecrease;");
}
var ctx = document.getElementById("canvas").getContext("2d");
var yourImage = new Image();
yourImage.src ="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
yourImage.width ="2";
yourImage.height ="15";
var lineChartData = {
datasets: [
{
label: "0",
fill: false,
hidden: true,
borderWidth: 3,
data:[{
y:25.3,x:"2018-04-18 12:16:02"}
,{
y:25.9,x:"2018-04-18 12:23:30"}
,{
y:25.9,x:"2018-04-18 12:30:35"}
,{
y:25.9,x:"2018-04-18 12:37:38"}
,{
y:25.9,x:"2018-04-18 12:44:42"}
,{
y:25.8,x:"2018-04-18 12:51:45"}
,{
y:25.7,x:"2018-04-18 12:58:50"}
,{
y:25.6,x:"2018-04-18 13:00:37"}
,{
y:25.6,x:"2018-04-18 13:05:56"}
,{
y:26,x:"2018-04-18 13:09:49"}
,{
y:25.6,x:"2018-04-18 13:10:42"}
,{
y:26,x:"2018-04-18 13:11:35"}
,{
y:25.7,x:"2018-04-18 13:12:28"}
,{
y:25.8,x:"2018-04-18 13:13:21"}
,{
y:26,x:"2018-04-18 13:16:52"}
,{
y:26.2,x:"2018-04-18 13:20:23"}
,{
y:26.2,x:"2018-04-18 13:27:42"}
,{
y:26.2,x:"2018-04-18 13:34:44"}
,{
y:26.2,x:"2018-04-18 13:41:47"}
,{
y:26.3,x:"2018-04-18 13:42:40"}
,{
y:26.3,x:"2018-04-18 13:48:50"}
,{
y:26.4,x:"2018-04-18 13:55:51"}
,{
y:26.4,x:"2018-04-18 14:02:53"}
,{
y:26.5,x:"2018-04-18 14:09:55"}
,{
y:26.6,x:"2018-04-18 14:11:40"}
,{
y:26.6,x:"2018-04-18 14:16:57"}
,{
y:26.6,x:"2018-04-18 14:23:59"}
,{
y:26.7,x:"2018-04-18 14:31:01"}
,{
y:26.7,x:"2018-04-18 14:38:05"}
,{
y:26.7,x:"2018-04-18 14:45:07"}
,{
y:26.8,x:"2018-04-18 14:52:10"}
,{
y:26.8,x:"2018-04-18 14:59:12"}
,{
y:26.8,x:"2018-04-18 15:06:14"}
,{
y:26.8,x:"2018-04-18 15:13:17"}
,{
y:26.8,x:"2018-04-18 15:20:20"}
,{
y:26.8,x:"2018-04-18 15:27:23"}
,{
y:26.8,x:"2018-04-18 15:34:25"}
,{
y:26.9,x:"2018-04-18 15:37:58"}
,{
y:26.9,x:"2018-04-18 15:41:29"}
,{
y:27,x:"2018-04-18 15:48:34"}
,{
y:27,x:"2018-04-18 15:56:25"}
,{
y:27,x:"2018-04-18 16:03:29"}
,{
y:27.1,x:"2018-04-18 16:09:38"}
,{
y:27.1,x:"2018-04-18 16:10:31"}
,{
y:27.1,x:"2018-04-18 16:17:34"}
,{
y:27.1,x:"2018-04-18 16:24:38"}
,{
y:27.1,x:"2018-04-18 16:31:40"}
,{
y:27.2,x:"2018-04-18 16:38:43"}
]
}
, {
label: "2",
fill: false,
hidden: true,
borderWidth: 3,
data:[{
y:32.4,x:"2018-04-18 12:16:02"}
,{
y:32.7,x:"2018-04-18 12:17:48"}
,{
y:32.2,x:"2018-04-18 12:18:40"}
,{
y:32,x:"2018-04-18 12:20:27"}
,{
y:25.5,x:"2018-04-18 12:23:30"}
,{
y:25.2,x:"2018-04-18 12:27:55"}
,{
y:25.2,x:"2018-04-18 12:30:35"}
,{
y:25.5,x:"2018-04-18 12:35:52"}
,{
y:25.5,x:"2018-04-18 12:37:38"}
,{
y:25.7,x:"2018-04-18 12:44:42"}
,{
y:25.8,x:"2018-04-18 12:45:35"}
,{
y:25.9,x:"2018-04-18 12:51:45"}
,{
y:26.3,x:"2018-04-18 12:57:57"}
,{
y:26.4,x:"2018-04-18 12:58:50"}
,{
y:25.9,x:"2018-04-18 13:00:37"}
,{
y:26.3,x:"2018-04-18 13:01:30"}
,{
y:26.9,x:"2018-04-18 13:05:02"}
,{
y:27.4,x:"2018-04-18 13:05:56"}
,{
y:27.7,x:"2018-04-18 13:06:49"}
,{
y:29.5,x:"2018-04-18 13:07:42"}
,{
y:25.8,x:"2018-04-18 13:09:49"}
,{
y:26.5,x:"2018-04-18 13:10:42"}
,{
y:25.8,x:"2018-04-18 13:11:35"}
,{
y:25.5,x:"2018-04-18 13:12:28"}
,{
y:26.4,x:"2018-04-18 13:12:28"}
,{
y:25.8,x:"2018-04-18 13:13:21"}
,{
y:25.2,x:"2018-04-18 13:15:59"}
,{
y:25.6,x:"2018-04-18 13:16:52"}
,{
y:25.3,x:"2018-04-18 13:18:37"}
,{
y:25.4,x:"2018-04-18 13:20:23"}
,{
y:25,x:"2018-04-18 13:21:16"}
,{
y:25.3,x:"2018-04-18 13:23:01"}
,{
y:24.8,x:"2018-04-18 13:23:54"}
,{
y:24.5,x:"2018-04-18 13:24:11"}
,{
y:24.2,x:"2018-04-18 13:26:49"}
,{
y:24.6,x:"2018-04-18 13:27:42"}
,{
y:24.9,x:"2018-04-18 13:28:35"}
,{
y:25.1,x:"2018-04-18 13:30:20"}
,{
y:25.4,x:"2018-04-18 13:32:58"}
,{
y:25.1,x:"2018-04-18 13:34:44"}
,{
y:25.6,x:"2018-04-18 13:36:30"}
,{
y:25.9,x:"2018-04-18 13:38:16"}
,{
y:25.6,x:"2018-04-18 13:40:01"}
,{
y:25.3,x:"2018-04-18 13:40:54"}
,{
y:25.5,x:"2018-04-18 13:41:47"}
,{
y:25.6,x:"2018-04-18 13:42:40"}
,{
y:25.4,x:"2018-04-18 13:43:33"}
,{
y:25.1,x:"2018-04-18 13:44:25"}
,{
y:25.4,x:"2018-04-18 13:46:11"}
,{
y:25.6,x:"2018-04-18 13:47:57"}
,{
y:25.5,x:"2018-04-18 13:48:50"}
,{
y:25.3,x:"2018-04-18 13:52:20"}
,{
y:25,x:"2018-04-18 13:53:13"}
,{
y:24.7,x:"2018-04-18 13:54:06"}
,{
y:24.7,x:"2018-04-18 13:55:51"}
]
}
, {
label: "1",
fill: false,
borderWidth: 3,
data:[{
y:9.9,x:"2018-04-18 12:16:02"}
,{
y:9.6,x:"2018-04-18 12:16:55"}
,{
y:9.2,x:"2018-04-18 12:19:33"}
,{
y:8.8,x:"2018-04-18 12:22:37"}
,{
y:8.7,x:"2018-04-18 12:23:30"}
,{
y:8.6,x:"2018-04-18 12:24:23"}
,{
y:8.3,x:"2018-04-18 12:27:02"}
,{
y:8.1,x:"2018-04-18 12:28:49"}
,{
y:7.9,x:"2018-04-18 12:30:35"}
,{
y:7.8,x:"2018-04-18 12:32:21"}
,{
y:7.6,x:"2018-04-18 12:35:00"}
,{
y:7.5,x:"2018-04-18 12:37:38"}
,{
y:7.3,x:"2018-04-18 12:41:11"}
,{
y:7.1,x:"2018-04-18 12:43:49"}
,{
y:7.1,x:"2018-04-18 12:44:42"}
,{
y:6.9,x:"2018-04-18 12:51:45"}
,{
y:6.8,x:"2018-04-18 12:53:31"}
,{
y:6.7,x:"2018-04-18 12:58:50"}
,{
y:6.6,x:"2018-04-18 13:00:37"}
,{
y:6.5,x:"2018-04-18 13:05:56"}
,{
y:6.4,x:"2018-04-18 13:13:21"}
,{
y:6.3,x:"2018-04-18 13:20:23"}
,{
y:6.5,x:"2018-04-18 13:25:57"}
,{
y:6.4,x:"2018-04-18 13:27:42"}
,{
y:6.4,x:"2018-04-18 13:34:44"}
,{
y:6.3,x:"2018-04-18 13:39:08"}
,{
y:6.3,x:"2018-04-18 13:41:47"}
,{
y:6.3,x:"2018-04-18 13:48:50"}
]
}
,{
label: "6",
data: [{
y:"0",x:"2018-04-18 12:16:02"}
,{
y:"1",x:"2018-04-18 12:20:52"}
,{
y:"0",x:"2018-04-18 12:21:45"}
,{
y:"0",x:"2018-04-18 12:23:30"}
,{
y:"0",x:"2018-04-18 12:30:35"}
,{
y:"0",x:"2018-04-18 12:37:38"}
,{
y:"0",x:"2018-04-18 12:44:42"}
,{
y:"0",x:"2018-04-18 12:51:45"}
,{
y:"0",x:"2018-04-18 12:58:50"}
,{
y:"0",x:"2018-04-18 13:05:56"}
,{
y:"0",x:"2018-04-18 13:13:21"}
,{
y:"0",x:"2018-04-18 13:20:23"}
,{
y:"1",x:"2018-04-18 13:24:00"}
,{
y:"0",x:"2018-04-18 13:25:04"}
,{
y:"0",x:"2018-04-18 13:27:42"}
,{
y:"0",x:"2018-04-18 13:34:44"}
,{
y:"0",x:"2018-04-18 13:41:47"}
,{
y:"0",x:"2018-04-18 13:48:50"}
,{
y:"0",x:"2018-04-18 13:55:51"}
,{
y:"0",x:"2018-04-18 14:02:53"}
,{
y:"0",x:"2018-04-18 14:09:55"}
,{
y:"0",x:"2018-04-18 14:16:57"}
,{
y:"0",x:"2018-04-18 14:23:59"}
,{
y:"0",x:"2018-04-18 14:31:01"}
,{
y:"0",x:"2018-04-18 14:38:05"}
,{
y:"0",x:"2018-04-18 14:45:07"}
,{
y:"0",x:"2018-04-18 14:52:10"}
,{
y:"0",x:"2018-04-18 14:59:12"}
,{
y:"0",x:"2018-04-18 15:06:14"}
,{
y:"0",x:"2018-04-18 15:13:17"}
,{
y:"0",x:"2018-04-18 15:20:20"}
,{
y:"0",x:"2018-04-18 15:27:23"}
,{
y:"0",x:"2018-04-18 15:34:25"}
,{
y:"0",x:"2018-04-18 15:41:29"}
,{
y:"0",x:"2018-04-18 15:48:34"}
,{
y:"1",x:"2018-04-18 15:55:07"}
,{
y:"0",x:"2018-04-18 15:56:25"}
,{
y:"0",x:"2018-04-18 16:03:29"}
,{
y:"0",x:"2018-04-18 16:10:31"}
,{
y:"0",x:"2018-04-18 16:17:34"}
,{
y:"0",x:"2018-04-18 16:24:38"}
,{
y:"0",x:"2018-04-18 16:31:40"}
,{
y:"0",x:"2018-04-18 16:38:43"}
,{
y:"0",x:"2018-04-18 16:45:45"}
,{
y:"0",x:"2018-04-18 16:52:47"}
,{
y:"0",x:"2018-04-18 16:59:49"}
,{
y:"0",x:"2018-04-18 17:06:52"}
,{
y:"0",x:"2018-04-18 17:13:54"}
,{
y:"0",x:"2018-04-18 17:20:55"}
,{
y:"0",x:"2018-04-18 17:27:59"}
,{
y:"0",x:"2018-04-18 17:35:01"}
,{
y:"0",x:"2018-04-18 17:42:03"}
,{
y:"0",x:"2018-04-18 17:49:06"}
,{
y:"0",x:"2018-04-18 17:56:08"}
,{
y:"0",x:"2018-04-18 18:03:11"}
,{
y:"0",x:"2018-04-18 18:10:12"}
,{
y:"0",x:"2018-04-18 18:17:16"}
,{
y:"0",x:"2018-04-18 18:24:18"}
,{
y:"0",x:"2018-04-18 18:31:20"}
,{
y:"0",x:"2018-04-18 18:38:23"}
,{
y:"0",x:"2018-04-18 18:45:25"}
,{
y:"0",x:"2018-04-18 18:52:28"}
,{
y:"0",x:"2018-04-18 18:59:32"}
,{
y:"0",x:"2018-04-18 19:06:34"}
,{
y:"0",x:"2018-04-18 19:13:37"}
,{
y:"0",x:"2018-04-18 19:20:40"}
,{
y:"0",x:"2018-04-18 19:27:43"}
,{
y:"0",x:"2018-04-18 19:34:46"}
,{
y:"0",x:"2018-04-18 19:41:49"}
,{
y:"0",x:"2018-04-18 19:48:53"}
,{
y:"0",x:"2018-04-18 19:55:57"}
,{
y:"0",x:"2018-04-18 20:02:59"}
,{
y:"0",x:"2018-04-18 20:10:02"}
,{
y:"0",x:"2018-04-18 20:17:04"}
,{
y:"0",x:"2018-04-18 20:24:06"}
,{
y:"0",x:"2018-04-18 20:31:08"}
,{
y:"0",x:"2018-04-18 20:38:11"}
,{
y:"0",x:"2018-04-18 20:45:13"}
,{
y:"0",x:"2018-04-18 20:52:15"}
,{
y:"0",x:"2018-04-18 20:59:16"}
,{
y:"0",x:"2018-04-18 21:06:19"}
,{
y:"0",x:"2018-04-18 21:13:21"}
,{
y:"0",x:"2018-04-18 21:20:27"}
,{
y:"0",x:"2018-04-18 21:27:29"}
,{
y:"0",x:"2018-04-18 21:34:32"}
,{
y:"0",x:"2018-04-18 21:41:35"}
,{
y:"0",x:"2018-04-18 21:48:36"}
,{
y:"0",x:"2018-04-18 21:55:38"}
,{
y:"0",x:"2018-04-18 22:02:41"}
,{
y:"0",x:"2018-04-18 22:09:44"}
,{
y:"0",x:"2018-04-18 22:16:47"}
,{
y:"0",x:"2018-04-18 22:23:51"}
,{
y:"0",x:"2018-04-18 22:30:53"}
,{
y:"0",x:"2018-04-18 22:37:57"}
,{
y:"0",x:"2018-04-18 22:45:01"}
,{
y:"0",x:"2018-04-18 22:52:05"}
,{
y:"0",x:"2018-04-18 22:59:08"}
,{
y:"0",x:"2018-04-18 23:06:12"}
,{
y:"0",x:"2018-04-18 23:13:15"}
,{
y:"0",x:"2018-04-18 23:20:17"}
,{
y:"0",x:"2018-04-18 23:27:19"}
,{
y:"0",x:"2018-04-18 23:34:21"}
,{
y:"0",x:"2018-04-18 23:41:25"}
,{
y:"0",x:"2018-04-18 23:48:27"}
,{
y:"0",x:"2018-04-18 23:55:30"}
,{
y:"0",x:"2018-04-19 00:02:33"}
,{
y:"0",x:"2018-04-19 00:09:38"}
,{
y:"0",x:"2018-04-19 00:16:40"}
,{
y:"0",x:"2018-04-19 00:23:43"}
,{
y:"0",x:"2018-04-19 00:30:47"}
,{
y:"0",x:"2018-04-19 00:37:50"}
,{
y:"0",x:"2018-04-19 00:44:52"}
,{
y:"0",x:"2018-04-19 00:51:54"}
,{
y:"0",x:"2018-04-19 00:58:56"}
,{
y:"0",x:"2018-04-19 01:05:59"}
],
borderWidth: 3,
hiddenLegend: true,
fill: false,
pointStyle:['',yourImage,'','','','','','','','','','',yourImage,'','','','','','','','','','','','','','','','','','','','','','',yourImage,'','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','',yourImage,'','','','','','',yourImage,'','','',yourImage,'','','','','','','','',yourImage,'',yourImage,'','','',yourImage,'','','',yourImage,'','',yourImage,'','','','','','','','','','','','',]}
,],
yHighlightRange : {
begin: 2,
end: 8 }
};
var config={
data: lineChartData,
options: {
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 8,
label: {
content: "Ln2",
enabled: true,
position:'left',
}
,
borderColor: 'rgba(231, 76, 60,1.0)',
borderWidth: 3
}
,{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
label: {
content: "Lin1",
enabled: true,
position:'left',
}
,
value: 2,
borderColor: 'rgba(231, 76, 60,1.0)',
borderWidth: 3
}
]
}
,
responsive: true,
elements: {
point: {
radius: 0, pointHitRadius: 1}
}
,
hoverMode: 'index',
stacked: false,
tooltips: {
mode: 'index',
intersect: false
}
,
scales: {
xAxes: [{
type: 'time',
time: {
displayFormats: {
'millisecond': 'DD MMM',
'second': 'DD MMM',
'minute': 'DD MMM',
'hour': 'DD MMM',
'day': 'DD MMM',
'week': 'DD MMM',
'month': 'DD MMM',
'quarter': 'DD MMM',
'year': 'DD MMM',
}
,
unitStepSize: 1,
unit: 'day',
}
,
gridLines : {
display : false,
}
}
],
yAxes: [{
display: true,
scaleLabel: {
show: true,
labelString: "Value"
}
,ticks: {
suggestedMin:2 -5,
suggestedMax:8 +5,
}
,
}
]
}
}
};
var randomColorFactor = function() {
return Math.round(Math.random() * 255);
};
var randomColor = function(opacity) {
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '1.0') + ')';
};
config.data.datasets.forEach(function(dataset) {
var colr=randomColor(0.4);
dataset.borderColor = colr;
dataset.backgroundColor = colr;
}
);
window.myLine = Chart.Line(ctx,config);
</script>
</script>
<a href="http://www.chartjs.org/samples/latest/charts/line/multi-axis.html">LINK
</a>
</body>