Animation Property

[nimue]

Hi,

I have two linear charts both have set the Animation property like this:

series.Animation(an => an.Enable(true).Duration(3000).Delay(100)).Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(1).XName("Time").YName("Value").Name(ViewBag.Asset).YAxisName("secondary").Add();

series.Animation(an => an.Enable(true).Duration(3000).Delay(100)).Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).Width(1).XName("Time").YName("Volume24h").Name("24hVol").Add();

In the first chart,where the data is passed through the ViewBag, the animation works, 

while in the graphic secode,where the data are loaded dynamically in the Load method, the animation does not work.

Where am I wrong?

Thanks for your help.

Barbara Inzitari

[Dharanidharan Dharmasivam]

Hi Inzitari, 

 

Greetings from Syncfusion. 

 

We have analyzed your query and we have tried to replicate the reported scenario, we are afraid that the reported issue is not replicated. Sample used for testing can be find here.  

 

In the above sample we have bind data for first series from controller and for second series in client side. We have also ensured by varying the animation duration and the animation is working properly at our end. You can also find the video link from below for the above sample. 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/Animation1545220167.zip  

 

Since we are not aware on the exact scenario on which the issue is replicated, kindly share the below information which will be helpful in further analysis and provide you the solution sooner. 

 

·       Try to reproduce the issue with the attached sample or provide your sample with replication steps. 

·       Else share your entire code snippet with the data source. 

 

Thanks, 

Dharani. 

 

 

[nimue]

Hi Dharani,

Thank you for your answer.

I'm sorry I had to be more precise:

the chart where the data is dynamically loaded uses an ajax call and I think this is what makes the difference compared to the example you sent me.

I am attaching my code

Thank you

Barbara Inzitari.

Attachment: MyChart_8d6697fd.zip

[Dharanidharan Dharmasivam]

Hi Inzitari, 

 

Thanks for your information. 

 

We have analyzed your query with attached code snippet. The ajax call and chart rendering both are asynchronous functions. So, before we get the data through ajax, chart got rendered with empty data source. Once the data is assigned to series in ajax, chart got rendered without animation, since animation got support only on initial rendering. If you want the chart with animation after initial rendering, you can call the refresh method. Please find below code snippet, 

 

  var load = function (args) { 

        $.ajax({ 

            type: "GET", 

            url: "./GetChartData", 

            data: {  }, 

            dataType: "json", 

            contentType: "application/json;charset=utf-8", 

            success: function (data) { 

                args.chart.series[0].dataSource = data; 

                args.chart.load = null; 

                args.chart.refresh();      

            }, 

            error: function (args) { 

                alert('error'); 

            } 

        }); 

    } 

 

Sample for reference can be find below. 

http://www.syncfusion.com/downloads/support/forum/140315/ze/EssentialJS2MvcApplication1-1966355849  

 

Regards, 

Dharani. 

 

      

 

[nimue]

Hi Dharani,

Thank you very much for your support! now the animation is perfect.

Barbara Inzitari

[Dharanidharan Dharmasivam]

Hi Inzitari, 

Most welcome. Kindly get in touch with us, if you would require further assistance. 

Thanks, 

Dharani.