{"action":"opened","issue":{"url":"https://api.github.com/repos/chartjs/Chart.js/issues/5882","repository_url":"https://api.github.com/repos/chartjs/Chart.js","labels_url":"https://api.github.com/repos/chartjs/Chart.js/issues/5882/labels{/name}","comments_url":"https://api.github.com/repos/chartjs/Chart.js/issues/5882/comments","events_url":"https://api.github.com/repos/chartjs/Chart.js/issues/5882/events","html_url":"https://github.com/chartjs/Chart.js/issues/5882","id":387156000,"node_id":"MDU6SXNzdWUzODcxNTYwMDA=","number":5882,"title":"Performance issue (Line chart with time series data)","user":{"login":"mzabuawala","id":19573369,"node_id":"MDQ6VXNlcjE5NTczMzY5","avatar_url":"https://avatars1.githubusercontent.com/u/19573369?v=4","gravatar_id":"","url":"https://api.github.com/users/mzabuawala","html_url":"https://github.com/mzabuawala","followers_url":"https://api.github.com/users/mzabuawala/followers","following_url":"https://api.github.com/users/mzabuawala/following{/other_user}","gists_url":"https://api.github.com/users/mzabuawala/gists{/gist_id}","starred_url":"https://api.github.com/users/mzabuawala/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mzabuawala/subscriptions","organizations_url":"https://api.github.com/users/mzabuawala/orgs","repos_url":"https://api.github.com/users/mzabuawala/repos","events_url":"https://api.github.com/users/mzabuawala/events{/privacy}","received_events_url":"https://api.github.com/users/mzabuawala/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-12-04T07:36:42Z","updated_at":"2018-12-04T07:36:42Z","closed_at":null,"author_association":"NONE","body":"When we have large dataset then toggeling legend hangs the browser unless the rendering is complete.\r\n\r\nCodepen: https://codepen.io/anon/pen/GwLMGP\r\n\r\nIn case codepen gets deleted here is the sample code to reproduce the issue, once the chart is rendered try to toggele IO or CLIENT dataset.\r\n\r\n\r\n```\r\n<!doctype html>\r\n<html>\r\n\r\n<head>\r\n\t<title>Line Chart</title>\r\n\t<script src=\"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js\"></script>\r\n\t<script src=\"https://www.chartjs.org/dist/2.7.3/Chart.js\"></script>\r\n\t<script src=\"https://www.chartjs.org/samples/latest/utils.js\"></script>\r\n\t<style>\r\n\t\tcanvas {\r\n\t\t\t-moz-user-select: none;\r\n\t\t\t-webkit-user-select: none;\r\n\t\t\t-ms-user-select: none;\r\n\t\t}\r\n\t</style>\r\n</head>\r\n\r\n<body>\r\n\t<div style=\"width:75%;\">\r\n\t\t<canvas id=\"canvas\"></canvas>\r\n\t</div>\r\n\t<br>\r\n\t<br>\r\n\t<button id=\"randomizeData\">Randomize Data</button>\r\n\t<button id=\"addDataset\">Add Dataset</button>\r\n\t<button id=\"removeDataset\">Remove Dataset</button>\r\n\t<button id=\"addData\">Add Data</button>\r\n\t<button id=\"removeData\">Remove Data</button>\r\n\t<script>\r\n\t\tvar timeFormat = 'MM/DD/YYYY HH:mm';\r\n\r\n    function generate_data(n) {\r\n      var data = [];\r\n      for (var i=0; i<= n; i++) {\r\n\t\tdata.push({\r\n\t\t\tx: newDateString(Math.floor(Math.random() * 6) + 1 ),\r\n\t\t\ty: randomScalingFactor()\r\n\t\t});\r\n      }\r\n      return data;\r\n    }\r\n\r\n\t\tfunction newDate(days) {\r\n\t\t\treturn moment().add(days, 'd').toDate();\r\n\t\t}\r\n\r\n\t\tfunction newDateString(days) {\r\n\t\t\treturn moment().add(days, 'd').format(timeFormat);\r\n\t\t}\r\n\r\n\t\tvar color = Chart.helpers.color;\r\n\t\tvar config = {\r\n\t\t\ttype: 'line',\r\n\t\t\tdata: {\r\n\t\t\t\tlabels: [ // Date Objects\r\n\t\t\t\t\tnewDate(0),\r\n\t\t\t\t\tnewDate(1),\r\n\t\t\t\t\tnewDate(2),\r\n\t\t\t\t\tnewDate(3),\r\n\t\t\t\t\tnewDate(4),\r\n\t\t\t\t\tnewDate(5),\r\n\t\t\t\t\tnewDate(7),\r\n\t\t\t\t\tnewDate(8),\r\n\t\t\t\t\tnewDate(9),\r\n\t\t\t\t\tnewDate(10),\r\n\t\t\t\t],\r\n\t\t\t\tdatasets: [{\r\n\t\t\t\t\tlabel: 'LOCK',\r\n\t\t\t\t\tbackgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),\r\n\t\t\t\t\tborderColor: window.chartColors.red,\r\n\t\t\t\t\tfill: false,\r\n\t\t\t\t\tdata: generate_data(80000),\r\n\t\t\t\t}, {\r\n\t\t\t\t\tlabel: 'IO',\r\n\t\t\t\t\tbackgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),\r\n\t\t\t\t\tborderColor: window.chartColors.blue,\r\n\t\t\t\t\tfill: false,\r\n\t\t\t\t\tdata: generate_data(50000),\r\n\t\t\t\t}, {\r\n\t\t\t\t\tlabel: 'CLIENT',\r\n\t\t\t\t\tbackgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),\r\n\t\t\t\t\tborderColor: window.chartColors.green,\r\n\t\t\t\t\tfill: false,\r\n\t\t\t\t\tdata: generate_data(2500),\r\n\t\t\t\t}]\r\n\t\t\t},\r\n\t\t\toptions: {\r\n\t\t\t\ttitle: {\r\n\t\t\t\t\ttext: 'Chart.js Time Scale'\r\n\t\t\t\t},\r\n\t\t\t\tscales: {\r\n\t\t\t\t\txAxes: [{\r\n\t\t\t\t\t\ttype: 'time',\r\n\t\t\t\t\t\ttime: {\r\n\t\t\t\t\t\t\tformat: timeFormat,\r\n\t\t\t\t\t\t\t// round: 'day'\r\n\t\t\t\t\t\t\ttooltipFormat: 'll HH:mm'\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t\tscaleLabel: {\r\n\t\t\t\t\t\t\tdisplay: true,\r\n\t\t\t\t\t\t\tlabelString: 'Date'\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}],\r\n\t\t\t\t\tyAxes: [{\r\n\t\t\t\t\t\tscaleLabel: {\r\n\t\t\t\t\t\t\tdisplay: true,\r\n\t\t\t\t\t\t\tlabelString: 'value'\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}]\r\n\t\t\t\t},\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\twindow.onload = function() {\r\n\t\t\tvar ctx = document.getElementById('canvas').getContext('2d');\r\n\t\t\twindow.myLine = new Chart(ctx, config);\r\n\r\n\t\t};\r\n\r\n\t\tdocument.getElementById('randomizeData').addEventListener('click', function() {\r\n\t\t\tconfig.data.datasets.forEach(function(dataset) {\r\n\t\t\t\tdataset.data.forEach(function(dataObj, j) {\r\n\t\t\t\t\tif (typeof dataObj === 'object') {\r\n\t\t\t\t\t\tdataObj.y = randomScalingFactor();\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tdataset.data[j] = randomScalingFactor();\r\n\t\t\t\t\t}\r\n\t\t\t\t});\r\n\t\t\t});\r\n\r\n\t\t\twindow.myLine.update();\r\n\t\t});\r\n\r\n\t\tvar colorNames = Object.keys(window.chartColors);\r\n\t\tdocument.getElementById('addDataset').addEventListener('click', function() {\r\n\t\t\tvar colorName = colorNames[config.data.datasets.length % colorNames.length];\r\n\t\t\tvar newColor = window.chartColors[colorName];\r\n\t\t\tvar newDataset = {\r\n\t\t\t\tlabel: 'Dataset ' + config.data.datasets.length,\r\n\t\t\t\tborderColor: newColor,\r\n\t\t\t\tbackgroundColor: color(newColor).alpha(0.5).rgbString(),\r\n\t\t\t\tdata: [],\r\n\t\t\t};\r\n\r\n\t\t\tfor (var index = 0; index < config.data.labels.length; ++index) {\r\n\t\t\t\tnewDataset.data.push(randomScalingFactor());\r\n\t\t\t}\r\n\r\n\t\t\tconfig.data.datasets.push(newDataset);\r\n\t\t\twindow.myLine.update();\r\n\t\t});\r\n\r\n\t\tdocument.getElementById('addData').addEventListener('click', function() {\r\n\t\t\tif (config.data.datasets.length > 0) {\r\n\t\t\t\tconfig.data.labels.push(newDate(config.data.labels.length));\r\n\r\n\t\t\t\tfor (var index = 0; index < config.data.datasets.length; ++index) {\r\n\t\t\t\t\tif (typeof config.data.datasets[index].data[0] === 'object') {\r\n\t\t\t\t\t\tconfig.data.datasets[index].data.push({\r\n\t\t\t\t\t\t\tx: newDate(config.data.datasets[index].data.length),\r\n\t\t\t\t\t\t\ty: randomScalingFactor(),\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tconfig.data.datasets[index].data.push(randomScalingFactor());\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\twindow.myLine.update();\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\tdocument.getElementById('removeDataset').addEventListener('click', function() {\r\n\t\t\tconfig.data.datasets.splice(0, 1);\r\n\t\t\twindow.myLine.update();\r\n\t\t});\r\n\r\n\t\tdocument.getElementById('removeData').addEventListener('click', function() {\r\n\t\t\tconfig.data.labels.splice(-1, 1); // remove the label first\r\n\r\n\t\t\tconfig.data.datasets.forEach(function(dataset) {\r\n\t\t\t\tdataset.data.pop();\r\n\t\t\t});\r\n\r\n\t\t\twindow.myLine.update();\r\n\t\t});\r\n\t</script>\r\n</body>\r\n\r\n</html>\r\n\r\n```\r\n\r\nReference taken from orignal example: view-source:https://www.chartjs.org/samples/latest/scales/time/line.html"}}
{"actor":{"display_login":"mzabuawala"}}