Severe repaint performance issues in Flash 10.1 and up

[TomMancine]

We developed a portion of our application last summer using FusionCharts v3.1. Recently, our users have gradually been updating to Flash plugin v10.1 and are starting to report problems with our charting pages.

 

 

 

In several places in our application, we are dynamically redrawing charts in response to user inputs (for example, dragging a slider). This is accomplished with the setDataXml method. Users with Flash plugin v10.0.x see the graph continuously redraw with the new values in a relatively responsive way. However, users with Flash plugin v10.1.x see the graph flickering very badly. We did have flickering problems before when plotting large amounts of data; however, in this case, it flickers with the background color, and the flickering is pronounced even with only a few points. Before, it would flicker white, because of the "Reading XML Data" message, and only if there were a large amount of data.

 

 

 

Since v10.1 introduced hardware acceleration, we suspected that might be the problem. However, when we forced the chart to render with wmode="opaque," which according to http://www.adobe.com/devnet/flashplayer/articles/fplayer10.1_hardware_acceleration_04.html will force the player to use software rendering, the problem persisted.

 

 

 

Is FusionCharts aware of any problems related to redraw performance in Flash 10.1, and are there any workarounds or plans to address this with a patch? It is causing some serious perception problems for our product.

[Pallav]

Hi Tom,

 

 

 

Adobe has released another version of Flash Player 10.1 which fixes many of these issues. Can you please try using the same?

[TomMancine]

I am sorry to report that for us, the problem persists using the latest available version of the Flash plugin, v10.1.82.76.

 

 

 

To expand, we have observed the following on our test machines:

 

 

 

Browser    OS             Plugin Version    Flickering Problem

-------    --             --------------    ------------------

IE8        Windows XP     10.0.32.18        N

IE8        Windows XP     10.0.42.34        N

IE6        Windows XP     10.1.53.64        Y

IE6        Windows XP     10.0.42.34        N

IE6        Windows XP     10.1.82.76        Y

Edited August 17, 2010 by Guest

[Pallav]

Tom,

 

 

 

Is the issue just happening on IE6 or IE8 as well?

[TomMancine]

I'm afraid I may have confused the issue with additional information, but what the chart was intended to show was that, regardless of browser version, the issue occurs when the version of the flash plugin is 10.1 or higher. So that includes IE6 and IE8 both (and I imagine IE7 as well, but we don't have any test machines around with that browser).

 

 

 

Thanks for following up with me and looking forward to any suggestions!

[shamasis]

Hello,

 

 

 

We think that we have a demo that uses our upcoming FusionCharts v3.2 framework and that this demo somewhat resembles to what your application does i.e. majorly update the chart based upon user interaction.

 

 

 

Have a look at: http://www.fusioncharts.com/labs/peek/interactive-legend/ and use the slider (three steps) to change the size of the legend at the bottom of the chart. While the legend size changes, do you see that same heavy flickering issue?

[TomMancine]

Thank you for the reply!

 

 

 

Although our implementation uses a slider as well, it updates the charts in a more continuous fashion, where your implementation moves in three discrete steps.

 

 

 

In your example, most of the time when it repaints, there is an apparent flicker, both in the old and new versions of the flash plugin (that is, in v10.0.x and v10.1.x). However every so often it repaints without any visible flicker, which is the behavior we saw from our current version of FusionCharts with v10.0.x flash plugins.

 

 

 

Unfortunately, our use of proprietary customer data in our product means that I cannot give you a login. Would it be useful if I assembled a cut-down version of our page that demonstrates the issue?

[shamasis]

Greetings,

 

 

 

Your observation pertaining to re-painting is more than perfect. We have been observing the same as well since Adobe's 10.1.x releases.

 

 

 

Nevertheless, I can give you some of our other observations that you might want to look into. It is quite fascinating.

 

a. The flickering issue is minimal (almost non-existent) in Mac OS, (probably due to its Flash Player's architecture.)

 

b. Using data-xml, instead of data-url method causes less flicker.

 

c. Using wMode (window mode) as "window", minimizes the flickering further.

 

d. Flickering is also dependent on the graphics processing capability of the target (client) computer.

 

e. The larger the size of the chart, the more prone it is to flickering issues.

 

 

 

Furthermore, it would help us if you could send/host a scaled-down (html-based) implementation of your application along with a data that mimics your deployment.

[TomMancine]

Thanks again for the replies and for continuing to work with us on this issue. It's reassuring to know this is something you guys are aware of!

 

 

 

I am interested to learn that it behaves differently in MacOS, and I wonder about how Firefox vs. IE affects that, but regrettably, as our application is consumed by large institutional customers, we are stuck with IE / Windows at the moment.

 

 

 

We have been using data-xml simply because that's the only method that suits our needs (round-tripping to the server would take too long) but it's good to know that it's also the faster of the two

 

 

 

We are already using wmode=windowed by default because of the better redraw performance--when we use opaque, we see the white "Reading XML" message flicker in, although that's different from the background flicker we see in flash 10.1.

 

 

 

Contrary to what we would expect, we've been seeing the worst flicker on our newer machines, and we've seen it on small charts (80 x 80 pies) as well as large charts (300 x 150 xy charts).

 

 

 

I am attaching an example (fcsample.zip) that demonstrates the flicker effect that is seen in our application. Regrettably, because our customer data is proprietary, and because our application uses a proprietary (in-house) wrapper around FusionCharts, I am unable to include our actual pages or anything like the data we are displaying. However, this sample does exhibit the same flickering behavior that our other pages do. I realize that updating the chart this frequently may not be a common use case, but it has been working very smoothly for us on machines which have the older version of the plugin, and I think it is a real credit to the product that we are able to use it for this purpose.

 

 

 

Edited to add: The sample should be useful because I am confident that in situations where the sample flickers, our application will too.

 

 

 

This sample has been tested and shown to exhibit flicker with v10.1.x of Flash in both IE6 and IE8. Feel free to do whatever you want with it, as to my knowledge it contains no proprietary work products.

 

 

 

Thanks again for your attention, and hoping that this example proves helpful.

 

 

 

-Tom

fcsample.zip

Edited August 25, 2010 by Guest

[TomMancine]

Any other information I can provide that would be helpful? Haven't heard anything on this issue in about a week.

[shamasis]

I am terribly sorry for not catching up with you on this earlier. Getting back to the issue, we did test using your sample app, and as expected, we did reproduce the flicker.

 

 

 

However, as I had told you earlier, this redraw performance issue is not reflected on certain situations as I had mentioned earlier. This is causing it difficult for us to isolate the root cause of this issue.

 

 

 

At one side, we have the new Flash Player as a possible source. And at the same side, we also have browser version as a possible source. (For example, though Mozilla and Chrome uses the same player plugin, we could not replicate the issue on Chrome!) Furthermore, Flash Player's Graphics Hard Acceleration feature can be a possible source too as, two systems, one with a popular Graphics hardware and one without, gave different results with almost similar software environment (with wMode to window).

 

 

 

On the other hand, if we consider FusionCharts as the possible source, it is also very difficult to find the root cause under the above circumstances.

 

 

 

Nevertheless, be rest assured that we are looking into patterns that cause lesser redraw issue. We will keep you updated.

[TomMancine]

Thanks for the reply, and for looking into our issue. Just wanted to make sure it was on the radar somewhere! I'll be keeping an eye out for updates, but I understand it will take time because of the number of factors.

[TomMancine]

Thanks for the reply, and for looking into our issue. Just wanted to make sure it was on the radar somewhere! I'll be keeping an eye out for updates, but I understand it will take time because of the number of factors.

 

It has been a while since we have heard anything on this issue.

 

After applying the recent updates to Adobe's Flash player, our pages continue to exhibit this behavior. Additionally, we have downloaded the 3.2 version of FusionCharts and are still seeing the same problem, regardless of whether we send XML data or JSON data (although the flickering is gone in pure JS mode, it's not quite speedy or pretty enough for our application). We are wondering if any further progress has been made on this issue!

[Sanjukta]

Hi,

 

I am afraid, the issue is still not completely resolved, as of now.

 

We are still working on it and would come up with the solution, very soon.

 

Thank you for your patience and support..

[Guest Angie]

Dear User,

 

We are delighted to announce that PowerCharts is now ready for your iPads and iPhones too. We have just released PowerCharts v3.2. Starting v3.2, PowerCharts has HighCharts embedded within it, and offers both Flash and JavaScript (HTML5) charting . The Flash charts are displayed on a majority of devices and the JavaScript charts on devices that do not support Flash, all of it without writing a line of code.

 

Automatic rendering of JavaScript charts on devices (like iPad and iPhone) where Flash player is not supported.

 

5 new chart types:

 

Heat Map Chart

 

Box and Whisker Chart

 

Step Line Chart

 

Error Line Chart

 

Error Scatter Chart

 

 

* Support for JSON data format.

 

* Support for LinkedCharts, where a single data source controls multiple charts.

 

* Interactive legends in charts allow selective showing/hiding of data series.

 

* Legends now support icons for each data series.

 

* Better management of labels on charts.

 

* Labels now have an auto rendering mode to prevent them from overlapping, the chart selects the best display mode depending on the length of the labels and the width of the chart.

 

* Long labels are truncated, with ellipses appended to the truncated end of each label, and a tooltip bearing the completed label text is displayed when the user hovers over a truncated label.

 

* Support for line breaks and wrapping in all text elements including: caption, sub caption, X-axis title, Y-axis title, Labels and tooltips.

 

* In Line charts, data values can now be positioned either above or below the dataplots. Automatic positioning of data values is also supported.

 

* In Step-line charts dataplots can be joined using vertical lines.

 

* Custom alignment of caption and sub caption using STYLES.

 

* Advanced print management using JavaScript.

 

* Additional options for efficient event handling using JavaScript.

 

* Support for dynamic update of chart properties using JavaScript(barring select scatter and drag charts).

 

* Charts now support % based sizes along with dynamic resizing (barring select scatter and drag charts).

 

 

Learn more about everything new in PowerCharts v3.2 at : http:/ www.fusioncharts.com/PowerCharts/

 

We would love to hear from you at: http://www.fusioncharts.com/contact/

[mgeorge]

Is there any update please ? Tested on flash 10.3 and flicker problem still exists on all browsers ! This is seriously impacting our abaility to roll out a solution using Fusion Charts !

 

 

Hi,

 

I am afraid, the issue is still not completely resolved, as of now.

 

We are still working on it and would come up with the solution, very soon.

 

Thank you for your patience and support..

[FusionCharts Support]

Since our data loading model contains redrawing the chart from scratch after cleaning the canvas, there is always chance of flicker. However, this was less evident in earlier versions of Flash Player. In recent flash player this seems to be more evident. I am afraid, as of now, as per our architecture, we are unable to completely remove this issue.