I'm developing an Android application where I have to display several graphs in a one scrollview. Now, I got the linechart to display on scrollview and I can scroll them fine. However, there seems to be problem with panning the charts up or down. Panning stutters and gets very jerky, in practice almost unusable.
Now, I have set renderer.setInScroll(true); and everything else seems to work fine (panning horizontally). I think this has something to do with scrollview interfering with the linechart's touch events, but I'm still too new with Android to figure it out myself.
When I googled, I found this old topic about similar problem: https://groups.google.com/forum/?fromgroups#!topic/achartengine/j6BIrZ8fm4k The person in topic says he solved it with this: HorizontalScrollView within ScrollView Touch Handling but I was unable to apply it to Achart.
Here is the relevant code of my test linechart. It is set into linearlayout inside the scrollview (which is in a Fragment in case it makes any difference):
private XYMultipleSeriesDataset getDemoDataset() {
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
final int nr = 80;
Random r = new Random();
for (int i = 0; i < SERIES_NR; i++) {
XYSeries series = new XYSeries("Demo series " + (i + 1));
for (int k = 0; k < nr; k++) {
series.add(k, 20 + r.nextInt() % 100);
}
dataset.addSeries(series);
}
return dataset;
}
private XYMultipleSeriesRenderer getDemoRenderer() {
XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
renderer.setAxisTitleTextSize(12);
renderer.setChartTitleTextSize(12);
renderer.setLabelsTextSize(15);
renderer.setLegendTextSize(15);
renderer.setPointSize(5f);
renderer.setMargins(new int[] { 20, 30, 15, 10 });
XYSeriesRenderer r = new XYSeriesRenderer();
r.setColor(Color.BLACK);
r.setPointStyle(PointStyle.POINT);
r.setFillBelowLine(false);
r.setFillPoints(true);
renderer.addSeriesRenderer(r);
renderer.setInScroll(true);
setChartSettings(renderer);
return renderer;
}
private void setChartSettings(XYMultipleSeriesRenderer renderer)
{
renderer.setChartTitle("Chart demo");
renderer.setXTitle("x values");
renderer.setYTitle("y values");
renderer.setApplyBackgroundColor(false);
renderer.setRange(new double[] {0,200,0,200});
renderer.setFitLegend(false);
renderer.setAxesColor(Color.BLACK);
renderer.setMarginsColor(Color.WHITE);
renderer.setLabelsColor(Color.BLACK);
renderer.setShowGrid(true);
renderer.setXAxisMin(0);
renderer.setXAxisMax(200);
renderer.setYAxisMin(0);
renderer.setZoomEnabled(false);
renderer.setYAxisMax(200);
}
...
rpmGraph = ChartFactory.getLineChartView(getActivity(), getDemoDataset(), getDemoRenderer());
LinearLayout layout = (LinearLayout) getActivity().findViewById(R.id.rpmGraph);
layout.addView(rpmGraph);
Question in short is how I could get the panning to work properly vertically in a scrollview?
If you want to put more than one chart in vertcal scroll view then Your xnl layout should be like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/rltMainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
tools:context=".MainActivity" >
<ImageView
android:id="@+id/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_ttl_bar"
android:contentDescription="@string/app_name" />
<ScrollView
android:id="@+id/scrlMainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/title"
tools:context=".MainActivity" >
<LinearLayout
android:id="@+id/chart"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/help_sel"
android:contentDescription="@string/app_name" />
<LinearLayout
android:id="@+id/chart1"
android:layout_width="fill_parent"
android:layout_height="300dp"
android:orientation="vertical" >
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/help_sel"
android:contentDescription="@string/app_name" />
<LinearLayout
android:id="@+id/chart2"
android:layout_width="fill_parent"
android:layout_height="300dp"
android:orientation="vertical" >
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/help_sel"
android:contentDescription="@string/app_name" />
<LinearLayout
android:id="@+id/chart3"
android:layout_width="fill_parent"
android:layout_height="300dp"
android:orientation="vertical" >
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/help_sel"
android:contentDescription="@string/app_name" />
<LinearLayout
android:id="@+id/chart4"
android:layout_width="fill_parent"
android:layout_height="300dp"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>
And your chart multirenderer setting should be like this.
XYMultipleSeriesRenderer mRenderer = new XYMultipleSeriesRenderer();
double[] range = {0 , 5 , 0 , 5};
mRenderer.setMargins(marign);
mRenderer.setAxisTitleTextSize(axisTextSize);
mRenderer.setChartTitleTextSize(chartTextSize);
mRenderer.setLabelsTextSize(axisTextSize);
mRenderer.setLegendTextSize(legendTextSize);
// multiRenderer.setLegendHeight(40);
//when we dealing with one bar with one series , it is good to not deal with barSpacing() and setBarWidth()
//multiRenderer.setBarSpacing(-0.1);
//multiRenderer.setBarWidth((int)(context.getResources().getDimension(R.dimen.chart_bar_width)));
//multiRenderer.setBarWidth(50);
mRenderer.setAxesColor(Color.parseColor("#2c2c2c"));
mRenderer.setInitialRange(range, 1);
mRenderer.setXAxisMin(0.4);
mRenderer.setXAxisMax(6);
mRenderer.setXLabels(0);
//multiRenderer.setXAxisMax(15);
//multiRenderer.setYAxisMin(0);
mRenderer.setXLabelsAlign(Align.CENTER);
mRenderer.setYLabelsAlign(Align.RIGHT);
mRenderer.setPanEnabled(true,false);
mRenderer.setZoomEnabled(false, false);
mRenderer.setPanLimits(new double[]{0,18,0,0});
mRenderer.setApplyBackgroundColor(true);
mRenderer.setMarginsColor(Color.WHITE);
mRenderer.setBackgroundColor(Color.argb(0x00, 0x01, 0x01, 0x01));
//multiRenderer.setMarginsColor(Color.parseColor("#FF000000"));
mRenderer.setXTitle(getxTItle());
mRenderer.setYTitle(getyTItle());
mRenderer.setXLabelsPadding(10);
mRenderer.setYLabelsPadding(10);
mRenderer.setXLabelsColor(Color.parseColor("#2c2c2c"));
mRenderer.setYLabelsColor(0, Color.parseColor("#2c2c2c"));
mRenderer.setLabelsColor(Color.parseColor("#2c2c2c"));
mRenderer.setShowCustomTextGridY(true);
mRenderer.setGridColor(Color.parseColor("#2c2c2c"));
mRenderer.setPointSize(20.5f);
mRenderer.setInScroll(true);