High CPU Usage, Browser Crash with wmode and Multiple Graphs

GregorTP · December 17, 2007

Hello,

I've been using some of the FusionCharts in a prototype of the re-design for one of our applications.

The basic structure of the page will have up to 8 FusionCharts on each page showing various information. I'm also using wmode='opaque' in order to allow HTML content to display over top of the flash.

The results on my system:

Internet Explorer 7.0.5730.11 -- Works fine

Firefox 2.0.0.11 (Windows) -- ~50% CPU usage per page when 8 graphs are displayed.

Opera 9.24 (Windows) -- Works fine

Safari 3.0.4 (Windows) -- Browser locks up and needs to be killed.

This problem only occurs when wmode is set to either opaque or transparent (if left at "window" the default value it works fine).

The problem also only occurs when several charts are being displayed. Firefox showed no CPU issues when 5 or fewer charts are shown, and Safari has CPU usage issues when more than 1 are shown, but doesn't lock up with 3 charts on the page.

I'm using the FusionCharts.js file (Version: 1.1 (29th June, 2007)) to insert the graphs on to the page. Usage is mostly standard, however I have added a setAttribute call to apply the wmode change as explained above. I have also tried the FusionChartsWMode.js file posted on the forums with the same results.

The problem can currently be soon at the following location: [EDIT: URL removed as the page is no longer there. Please see the attachment posted below]

Please let me know if you require any additional information.

Edited February 6, 2008 by Guest

Pallav · December 21, 2007

Hi,

I tried the same with Firefox 2.0.11 on Windows XP and it seems to work fine. On what OS did you try it?

GregorTP · December 21, 2007

Hi Pallav,

I'm also running Windows XP, and have tested it on another Windows XP workation. The XP boxes were both running the most recent version of Firefox with Flash 9,0,115,0 on one, and 9,0,47,0 on the other. Both of these computers get up to 50% load after it draws all of the graphs (Note: this requires scrolling all the way down the page so that all of the graphs are drawn).

I've also tried it on a Windows Vista laptop (Firefox 2.0.0.11, Flash 9,0,47,0) that had no CPU load issues on the page, so it's not consistent on all the boxes I've tried.

[EDIT: URL removed as the page is no longer there. Please see the attachment posted below]

Edited February 6, 2008 by Guest

GregorTP · January 11, 2008

Here's a stripped down version of this issue to show that there's nothing fancy going on with our site causing this bug.

You'll need the following:

FusionCharts.js

Col3D1.xml from the sample gallery.

Column3D.swf also from the sample gallery.

and the following HTML page:


<html>

<head>

	<script type='text/javascript' src='FusionCharts.js'></script>

	<script type='text/javascript'>

		var chart = new Array();

		function drawChart(i)

		{

			chart[i] = new FusionCharts('Column3D.swf', 'chart' + i, '500', '300', '0', '1');

			chart[i].setDataURL('Col3D1.xml');

			chart[i].addParam('wmode', 'opaque');

			chart[i].render('d' + i);

		}



	</script>

	<style type='text/css'>

		div.graph_div {

			width: 500px;

			height: 300px;

			border: solid black 1px;

			margin-bottom: 0.5em;

		}

	</style>

</head>

<body>

	<div class='graph_div' id='d0'></div>



	<script type='text/javascript'>drawChart(0);</script>

	<div class='graph_div' id='d1'></div>

	<script type='text/javascript'>drawChart(1);</script>

	<div class='graph_div' id='d2'></div>

	<script type='text/javascript'>drawChart(2);</script>

	<div class='graph_div' id='d3'></div>

	<script type='text/javascript'>drawChart(3);</script>



	<div class='graph_div' id='d4'></div>

	<script type='text/javascript'>drawChart(4);</script>

	<div class='graph_div' id='d5'></div>

	<script type='text/javascript'>drawChart(5);</script>

	<div style='height: 1000px; width: 20px; background-color: red; position: absolute; top: 300px; left: 100px;'></div>

</body>

</html>

Place all the files in the same directory.

To reproduce the bug, scroll down to the bottom of the page and allow all the charts to load. I've only seen this issue in Firefox and Safari. The CPU usage should go unusually high once all the charts have loaded, or your browser will start behaving poorly.

The expected result is that the page loads correctly and there is a red div floating over top of the graphs. If you comment out the line which says "chart.addParam('wmode', 'opaque');" the red div will go behind the graphs and the CPU usage will be minimal.

I've attached a zip file with the files above for ease in trying this out.

fusion_wmode.zip

GregorTP · January 21, 2008

Hi Pallav,

Have you had any success in reproducing the issue I've been having?

--Gregor

Pallav · January 24, 2008

Hi Gregor,

Unfortunately, it still doesn't spike up the CPU on my machine. However, is there a specific reason you want to use opaque as Wmode?

GregorTP · January 24, 2008

There's some content on our site (tooltips, a page progress bar, and a dropdown menu) which are designed to display over top of the other HTML content.

If the wmode is left as its default value, that HTML content will display behind the flash. I need to set the wmode to opaque or transparent in order to have that content display on top of the flash.

Have you tried Safari 3 for Windows? That browser will consistently lock up on my box when trying to view the test page I posted earlier.

Is there any sort of advanced debug logging that I can turn on in order to help diagnose the issue?

Pallav · January 25, 2008

Hi,

To get the objects over Flash, you should set transparent WMode.

I'm afraid we've not tried Safari on Windows - but on Mac. We do not have more advanced skills in FusionCharts - however external tools like Firebug might be able to detect something.

GregorTP · January 25, 2008

http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_12701

The listed values for wmode are shown in the knowledge base linked above:

# wmode - Possible values: window, opaque, transparent. Sets the Window Mode property of the Flash movie for transparency, layering, and positioning in the browser.

* window - movie plays in its own rectangular window on a web page.

* opaque - the movie hides everything on the page behind it.

* transparent - the background of the HTML page shows through all transparent portions of the movie, this may slow animation performance.

Both opaque and transparent will allow you to place HTML content over top of the flash. If I change the wmode value to transparent the same issues occur.

I have Firebug installed and haven't been able to detect any issues on the JS side (like an infinite loop).

What can I do to help you be able to reproduce this bug? Other users have reported similar issues (http://www.fusioncharts.com/forum/Topic1446-6-1.aspx) and I've been able to reproduce it on several computers in our office (all except the Windows Vista machine).

smerchek · January 29, 2008

I am also trying to accomplish the same types of things, but with the angular gauge. I am using extjs to create windows and place a gauge within it. I need the transparent option to allow moving the windows around to keep z-order in check.

I can open 6 gauges with no hit on the cpu, but when the 7th gauge is created then the cpu consistently jumps to around 22-25% then when the 8th gauge is created the cpu is around 50% and stability becomes a problem. I have tested with both firefox and IE and firefox only has the issue.

Still doing more testing.

Edited January 29, 2008 by Guest

Creoe · February 3, 2008

I am having the same problem and have spent thousands on this graphing technology. Can you please escalate this to fix it asap or I will have to seek a refund on this technology if not resolved.

John Bracker

Pallav · February 5, 2008

John,

Can you please send us details of your problem with relevant XML files at [email protected]?

GregorTP · February 5, 2008

Hi John,

Can you try out the bug proof which I posted in this file (http://www.fusioncharts.com/forum/Attachment192.aspx) as well? Maybe a few more confirmations will get this issue some attention.

Creoe · February 12, 2008

GregorTP,

Confirmed your bug report correctly identifies the same issue we're having!

Fix this ASAP!

John

webwright · February 12, 2008

We're seeing this as well. FF 2, Flash 9,0,115,0.

We need to WMODE to allow elements to be on top of the graphs... Is there any alternative?

Pallav · February 13, 2008

Tony,

Can you please send us the HTML page at [email protected]?

To All: we're trying to identify the issue that is causing this. First, we're just trying to reproduce the error. Second step is to identify which component is causing the problem (the JS or browser). We're pretty sure that there's no faulty code in FusionCharts which is causing this, as if you run the code without Wmode, it'll run fine.

GregorTP · February 13, 2008

I'm confident that it's not the JS. I tried vanilla swfobject.js and embed's with no success. Here's the HTML from the embed test if you'd like to confirm:

<html>

<head>

	<style type='text/css'>

		div.graph_div {

			width: 500px;

			height: 300px;

			border: solid black 1px;

			margin-bottom: 0.5em;

		}

	</style>

</head>

<body>

	<div class='graph_div' id='d0'>

		<embed type="application/x-shockwave-flash" src="Column3D.swf" wmode="transparent" flashvars="chartWidth=500&chartHeight=300&dataURL=Col3D1.xml" height="300" width="500"></embed>

	</div>

	<div class='graph_div' id='d1'>

		<embed type="application/x-shockwave-flash" src="Column3D.swf" wmode="transparent" flashvars="chartWidth=500&chartHeight=300&dataURL=Col3D1.xml" height="300" width="500"></embed>

	</div>

	<div class='graph_div' id='d2'>

		<embed type="application/x-shockwave-flash" src="Column3D.swf" wmode="transparent" flashvars="chartWidth=500&chartHeight=300&dataURL=Col3D1.xml" height="300" width="500"></embed>

	</div>

	<div class='graph_div' id='d3'>

		<embed type="application/x-shockwave-flash" src="Column3D.swf" wmode="transparent" flashvars="chartWidth=500&chartHeight=300&dataURL=Col3D1.xml" height="300" width="500"></embed>

	</div>

	<div class='graph_div' id='d4'>

		<embed type="application/x-shockwave-flash" src="Column3D.swf" wmode="transparent" flashvars="chartWidth=500&chartHeight=300&dataURL=Col3D1.xml" height="300" width="500"></embed>

	</div>

	<div class='graph_div' id='d5'>

		<embed type="application/x-shockwave-flash" src="Column3D.swf" wmode="transparent" flashvars="chartWidth=500&chartHeight=300&dataURL=Col3D1.xml" height="300" width="500"></embed>

	</div>

	<div style='height: 1000px; width: 20px; background-color: red; position: absolute; top: 300px; left: 100px;'></div>

</body>

</html>

GregorTP · February 21, 2008

How is your progress on investigating this issue?

Do you have any information that may be of interest? Do you have any questions from me regarding reproducing this bug?

I'm willing to provide any assistance on testing and resolving this issue if needed.

--Gregor

Pallav · February 28, 2008

Gregor,

I tried your code and it seems to work fine in Firefox (again). I attach a screenshot indicating memory and CPU usage. Are you not getting something similar?

GregorTP · February 28, 2008

I get a consistent ~50% CPU load on this page, I've attached a screenshot similar to yours to show the results I am experiencing.

This is not a problem unique to my PC, as I have tested several others with the same results and others have reported experiencing this issue in this thread.

I need to get this issue fixed and will answer any questions you have about what you can do to reproduce it. It's been nearly 2.5 months since I first reported this, and thus far have received no useful feedback or any indication that you and the FusionCharts team are going to spend time investigating this.

Just let me know what you need and I will be of any assistance I can. I would like to know if you're going to investigate this in a reasonable period of time or if I need to look elsewhere for a flash chart solution.

Pallav · March 7, 2008

Hi,

Just to update on this, we've been working on this issue. Apparently the issue seems to be Firefox specific. For example, if you visit http://www.fusioncharts.com/test/MemCheck/Index.html in IE, the CPU usage stays at 1-2% and goes back to 0% after the charts have been rendered.

However, if you open the same in Firefox, the CPU spikes to around 30-50% on a 2 gig RAM.

We've reported this bug to Mozilla and hope to get a solution soon - https://bugzilla.mozilla.org/show_bug.cgi?id=421643

If you've any feedback on this, it'll be greatly appreciated.

webwright · March 11, 2008

Pallav--

Just wanted to thank you guys for the effort. I know how hard this stuff is to track down.

Just checked your test page in FF/WIN and I'm seeing the telltale CPU spike-- so it looks like you guys found it.

Is there something unique about FusionCharts? Or would any colleciton of flash objects with these WMODE settings do the same thing?

webwright · March 21, 2008

Also, do you know if it's directly related to the number of FusionCharts objects on the page? Is there a magic # that causes the problem to manifest? It would be nice if you'd post something like:

"We know this is a problem and are trying to get Mozilla to fix it. In the meantime, here are the things that seem to resolve the problem:

1. Use less than X charts per page.

2. Avoid wmode tranparent

3. etc.

4. etc."

Have you narrowed the problem down at all?

Edited March 21, 2008 by Guest

webwright · March 21, 2008

More data for you-

We had one of our users disable some of the SWF charts and it cleared right up-- so it seems to be related to the number of charts (or at least seems to clear up with fewer charts on a page).

http://getsatisfaction.com/rescuetime/topics/firefox_use_99_cpu_when_viewing_rescuetime_dashboard

This is pretty much a dealbreaker for us, sadly. I love FusionCharts, but I can't have my app crashing/locking the browser for a significant portion of the audience we're building for.

Unless I see resolution, my plan is to phase out FusionCharts over the next few months. More importantly, I'll probably stop recommending it to folks (I'd wager you have a dozen customers that have come in from my recommendations).

For what it's worth, I know the problem is probably outside of your control-- but it doesn't change the fact that FusionCharts is not useful for any dashboard-style implementation (with multiple graphs and sophisticated controls).

tchambers · April 7, 2008

I have the same problem.

What I am seeing is that firefox seems to be requesting the .SWF files multiple times. Maybe this was already noted, but monitoring the traffic shows it to be the case. I have 15 of the same displayed charts with different values (sparklines) and it asks for the .swf files 15 times.

Pallav · April 8, 2008

The number of charts is not much of a factor here. For example, we're tried with 80 charts in a page and it works fine. But at other times, with just 10 different charts in a page, it seems to have CPU usage.

Also, in Firefox, there's a constant bar at bottom showing "Transferring data from ...", whereas, once the chart has loaded, we do not transfer any data.

leonch · April 15, 2008

Is there a fix or a workaround for this yet I am having the same problem with 6 charts on the page in firefox?

webwright · April 15, 2008

So you have no information about how best to avoid this?

Chart number? Chart type? Anything?

leonch · April 17, 2008

This also happens in Safari for windows so I assume Mac aswell. It totally locks up my computer when I use over 5 charts on a page. This is completely unacceptable as is the lack of updates on solutions for this. If this continues I will have to look for alternatives. Please update this thread with work arounds or a fix.

Bernard · April 22, 2008

I also run into a similar problem with FusionCharts swf files and I do not have any problems with my own generated .swf files.

I think I might have a clue at what is happening with FusionCharts swfs: It looks like the .swf files have been built with a rate of "120" (fps) which is really high. You should put something closer to "20". A rate of "20" makes nice animations "fluid enough" yet keeping the CPU usage low -- these are not games(!). Some browsers/flash plugins might decide to limit the rate but others don't.

Please check the rates of your .swf files -- I did not do a full investigation, but I will try to "patch" your .swf files with a lower rate and see if it solves the problem.

Bernard

High CPU Usage, Browser Crash with wmode and Multiple Graphs

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites