search

morrisjs / morris.js

Pretty time-series line graphs
http://morrisjs.github.com/morris.js/
6.91k stars 1.23k forks source link

Unresponsive script in Firefox but not in Chrome or Safari #262

Closed shenst1 closed 11 years ago

shenst1 commented 11 years ago

Hi, I am doing a one pager for a UX assignment and using three linegraphs and two donut charts. They all render fine in Chrome and Safari, but I am getting an unresponsive script error in Firefox. The site I have the page at is mobiledevhw.herokuapp.com

I render the line graphs like this and use js to show/hide them (its not great because the graphs don't render right with display none, but that is another issue):

When I comment out the line graphs and do just the donut charts, I don't get the unresponsive script error. When I comment out all but one line graph, I still get the unresponsive script error, so my suspicion is that it has to do with the morris line graph script.

The js for the line graphs are here: https://github.com/shenst1/mobiledevhw/blob/master/app/assets/javascripts/linegraphs.js.coffee

and the js for the donuts are here https://github.com/shenst1/mobiledevhw/blob/master/app/assets/javascripts/piecharts.js.coffee

My only real guess right now is that the linegraph is loading too slow for Firefox and it spits an error, but I really doubt that is what it is since it is pretty fast in Chrome and there isn't that much data. Top of repo is here: https://github.com/shenst1/mobiledevhw

Would really appreciate help getting this fixed! -Andrew

oesmith commented 11 years ago

Do you get the same issue if the charts are all displayed when you load the page?

I've seen some odd issues with display:none (it screws with some of the drawing code). I suggest you lazily draw the charts on demand when you display them, wherever possible.

HTH,

Olly

Sent from my iPad

On 19 Jul 2013, at 21:01, Andrew Shenstone notifications@github.com wrote:

Hi, I am doing a one pager for a UX assignment and using three linegraphs and two donut charts. They all render fine in Chrome and Safari, but I am getting an unresponsive script error in Firefox. The site I have the page at is mobiledevhw.herokuapp.com

I render the line graphs like this and use js to show/hide them (its not great because the graphs don't render right with display none, but that is another issue):

When I comment out the line graphs and do just the donut charts, I don't get the unresponsive script error. When I comment out all but one line graph, I still get the unresponsive script error, so my suspicion is that it has to do with the morris line graph script.

The js for the line graphs are here: https://github.com/shenst1/mobiledevhw/blob/master/app/assets/javascripts/linegraphs.js.coffee

and the js for the donuts are here https://github.com/shenst1/mobiledevhw/blob/master/app/assets/javascripts/piecharts.js.coffee

My only real guess right now is that the linegraph is loading too slow for Firefox and it spits an error, but I really doubt that is what it is since it is pretty fast in Chrome and there isn't that much data. Top of repo is here: https://github.com/shenst1/mobiledevhw

Would really appreciate help getting this fixed! -Andrew

— Reply to this email directly or view it on GitHubhttps://github.com/oesmith/morris.js/issues/262 .

shenst1 commented 11 years ago

You are right, it is the display: none that is breaking it. It is also breaking the appearance of the graph. I am pretty new to this and am not sure what you mean by lazily drawing the charts. Do you have an example you could point me to or a favorite resource about it? Thanks, Andrew

oesmith commented 11 years ago

By lazily-drawing, I mean calling Morris.Line when the container becomes visible for the first time.

Here's an example: http://jsbin.com/oxidum/1/edit

Does that make sense?

On Sun Jul 21 2013 at 21:14:00, Andrew Shenstone notifications@github.com wrote:

You are right, it is the display: none that is breaking it. It is also breaking the appearance of the graph. I am pretty new to this and am not sure what you mean by lazily drawing the charts. Do you have an example you could point me to or a favorite resource about it? Thanks, Andrew

— Reply to this email directly or view it on GitHubhttps://github.com/oesmith/morris.js/issues/262#issuecomment-21316147 .

shenst1 commented 11 years ago

Yes, it makes perfect sense! I will implement tonight. The example is exactly what I am looking for as well.