Home › Forums › Report Bugs › Safari iOS: Total canvas memory use exceeds the maximum limit › Reply To: Safari iOS: Total canvas memory use exceeds the maximum limit
We use tested this on an
iPad pro iOS Version 12.1.3, iPad pro iOS Version 12.1.4, iPhone 7 iOS Version 12.1.3, iPhone Xs iOS Version 12.1.3, iPhone Xs iOS Version 12.1.4
always with Safari.
Here is the Link to the demo Page http://dev.uniserve.de (Using chart.destroy()). Here is the Link to the demo Page http://dev.uniserve.de/test2.html (Using new chart object).
To force the problem there are a the Buttons
Here is the Code of an sample page :
<html> <head> <script> var renderNumber = 0; var chart ; window.onload = function () { chart = new CanvasJS.Chart("chartContainer", { animationEnabled: true, exportEnabled: true, theme: "light1", // "light1", "light2", "dark1", "dark2" title:{ text: "Render Test" }, data: [{ type: "column", //change type to bar, line, area, pie, etc //indexLabel: "{y}", //Shows y value on all Data Points indexLabelFontColor: "#5A5757", indexLabelPlacement: "outside", dataPoints: [ { x: 10, y: 71 }, { x: 20, y: 55 }, { x: 30, y: 50 }, { x: 40, y: 65 }, { x: 50, y: 92, indexLabel: "Highest" }, { x: 60, y: 68 }, { x: 70, y: 38 }, { x: 80, y: 71 }, { x: 90, y: 54 }, { x: 100, y: 60 }, { x: 110, y: 36 }, { x: 120, y: 49 }, { x: 130, y: 21, indexLabel: "Lowest" } ] }] }); chart.render(); } function rerenderChart(number) { chart.destroy(); if (number == null) { renderNumber = renderNumber + 1; number = renderNumber; } chart = new CanvasJS.Chart("chartContainer", { animationEnabled: true, exportEnabled: true, theme: "light1", // "light1", "light2", "dark1", "dark2" title:{ text: "Render " + number }, data: [{ type: "column", //change type to bar, line, area, pie, etc //indexLabel: "{y}", //Shows y value on all Data Points indexLabelFontColor: "#5A5757", indexLabelPlacement: "outside", dataPoints: [ { x: 10, y: 71 }, { x: 20, y: 55 }, { x: 30, y: 50 }, { x: 40, y: 65 }, { x: 50, y: 92, indexLabel: "Highest" }, { x: 60, y: 68 }, { x: 70, y: 38 }, { x: 80, y: 71 }, { x: 90, y: 54 }, { x: 100, y: 60 }, { x: 110, y: 36 }, { x: 120, y: 49 }, { x: 130, y: 21, indexLabel: "Lowest" } ] }] }); chart.render(); } function rerenderChart10() { for (var i = 1; i <= 10; i++) { setTimeout(rerenderChart(),50000); } } function rerenderChart100() { for (var i = 1; i <= 100; i++) { setTimeout(rerenderChart(),50000); } } </script> </head> <body> <div id="chartContainer" style="height: 80%; width: 100%;"></div> <div id="refreshPanel"><button onclick="rerenderChart()">Rerender once</button> <button onclick="rerenderChart10()">Rerender 10times</button> <button onclick="rerenderChart100()">Rerender 100times</button></div> <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> </body> </html>