Infragistics’ Android Chart Tutorial-Getting Started

Mobile controls are different to desktop ones, and android controls are different to those on other mobile platforms. Within all this variation though, charts traditionally stand out as the most complicated and difficult to work with.

Getting started with a completely new control, especially a macro control with extended functionality can be a daunting task. To help you get started, I’m going to walk through the process of getting a chart into your application, adding series, and setting and updating data.

Setting Up The Project

The chart jars are built against android 2.3.1, so there should be no real difficulty getting them to work. You just need to add “datachart.jar” and “common.jar” to your android project’s build path.

DataChart extends android’s View class and can be created in code or placed directly in a layout xml file:

<com.infragistics.controls.DataChart android:id="@+id/dataChart"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />      

DataChart is currently the only chart-related class which can be created in xml, and does not support any xml-settable properties of its own. This aspect of the datachart control is currently under development and is subject to change.

Basic Chart Configuration

The basic chart configuration requires two axes, which at the very simplest will look like this:

DataChart dataChart=(DataChart)findViewById(R.id.dataChart); // get the empty chart

CategoryXAxis categoryAxis = new CategoryXAxis();
dataChart.scales().add(categoryAxis);         // add to the chart's scales collection
NumericYAxis valueAxis = new NumericYAxis();
dataChart.scales().add(valueAxis);            // add to the chart's scales collection

Once you’ve got the axes set up, you can create and configure a series:

ValueCategorySeries series=new AreaSeries();

series.setCategoryAxis(categoryAxis);        // tell the series its x axis
series.setValueAxis(valueAxis);              // tell the series its y axis
dataChart.series().add(series);              // add the series to the chart

We’re using an AreaSeries here, but there are a number of other choices which represent the commonly used chart types. To add more series to the chart, you just duplicate the above code, and set the data as shown in the following two sections as many times as you like, mixing series types as you see fit.

Category Series are very much like Excel charts, designed for tables of data. The data chart provides a reflection-based mechanism for specifying data, but the precise details depend on your application and the format of your data.

The fastest and most natural way to provide data to the data chart is currently being researched. , I’ll just describe a couple of the most commonly used methods.

Providing Data - Multiple Lists

A very common way for applications to store data is separate lists of values:

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

We’re going need to tell the category axis about the data as well as how to use each row for its axis labels. The axis will be displaying the row category member as a label, which we can set up like this:

categoryAxis.setDataSource(categories);         // axis data
categoryAxis.setLabelFormatter(new CategoryAxis.LabelFormatter() {
        public String format(CategoryAxis axis, Object item) {
        return (String)item;                    // axis item as a string
    }
});

The series will be displaying values from column1, which we can set up like this:

series.setValueMember("");        // "" means that the rows *are* the data
series.setDataSource(column1);    // the data table

You’ll notice that the series uses its own reflection code to extract the data from the rows, and that the

This time if you were to populate the categories and column1 list with some actual data and run your app, you’d be delighted to finally see a real chart.

Providing Data - Lists of Objects

Another very common way for applications to store data is as a list of objects:

private static class Row {
    public Row(String category, float column1, float column2) {
        this.category=category;
        this.column1=column1;
        this.column2=column2;
    }

    public String category;
    public float column1;
    public float column2;
};
private List<Row> rows=new ArrayList<Row>();

We’re going need to tell the category axis about the data as well as how to use each row for its axis labels. The axis will be displaying the row category member as a label, which we can set up like this:

categoryAxis.setDataSource(categories);         // axis data
categoryAxis.setLabelFormatter(new CategoryAxis.LabelFormatter() {
    public String format(CategoryAxis axis, Object item) {
        return (String)item;                    // axis item as a string
    }
});

The series will be displaying values from column1, which we can set up like this:

series.setValueMember("column1");    // name of the data row member property
series.setDataSource(rows);          // the data table

You’ll notice that the series uses its own reflection code to extract the data from the rows. In the sample code above, the data are present as fields. The chart will also find them if they are accessible via a getter method, or as member functions. This time if you were to populate the rows list with some actual data and run your app, you’d be delighted to finally see a real chart.

Updating Data

You’ve seen the two common ways that applications use to set data on the chart, and of course it is possible to mix the two so that some series take their data from fields in a common object and others from different lists or objects, but no matter how the data are provided to the series and axes, at some point the data are going to change, and the application will need to notify the chart components.

The easiest way to do this is to simply set a new data source on the series. In many cases though, it may be more efficient to update the data in-place. The category axis and all series provide functions to notify the chart of changes to the data:

• To notify a series or category axis that the data have been significantly changed, or if you are not sure of the changes which have been made to the data, call notifyDataReset().
• To notify a series or category axis that data have been added, call notifyDataAdd(int position, int count). If a contiguous range of data are added, it will be more efficient to call this function once for the whole range rather that once for each item.
• To notify a series or category axis that data has been removed, call notifyDataRemoved(int position, int count). If a contiguous range of data are removed, it will be more efficient to call this function once for the whole range rather that once for each item.
• To notify a series or category axis that data have been replaced, call notifyDataUpdated(int position, int count).

 

More Stuff to Play With

In the code you’ve seen so far, we’ve accepting the default values for pretty much all of the chart properties. The datachart is configured so that the minimal configuration is actually quite powerful: 

• Enabled the Infragistics motions framework
• Setup full autoranging on the value axis
• Allowed the chart to automatically assign visual properties to the series from its predefined palette.
• Enabled pinch zoom and panning

The full range of properties is well beyond the scope of this introduction, so I’m going to recommended that you read through the documentation and experiment with the chart, axis and series properties as well as their member functions (or stay tuned here for more).