Need assistance with customizing Iguana UI Tools set:

Question

I'm currently developing an application that needs to show charts and I choose the IguanaUI tools set to show the charts in the application:

http://www.infragistics.com/products/android/

Now I'm facing some problems with customizing the chart it self, Here a screen shot of the current result a managed to achieve:

My problems are:

1. Orange: if you see the Y axis labels are "cut off" and don't show the full length. I would like to show the full labels. (including the 0 that is cut off for some reason from the bottom)

2. Green: I would like to remove the black strips from the background of the chart and to set my own background image.

setting android:background to the chart object in the XML layout file, sets the background to the whole object (including the axis) and doesn't remove the black strips.

I would like the image to be applied only to the column area (without the axis).

UPDATE: I found that you can apply:

dataChart.setGridDisplayType(GridDisplayType.NONE);

to the DataChart object, but this removes the Axis as well and not only the inner grid.

UPDATE2: Here is my ChartFragment that creates the chart:

public class ChartFragment extends Fragment 
{
private Tab tab;

private static final String TAG = ChartFragment.class.getSimpleName();
LinearLayout fragmetLayout, llParameterContainer;
private DataChart dataChart;
private List<String> categories;
private List<Float> column1;
private List<Float> column2;
private List<List<Float>> columnList;
TextView tabName;


public ChartFragment(Tab tab)
{
    this.tab = tab;
}

 /** (non-Javadoc)
 * @see android.support.v4.app.Fragment#onCreateView(android.view.LayoutInflater, android.view.ViewGroup, android.os.Bundle)
 */
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 
{
    if (container == null) {
        // We have different layouts, and in one of them this
        // fragment's containing frame doesn't exist.  The fragment
        // may still be created from its saved state, but there is
        // no reason to try to create its view hierarchy because it
        // won't be displayed.  Note this is not needed -- we could
        // just run the code below, where we would create and return
        // the view hierarchy; it would just never be used.
        return null;
    }

    fragmetLayout = (LinearLayout)inflater.inflate(R.layout.chart_fragment_layout, container, false);
    createData();
    createChart();
    createUI();

    return fragmetLayout;
}


/*
private void createData() {

    categories=new ArrayList<String>();
    column1=new ArrayList<Float>();
    column2=new ArrayList<Float>();
    columnList = new ArrayList<List<Float>>();

    Random random=new Random();
    float value1=25.0f;
    float value2=25.0f;

    for(int i=0; i<20; ++i) {
        value1+=2.0*(random.nextFloat()-0.5f);
        value2+=2.0*(random.nextFloat()-0.5f);

        categories.add(Integer.toString(i));
        column1.add(value1);
        column2.add(value2);
    }       
}
*/


private void createData() 
{            
    categories=new ArrayList<String>();
    column1=new ArrayList<Float>();
    column2=new ArrayList<Float>();
    columnList = new ArrayList<List<Float>>();

    for (int i=0; i < tab.getChart().getChartMeasuresList().size(); i++)
    {
        //categories.add(Integer.toString(i)); //the x axis.
        Measure tempMeasure = tab.getChart().getChartMeasuresList().get(i);
        final int measureDataSize = tempMeasure.getMeasureData().size();
        Log.d(TAG, "current tempMeasure: " + tempMeasure.getMeasureData().toString() + " with: "+ measureDataSize + " measure data items." );
        for (int j=0; j < measureDataSize; j++)
        {
            if (i == 0)
            {
                categories.add(tempMeasure.getMeasureData().get(j).getLabel());
            }
            column1.add(Float.valueOf(tempMeasure.getMeasureData().get(j).getValue())); //column data
            Log.d(TAG, "add value " + tempMeasure.getMeasureData().get(j).getValue() + " at label/category: "+ tempMeasure.getMeasureData().get(j).getLabel());
            //column2.add(value2); //column2 data
        }
        columnList.add(column1);
        column1=new ArrayList<Float>();
    }       
}

private void updateData() {
    /*
    Random random=new Random();
    float value1=25.0f;
    float value2=25.0f;

    for(int i=0; i<categories.size(); ++i) {
        value1+=2.0*(random.nextFloat()-0.5f);
        value2+=2.0*(random.nextFloat()-0.5f);

        column1.set(i, value1);
        column2.set(i, value2);
    }
    */
}

private void createChart() {
    dataChart=(DataChart) fragmetLayout.findViewById(R.id.dataChart);   // get the empty chart view from the activity layout
    dataChart.setHorizontalZoomEnabled(true);           // allow horizontal zooming
    dataChart.setVerticalZoomEnabled(false);            // don't allow vertical zooming
    dataChart.setGridDisplayType(GridDisplayType.BACK);
    dataChart.setBackgroundColor(getResources().getColor(R.color.light_gray));

    // set up an x axis
    CategoryXAxis categoryAxis=new CategoryXAxis(); 
    categoryAxis.setVisibility(View.VISIBLE);
    categoryAxis.setDataSource(categories);             // tell the axis about the data table
    Brush brush = categoryAxis.getLabelBrush();
    categoryAxis.setLabelTextSize(20);
    brush.setColor(Color.BLACK); 
    categoryAxis.setGap(1.0f);
    categoryAxis.setLabelBrush(brush);
    categoryAxis.setLabelFormatter(new CategoryAxis.LabelFormatter() {
        public String format(CategoryAxis axis, Object item) {
            return (String)item;                        // return the axis item as a string
        }
    });
    //categoryAxis.setBrushes(Color.BLACK);
    dataChart.scales().add(categoryAxis);               // all axes must be added to the chart's scales collection

    // set up a y axis

    NumericYAxis valueAxis=new NumericYAxis();
    valueAxis.setLabelTextSize(15);
    valueAxis.labelAreaRect.set(30, 30, 30, 30);
    valueAxis.setVisibility(View.VISIBLE);

    Brush brush2 = valueAxis.getLabelBrush();
    brush2.setColor(Color.BLACK); 
    valueAxis.setLabelBrush(brush2);
    valueAxis.setMinimumValue(-10.0f);
   // valueAxis.setMaximumValue(110.0f);
    //valueAxis.setMinimumValue(0.0f);                  // the random data look much nicer with a fixed axis range
    //valueAxis.setMaximumValue(50.0f);                 // the random data look much nicer with a fixed axis range
    valueAxis.setLabelFormatter(new NumericAxis.LabelFormatter() {
        public String format(NumericAxis axis, float item, int precision) {
            if(precision!=numberFormat.getMinimumFractionDigits()) {
                numberFormat.setMinimumFractionDigits(precision);   // set the formatting precision
                numberFormat.setMaximumFractionDigits(precision);   // set the formatting precision
            }

            return numberFormat.format(item);                       // return item as a string
        }

        final NumberFormat numberFormat=NumberFormat.getInstance(); // numeric formatter for axis values
    });
    dataChart.scales().add(valueAxis);                  // all axes must be added to the chart's scales collection

    for (int i=0; i < columnList.size(); i++)
    {
        ValueCategorySeries series=new ColumnSeries();  
        series.setCategoryAxis(categoryAxis);           // tell the series its x axis
        series.setValueAxis(valueAxis);                 // tell the series its y axis
        series.setValueMember("");                      // tell the series the data rows are the values
        Log.d(TAG, "setting serias_"+i+": "+columnList.get(i).toString());
        series.setDataSource(columnList.get(i));                    // tell the series the data table
        dataChart.series().add(series);                 // add the series to the chart
    }
    /*
    {
        ValueCategorySeries series=new ColumnSeries();  
        series.setCategoryAxis(categoryAxis);           // tell the series its x axis
        series.setValueAxis(valueAxis);                 // tell the series its y axis
        series.setValueMember("");                      // tell the series the data rows are the values
        series.setDataSource(column1);                  // tell the series the data table
        dataChart.series().add(series);                 // add the series to the chart
    }

    {
        ValueCategorySeries series=new ColumnSeries();  
        series.setCategoryAxis(categoryAxis);           // tell the series its x axis
        series.setValueAxis(valueAxis);                 // tell the series its y axis
        series.setValueMember("");                      // tell the series the data rows are the values
        series.setDataSource(column2);                  // tell the series the data table
        dataChart.series().add(series);                 // add the series to the chart
    }
    */
}


private void createUI() {
    Button updateButton=(Button) fragmetLayout.findViewById(R.id.updateButton);

    updateButton.setOnClickListener(new OnClickListener() {
        public void onClick(View arg0) {
            updateData();

            for(Series series: dataChart.series()) {
                series.notifyDataReset();
            }
        }
    });

    Button overlapButton=(Button) fragmetLayout.findViewById(R.id.overlapButton);

    overlapButton.setOnClickListener(new OnClickListener() {
        public void onClick(View arg0) {
            CategoryXAxis categoryAxis=(CategoryXAxis)dataChart.scales().get(0);

            categoryAxis.setOverlap(2.0f*new Random().nextFloat()-1.0f);
        }
    });

    Button gapButton=(Button) fragmetLayout.findViewById(R.id.gapButton);

    gapButton.setOnClickListener(new OnClickListener() {
        public void onClick(View arg0) {
            CategoryXAxis categoryAxis=(CategoryXAxis)dataChart.scales().get(0);

            categoryAxis.setGap(new Random().nextFloat());
        }
    });
}
}

Does anyone has experience with this tool? I was looking all day in their documentation to understand how to perform those task but so far without result.

Any help would be appreciated. Thanks.

Answer 1

In the currently released version of IguanaUI, your best option to remove the grid would be to call setMinorBrush(), setMajorBrush(), and setStripBrush() with a null or transparent solid color brush.

As for the vertical axis labels being clipped, you can increase the size of the axis to handle the case where the left or right side of the labels are being clipped. There is currently no way to resolve the clipping at the top and bottom of the vertical axis.