Achartengine linechart panning in Scrollview

Question

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?

Answer 1

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);