Pie Chart inside a card view not visible in android

Question

I am trying to create an Pie chart inside a card view. Fro creating a pie chart in am using achartEngine-1.1. I am using a card view bcz i want to number of chart in list view. I designed an XML file name dashboard_graph_view with an Linear Layout and Text-view for title of the chart. and created an relative layout inside which I place the pie chart.But when I run the code pie chart was not created. But when try to create the text-view inside same it was visible.I tried to google but didn't found anything useful. Here is the code for getview.

public View getView(int arg0, View v, ViewGroup arg2) {
    // TODO Auto-generated method stub
    if(v==null)
        v = inflater.inflate(R.layout.dashboard_graph_view, null);

    TextView txt1 = (TextView) v.findViewById(R.id.tittle);
    txt1.setText(port_list.get(arg0).get("portlet_title"));
    // Pie Chart Section Names
    String[] code = new String[] {
            "Eclair & Older", "Froyo", "Gingerbread", "Honeycomb",
            "IceCream Sandwich", "Jelly Bean"
    };

    // Pie Chart Section Value
    double[] distribution = { 3.9, 12.9, 55.8, 1.9, 23.7, 1.8 } ;

    // Color of each Pie Chart Sections
    int[] colors = { Color.BLUE, Color.MAGENTA, Color.GREEN, Color.CYAN, Color.RED,
            Color.YELLOW };

    // Instantiating CategorySeries to plot Pie Chart
    CategorySeries distributionSeries = new CategorySeries(" Android version distribution as on October 1, 2012");
    for(int i=0 ;i < distribution.length;i++){
        // Adding a slice with its values and name to the Pie Chart
        distributionSeries.add(code[i], distribution[i]);
    }

    // Instantiating a renderer for the Pie Chart
    DefaultRenderer defaultRenderer  = new DefaultRenderer();
    for(int i = 0 ;i<distribution.length;i++){
        SimpleSeriesRenderer seriesRenderer = new SimpleSeriesRenderer();
        seriesRenderer.setColor(colors[i]);
        seriesRenderer.setDisplayChartValues(true);
        // Adding a renderer for a slice
        defaultRenderer.addSeriesRenderer(seriesRenderer);
    }

    defaultRenderer.setChartTitle("Android version distribution as on October 1, 2012 ");
    defaultRenderer.setChartTitleTextSize(20);
    defaultRenderer.setZoomButtonsVisible(true);
    GraphicalView graph_view = ChartFactory.getPieChartView(app.getApplicationContext(), distributionSeries, defaultRenderer);
    // Creating an intent to plot bar chart using dataset and multipleRenderer
    //        Bundle intent = ChartFactory.getPieChartIntent(app.getBaseContext(), distributionSeries , defaultRenderer, "AChartEnginePieChartDemo");
    RelativeLayout l1 = (RelativeLayout) v.findViewById(R.id.graph_view);

    l1.addView(graph_view,new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
    // Start Activity

    graph_view.repaint();
    l1.refreshDrawableState();

    return v;
}

here is the xml file.

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/feed_bg"
android:layout_marginBottom="-9dp"
android:orientation="vertical" >

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_marginLeft="@dimen/feed_item_margin"
    android:layout_marginRight="@dimen/feed_item_margin"
    android:layout_marginTop="@dimen/feed_item_margin"
    android:background="@drawable/bg_parent_rounded_corner"
    android:orientation="vertical"
    android:paddingBottom="@dimen/feed_item_padding_top_bottom"
    android:paddingTop="@dimen/feed_item_padding_top_bottom" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingLeft="@dimen/feed_item_padding_left_right"
        android:paddingRight="@dimen/feed_item_padding_left_right" >

        <TextView
            android:id="@+id/tittle"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textColor="#FF000000"
            android:textSize="@dimen/feed_item_profile_name"
            android:textStyle="bold" />
    </LinearLayout>

    <RelativeLayout
        android:id="@+id/graph_view"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.91"
        android:orientation="horizontal"
        android:paddingLeft="@dimen/feed_item_padding_left_right"
        android:paddingRight="@dimen/feed_item_padding_left_right" >
    </RelativeLayout>
  </LinearLayout>

  </LinearLayout>

Thanks in advance.

Answer 1

Is it leaving space for the pie chart below the title, or does the card just have the title in it and no space? If so, then the problem would be that Android doesn't think that graph_view doesn't need any vertical space, so it doesn't leave you any. I know you are using match_parent up the view hierarchy, but a ListView still figures out how much vertical space its list items really need, and just gives them that much space.

Any chance you could use a fixed height for the pie chart in your list? In dips, of course.

EDIT

Answering the question in the comment: ListView calls getView repeatedly as you scroll up and down the list. Currently you are calling addView each time, which means you are adding a new chart each time. One simple solution is to remove the previous chart each time:

RelativeLayout l1 = (RelativeLayout) v.findViewById(R.id.graph_view);
if (l1.getChildCount() > 0) {
    l1.removeAllViews();
}
l1.addView(graph_view,new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));

A much nicer solution to this situation, when you have different things that you want to show in your list, is to create a "view type" concept for your list. You would start by doing this in your adapter:

private static final int TYPE_PIE = 0;
private static final int TYPE_BAR = 1;

@Override
public int getViewTypeCount() {
    return 2;
}

@Override
public int getItemViewType(int position) {
    MyPortClass port = port_list.get(position);
    if (port.shouldShowPie()) {
        return TYPE_PIE;
    } else {
        return TYPE_BAR;
    }
}

Next you should create two versions of your XML file, one with a pie chart already in the layout, and one with a bar chart. Then in your getView method:

public View getView(int position, View v, ViewGroup arg2) {
    MyPortClass port = port_list.get(position);

    if (v == null) {
        if (getViewType(position) == TYPE_PIE) {
            v = inflater.inflate(R.layout.dashboard_pie_view, null);
        } else {
            v = inflater.inflate(R.layout.dashboard_bar_view, null);
        }
    }
    ...

This is a much nicer solution, but you may not be able to use it if ChartFactory does not support configuring an existing chart view. Currently you are only showing ChartFactory.getPieChartView, but maybe there is a ChartFactory method that takes an existing view, and lets you rebuild a view using your renderer. If not, then the simple solution above should work fine.