Random browser hang/crash using Area chart (on Chrome) #191
Description
I am experiencing random (intermittent) freezes and crashing when rendering an area chart in my app.
Sometimes it is on the initial creation - other times I "empty" the div then create a new area chart.
One time I did get evidence of an infinite loop in raphael -
Error parsing d H1810 << my best memory of the repeating error.
Unfortunately I'm not getting the error msg anymore in console - chrome is just hanging.
Here is my code to create the area chart:
var chart = this.line = Morris.Area({
padding: padding, // eg 10
element: $el, // a div
data: data, // [] length = 72 - see sample below
xkey: 'tm',
ykeys: ['wk','av','rst','ex'],
labels: ["Working","Available","Rest","Exception"],
lineColors: ["blue","gray","red","green"],
// lineWidth: null,
// pointSize: null,
pointFillColors: ["blue","gray","red","green"],
// pointStrokeColors: null,
ymax: "auto "+(sdc.ymax+2), // eg 20
ymin: 0,
smooth: false,
hideHover: true,
//parseTime: null,
//postUnits,
//preUnits,
dateFormat: function(t) {
return util.dts(t);
},
//xLabels:
xLabelFormat: function(t) {
return "";
},
xLabelMargin: 0
});
example data element:
av: 2
ex: 0
nc: 1
nm: 2
rst: 0
tm: 1362551400000
wk: 0
My div is styled like this:
<div class="wall-chart" style="left: -26px; width: 1828px;">
and is also position: absolute and height: 100% inside another div:
<div style="height: 78px">
That parent div has padding.
Any ideas?
Most of the time (8/10 times) the chart renders properly.