This is a migrated thread and some comments may be shown as answers.

Bar graph Animation in Android using Telerik

21 Answers 173 Views

Chart

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

21 Answers, 1 is accepted

answered on 26 Jun 2015, 08:47 AM

Hi Deepak,

We just released the new version (Q2 2015). It has a new API for animations. The documentation will be uploaded shortly.

You have to use ChartAnimationPanel to use the animations. The animation panel is a special layout that creates views for each series, animates these views. You have to add the chart to this panel. Then add animations to the panel. For example:

ChartAnimationPanel animationPanel = new ChartAnimationPanel(context);

animationPanel.setChart(chartView);

ChartFadeAnimation fadeAnimation = new ChartFadeAnimation(barSeries);

animationPanel.addAnimation(fadeAnimation);

Please keep in mind that the chartView must not be already added to the Android layout hierarchy.

Regards,
Victor
Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

answered on 06 Jul 2015, 03:06 PM

Hi Nicholas,

The SDK Examples and App Store examples are not uploaded yet. They will be online by the end of the week. The online help about the animations will also be available shortly.

Here is an example of how to enable the chart animations:

RadCartesianChartView chartView = new RadCartesianChartView(this);

chartView.setHorizontalAxis(new CategoricalAxis());

chartView.setVerticalAxis(new

LinearAxis());

BarSeries series = new BarSeries();

series.setShowLabels(true);

series.setCategoryBinding(new PropertyNameDataPointBinding("Category"));

series.setValueBinding(new PropertyNameDataPointBinding("Value"));

series.setData(MainViewModel.GetCategoricalData());

chartView.getSeries().add(series);

ChartAnimationPanel animationPanel = new ChartAnimationPanel(this);

animationPanel.setChart(chartView);

ChartScaleAnimation scaleAnimation = new ChartScaleAnimation(series);

scaleAnimation.setDuration(5000);

scaleAnimation.setStartScaleX(0);

scaleAnimation.setStartScaleY(0);

scaleAnimation.setInitialDelay(1000);

animationPanel.addAnimation(scaleAnimation);

root.addView(animationPanel);

And the GetCategoricalData() method:

public static ObservableCollection<CategoricalData> GetCategoricalData() {

ObservableCollection<CategoricalData> data = new ObservableCollection<CategoricalData>();

for (Integer i = 0; i < 15; i++) {

Integer value = 50 + random.nextInt(50);

data.add(new CategoricalData(value, i.toString()));

}

return data;

}

public class CategoricalData {

public Object category;

public double value;

public CategoricalData(double value, Object category) {

this.value = value;

this.category = category;

}

public Object getCategory() {

return this.category;

}

public void setCategory(Object value) {

this.category = value;

}

public double getValue() {

return this.value;

}

public void setValue(double value) {

this.value = value;

}

Please write again if you need further assistance.

Regards,
Victor
Telerik

answered on 15 Jul 2015, 08:25 PM

Hi --

Okay, I was able to confirm that the overridePendingTransition() is actually NOT related to this issue.

Here is the core of my layout

<LinearLayout

android:layout_width="0dp"

android:layout_height="fill_parent"

android:layout_weight="1"

android:background="#0000f0"

android:orientation="vertical" >

<TextView

android:id="@+id/info_box_lower_left_charttitle"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:gravity="center"

/>

<FrameLayout

android:background="#00f0f0"

android:id="@+id/TPVChartContainer"

android:layout_width="match_parent"

android:layout_height="match_parent" />

</LinearLayout>

As you can see I gave the two layouts distinctive background colors. I then made the TPVChartContainer invisible and made it visible after adding the animation layout:

tpvChartContainer.addView(tpvAnimationPanel);

tpvChartContainer.setVisibility(View.VISIBLE);

However, when doing this I see the animation panel appear along with the chart (which flashes on and then off) and then the animation runs.

This is happening with both my bar chart and my pie chart animations - all of which are scale animations.

Rich