Adding chart in scroll view

[Reza]

I'm trying to add some Bar and Line charts into an android app!
The main Idea is to have 3 kind of charts , a Pie Chart  , Bar Chart and Line Chart!
I wanna have these three charts in three tab layouts that are swipeable!
I don't know whether I used right words or not , but from the above sentence , I mean , I want to have 3 charts which are in three different tabs and i can switch between these tabs! I think a good example for this is """ http://www.androidhive.info/2013/10/android-tab-layout-with-swipeable-views-1/ """. I just add this link cause I'm not sure I used the right words and I explained It right!

But the problem comes , when there are many items in the Bar Chart or Line Chart to show!
So size of the bars decreases and it doesn't have a good view!!!
I tried to add the charts in an Scroll view , but it didn't work and nothing happened! I mean nothing was shown in the app!!!

what should I do to scroll the chart ???

[Antony Jekov]

Hello Reza,

Thank you for contacting us.

You can add the chart to any layout since the chart itself is a FrameLayout element. The problem you might be facing when trying to add it to a ScrollView is that the scroll view is a little bit tricky when it comes to determining the size of its elements. It expects the elements to know their size. The chart itself doesn't contain any views, since it is optimized for higher performance, so it doesn't actually have content of it's own, but rather uses the size of it's parent to determine its own size. So right now it actually displays your chart but it is 0dp tall, which is a bummer, but one that is easy to fix.

When adding the chart to a scroll view you must manually set the size of at least the height parameter, so that the scroll view can understand how to properly display the chart element.

Here is how you would do it in xml:

<com.telerik.widget.chart.visualization.pieChart.RadPieChartView
            android:id="@+id/first_chart"
            android:layout_width="fill_parent"
            android:layout_height="250dp" />

Here it is in Java code:

ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 250);
root.addView(chart, params);

This will make the chart as wide as the scroll view and it will be 250dp tall.

This will be enough for displaying the chart inside a scroll view. I am sending you a screen shot with the effect. Everything is working as expected on our side, but please fill free to contact us again should you face any more difficulties.

Thank you for your time and for using our controls. We are happy to be of service to your Android projects!

Regards,
Antony Jekov
Telerik

 

 

[Reza]

Hello

Thank for helping me!

But as I'm new to android programming and I am a real amateur in programming for android and using Telerik! I need a real help, whether there is some good code examples in github on somewhere else that I can get some help from it! Cause some how it's so strange for me and I don't really understand what's going on out there in the code!

Maybe it's unusual but i'm a college student and I just started programming for android! I will be thank full if you would help me by some code examples , I mean some codes that are more strong in some words than the examples in the site or some good documentations that will help me make some good charts in my program! Thank you...

[Antony Jekov]

Hello Reza,

Thanks for writing back, I am happy that you started learning programming and you chose the Android platform for your first projects.

It is a very pleasant environment to work with and it gives you so much you can do.

Regarding your question I prepared a code example, that you can explore and learn from. I am sending you the source code, you just need to include your own chart library. Use the one you were working with and it will be fine.

First I added a ScrollView and I set its with to be match_parent and the height to also match_parent. This will stretch the ScrollView and it will become as big as the screen. 

Notice how the ScrollView can only have one other element inside, so I am using a LinearLayout. I want to scroll the contents of the LinearLayout, so I set the width to be match_parent, but the height to be wrap_content, because I want all the elements to be visible and let the ScrollView handle how they will be displayed.

After that I put all the content inside the LinearLayout. I set the width of the TextViews to match_parent, so they will stretch to fill the LinearLayout horizontally. For height of the TextView I set wrap_content - this makes them as high as the text inside.

Now the trick part is, I tell the chart to be match_parent for width, but I cannot say wrap_content for height, since the chart doesn't have any content. It extends FrameLayout and it uses the canvas to render everything, so the wrap_content will be 0. That is why I set the height manually to some number I find appropriate.

This is all you need to place any element that doesn't have its own content inside a ScrollView. I hope this is helpful to you, I am sending you the source code and a screenshot with the working example.

Since you are new to programming I highly recommend Android Studio over Eclipse, since it is much more user friendly and easy to work with.

Let me know if something still remains unclear and good luck with your project.

Regards,
Antony Jekov
Telerik

 

 

[Reza]

Hello there!

Thank you for helping me , the code you sent me was really use full and helped me a lot!

I've done everything I wanted!
But I have a question, I wanna add three bar charts, as it was shown in the documentation that you add 2 charts together, I want to add three , but the third one doesn't appear in the code!
Is there any problem?
I mean does it mean that it only can have two charts or I should do something else rather than just making a new Bar Series and add this Bar Series in the chart View? I will send the code and a screen shot of what happens! 
I wonder if you could help me by this.
Thank you!

[Reza]

I couldn't attach the code to last post , so I copied it here!

"""""
package info.androidhive.tabsswipe;

import java.util.ArrayList;
import java.util.List;

import info.androidhive.tabsswipe.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
//import info.androidhive.tabsswipe.MonthResult;
import info.androidhive.tabsswipe.Project;

import com.telerik.widget.chart.visualization.behaviors.ChartPanAndZoomBehavior;
import com.telerik.widget.chart.visualization.cartesianChart.RadCartesianChartView;
import com.telerik.widget.chart.visualization.cartesianChart.axes.CategoricalAxis;
import com.telerik.widget.chart.visualization.cartesianChart.axes.LinearAxis;
import com.telerik.widget.chart.visualization.cartesianChart.series.categorical.BarSeries;
import com.telerik.widget.chart.engine.databinding.DataPointBinding;
import com.telerik.widget.chart.engine.series.combination.ChartSeriesCombineMode;
import com.telerik.widget.primitives.legend.RadLegendView;

public class BarChart extends Fragment {


private List<Project> projects;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {

this.initData();

View rootView = inflater.inflate(R.layout.test, container, false);
      
RadCartesianChartView chartView = new RadCartesianChartView(getActivity().getApplicationContext());
      
ChartPanAndZoomBehavior behavior = new ChartPanAndZoomBehavior();
      
chartView.getBehaviors().add(behavior);
      
      
// ((ViewGroup) rootView).addView(chartView);
      
BarSeries NothingTasks = new BarSeries(getActivity().getApplicationContext());
NothingTasks.setCategoryBinding(new DataPointBinding(){

@Override
public Object getValue(Object o){
return ((Project)o).getProjectName();
}
});
      
NothingTasks.setValueBinding(new DataPointBinding(){

@Override
public Object getValue(Object o){
return ((Project)o).getNothingTasks();
}
});

//////////////////////////////// new \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
BarSeries DoingTasks = new BarSeries(getActivity().getApplicationContext());
DoingTasks.setCategoryBinding(new DataPointBinding(){

@Override
public Object getValue(Object o){
return ((Project)o).getProjectName();
}
});
      
DoingTasks.setValueBinding(new DataPointBinding(){

@Override
public Object getValue(Object o){
return ((Project)o).getDoingTasks();
}
});
      
BarSeries DoneTasks = new BarSeries(getActivity().getApplicationContext());
DoneTasks.setCategoryBinding(new DataPointBinding(){

@Override
public Object getValue(Object o){
return ((Project)o).getProjectName();
}
});
      
DoneTasks.setValueBinding(new DataPointBinding(){

@Override
public Object getValue(Object o){
return ((Project)o).getDoneTasks();
}
});

NothingTasks.setCombineMode(ChartSeriesCombineMode.STACK);
DoingTasks.setCombineMode(ChartSeriesCombineMode.STACK);
DoneTasks.setCombineMode(ChartSeriesCombineMode.STACK);

NothingTasks.setLegendTitle("Nothing");
DoingTasks.setLegendTitle("Doing");
DoneTasks.setLegendTitle("Done");

RadLegendView legendView = new RadLegendView(getActivity().getApplicationContext());
legendView.setLegendProvider(chartView);

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(1300,110);
params.setMargins(10,10,10,10);
legendView.setLayoutParams(params);

LinearLayout linearLayout = new LinearLayout(getActivity().getApplicationContext());
linearLayout.setOrientation(LinearLayout.VERTICAL);

linearLayout.addView(legendView);
linearLayout.addView(chartView);


///////////////////////////////////////////////////////

NothingTasks.setData(this.projects);
chartView.getSeries().add(NothingTasks);

DoingTasks.setData(this.projects);
chartView.getSeries().add(DoingTasks);

DoneTasks.setData(this.projects);
chartView.getSeries().add(DoneTasks);

CategoricalAxis horizontalAxis = new CategoricalAxis(getActivity().getApplicationContext());
chartView.setHorizontalAxis(horizontalAxis);
      
LinearAxis verticalAxis = new LinearAxis(getActivity().getApplicationContext());
chartView.setVerticalAxis(verticalAxis);

((ViewGroup) rootView).addView(linearLayout);

return rootView;
}


private void initData() {
projects = new ArrayList<Project>();

projects.add(new Project("First" , 12 , 5 , 8));
projects.add(new Project("Second" , 6 , 7 ,9));
projects.add(new Project("Third" , 4 , 9 , 1));
projects.add(new Project("Fourth" , 12 , 7 , 3));
projects.add(new Project("First2" , 12 , 5 , 8));
projects.add(new Project("Second2" , 6 , 7 ,9));
projects.add(new Project("Third2" , 4 , 9 , 1));
projects.add(new Project("Fourth2" , 12 , 7 , 3));
projects.add(new Project("First3" , 12 , 5 , 8));
projects.add(new Project("Second3" , 6 , 7 ,9));
projects.add(new Project("Third3" , 4 , 9 , 1));
projects.add(new Project("Fourth3" , 12 , 7 , 3));

 
 

}

}"""""""

[Reza]

well, I found the problem!
It was my own mistake in initializing the Project class!

But I have an unusual problem now!

I change the color of the series , bu the function "setfillcolor(int color)" , but nothing happens!

I print the color by the function "getfillcolor()" and it shows that the color has changed , but the view doesn't change!
 It is still blue! what should I do now to change the colors?

[Reza]

Well , again I've done it and I'm so sorry that every time I come here and type something!

but there's a real problem now!
is it available to add legends for data's that are shown in pie chart?
for example there are three data types and I want to add legend for them , is it available to do it or I show make some text views and add names and color to them? Can I add legends the same as bar charts?

Sorry for asking alot, and thank you for your amazing library!

[Antony Jekov]

Hello Reza,

I see you are fighting your way through all difficulties quite well. However, I cannot help you with your last issue - adding a legend to a pie chart, since this feature is not available in the beta version of the chart, that you are currently using.

I encourage you to check out our new chart library, which is expected to be released at the end of next week. The legends for pie charts are implemented there, as well as many updates, new features, optimizations and a whole new control - Calendar for Android.

I am sorry I cannot offer you a workaround for the pie legends, but I hope it won't be crucial for your project, and you will be able to join us with the new release next week.

Please feel free to write back should you encounter any additional difficulties.

All best and happy coding,
Antony Jekov
Telerik