We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Graph doesn't animate when additional properties set after creation

Hi there,

I am using the Chart control, created on the server like below.

@(Html.EJ().Chart(Model.Id, Model.ChartProperties))
I want to set additional properties on the clientside, so I use the ejChart method in JavaScript, passing in the object with additional properties e.g. formatting. I delay this until after the chart has already been created because otherwise it creates a default chart as well.
$(document).ready(function () {
	// Attach again after ready, in order to run after the charts have been created
	$(document).ready(function () {
		// Apply custom formatting to chart
		$container.ejChart(format);
	});
});
An example of format would be
{
	commonSeriesOptions : { marker : { dataLabel : { font : { opacity : 0.0 }}}}
}
It works, but the chart then doesn't animate when first loaded.
Is there a better way to do this? Or a way to make this work?
Thanks,
Jonny

3 Replies

PR Praveen Syncfusion Team July 1, 2015 07:27 AM UTC

Hi Jonny,


Thanks for using Syncfusion Products.


We have analyzed your reported query and found that you have not enabled the enableAnimation property while adding/changing properties on client side. The default value of enableAnimation is false. If you want to animate the chart after adding/changing properties on chart then the animation should be enabled in series property. We wish to let you know that this is the current behavior. You can achieve your requirements by applying following code snippet.


Code Snippet:


$(document).ready(function ()

{

// Attach again after ready, in order to run after the charts have been created

$(document).ready(function ()

{

// Apply custom formatting to chart

$("#container").ejChart("option", { series: [{ marker: { dataLabel: { font: {


"opacity": 0.0 } } }, enableAnimation: true }] });



});


});



We have prepared a sample based on your query and you can find the sample in below location


Sample: http://www.syncfusion.com/downloads/support/forum/119499/Animation1125796787.zip


Please let us know if you have any concern.

Thanks,

Praveenkumar



JS Jonny Shipton July 1, 2015 07:41 AM UTC

Hi Praveen,

Thanks for the quick response! I really appreciate it :)
Your solution works perfectly :)

Jonny


PR Praveen Syncfusion Team July 2, 2015 05:32 AM UTC

Hi Jonny,


Thanks for the update. Please let us know if you require further assistance on this.


Thanks,

Praveenkumar


Loader.
Up arrow icon