[CLOSED] LoadMask the Rendering of a Chart

[csfesta]

Hello,

I have a chart that uses a ajax call to a web service to return JSON as the data in the chart.

The web service returns really fast but since it has a lot of data points it takes time to render the Chart on the client side in the browser. Since the chart is interactive and allows users to change how it is drawn, I want to add a loading mask while the chart is rendering on the client side and only have it un-mask when the chart is completly drawn.

Currently I am using the following code which adds a loading mask but it will un-mask once the data is returned to the store and not continue to mask while the chart is rendering.

<ext:Chart ID="MonthlyChart" Frame="true" runat="server" Width="850" Animate="true" Theme="ChartTheme"
    Height="500" InsetPadding="30"  >

        <Loader ID="Loader3" runat="server">
        <LoadMask ShowMask="true"></LoadMask>
    </Loader>

How can I add a listender for the actual javascript rendering of the chart on the client side in the browser and only un-mask when the javascript is done drawing the chart?

[Baidaly]

Hello!

Try to use Chart's AfterRender listener.

Is it possible to provide your sample with data?

[Daniil]

Hi @csfesta,

Are you loading the data to the Store via a Chart's Loader? I am not sure how you are doing that, but it doesn't look quite correct. It is better to load the data via a Store's AjaxProxy.

As for masking, then yes, @Baidaly is right - you should organize it manually. Show a mask before loading the data and hide on a Chart's AfterRender and/or Refresh events.