Updating FusionChart Data

[ktyra]

In the FusionChart examples from InfoSoft Global they are able to update the data content of the chart without the chart reloading (bring up the annoying white screen saying "loading"). I've tried to accomplish this with the FusionChart component in SmartClient but it always wants to reload the entire movie if the data set changed.

Is there away to just update the data so that the FusionChart just updates its data elements in the chart?

[mverma]

In the FusionChart examples from InfoSoft Global they are able to update the data content of the chart without the chart reloading (bring up the annoying white screen saying "loading"). I've tried to accomplish this with the FusionChart component in SmartClient but it always wants to reload the entire movie if the data set changed.

Is there away to just update the data so that the FusionChart just updates its data elements in the chart?

i've implemented the same , it works for me
you can take reference from
http://www.smartclient.com/#gridCharting

[ktyra]

Updating Fusion Charts

i've implemented the same , it works for me
you can take reference from
http://www.smartclient.com/#gridCharting

The reference you listed exhibits exactly the behavior I don't want. Although, the screen doesn't show the "Loading ..." it repaints the background prior to updating the chart. The behavior I'm looking for can be seen in the FusionChart example - http://www.fusioncharts.com/Demos/JS/Index.html.

Now, I could use the fusion charts object to do this updating but there's seems to be some stark differences in the way SmartClient Embeds the dataXML in the Chart and the way Fusion does it. I need to find a solution that doesn't repaint the background.

[Isomorphic]

In that example we never see "Loading.." or a white screen in any browser. Possibly, you have completely disabled browser caching, so your browser is re-downloading the FusionChart .swf file each time the chart is redrawn. If so, normal end users will never see this.

[ktyra]

In that example we never see "Loading.." or a white screen in any browser. Possibly, you have completely disabled browser caching, so your browser is re-downloading the FusionChart .swf file each time the chart is redrawn. If so, normal end users will never see this.

Unfortunately I wish the browser was the issue, alas it is not - caching is not turned off. I have tested the two links that are in these posts:

http://www.smartclient.com/#gridCharting
http://www.fusioncharts.com/Demos/JS/Index.html

with a number of different users and number of different browsers on Mac and Windows. Note this is not my code but just the examples listed. All users report that on update the chart is wiped out with the background color and then chart is drawn. In the case of a bubble chart which I'm using you get a "loading data" but not in the case of column charts listed in these examples. In particular, if you turn off animation on the fusioncharts' demo page you get an even better sense of the the transition. On the fusion charts page, you will notice that no destruction of the chart occurs but rather just the values are updated.

Since, it maybe just my community of random browsers and operating systems that see this, I would ask if others in the community see the same behavior.

[mike.art1]

ktyra - I don't see any "Loading" or white screen. On updating the grid, the chart is updated with the new values.

[ktyra]

Looks like I'll switch to the using Fusion's Javascript. However, I've created avi screen captures of the two different sites. Going through the movie you can clearly see the area get drawn with a canvas background. If someone at Isomorphic would like them I'll gladly send them along (don't know what email they should go to). The zip is 3 mb.

[Isomorphic]

Hi ktyra,

Thanks for putting together screencasts, we're very curious to see what you're seeing.

The best thing would be to stick them on a public webserver, which would allow anyone to see them. Alternatively, you can email them to support@isomorphic.com.

[ktyra]

Updating FushChart Data - unflashing the flash

Sorry I have haven't responded to this in two months but well you know how it goes. I have uncovered the issue or at least most of the issue seen when the Fusion Chart appears to flash before drawing. It turns out that when the Fusion Chart is loaded if it feels that that rendering is going to be complicated it throws up a “Loading data .. “ message before the chart is rendered. Unfortunately the message which can be very quick is not rendered in the background of the canvas but rather the background as specified in a parameter of the flash object definition in the HTML.

Unfortunately the SmartClient Flashlet doesn’t specify this parameter, and as such, the chart may first appear as a white (default) image with the loading message before the actual chart is shown. Again this can happen so fast most people won’t see especially if you have a white background. Change to a black canvas background and you see the infamous “white flash”.

By adding the bgcolor parameter to the generated HTML for a flash object to that of the canvas the perception of fast update is corrected:

Below is the Inner HTML I used to reduce the flash. Hopefully there’s still time to add to v7.

            var html = "";
            var flashvars = this.getFlashVariables();
            var movie = this.getFlashMovie();
            var bgcolor = this.backgroundColor;
            var width = this.getWidth();
            var height = this.getHeight();
            var id = this.getID();

            if ( this.FlashPlayerVersion.isIE )
                {
                html = '<object' + 
                    ' id="' + id + '"' +
                    ' height=' + height +
                    ' width=' + width +
                    ' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"' +
                    'classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">'+
                    '<param value="opaque" name="wmode"/>' +
                    '<param value="'+ bgcolor + '" name="bgcolor"/>' +
                    '<param value="'+ flashvars + '" name="FlashVars"/>' +
                    '<param value="' + movie + '" name="movie"/>' +
                    '</object>';
                    }

[Isomorphic]

You should be able to use the existing Flashlet.params to do this, like

params : {bgcolor:"black"}

Or are we missing something?

[ktyra]

Nope. Perfect!