Android Charts for the Enterprise
Visualize your data in a wide span of Cartesian chart types including bar, column, area, line, spline, scatter, bubble, high-low-open-close (HLOC) and candle. With animation, customization, and interactive features, Xuni FlexChart for Android brings life to your mobile dashboards and allows you to create your ideal app. In this blog post I’ll show you how you can customize FlexChart to fit your charting requirements. I’ll cover data binding, multiple chart types and axes, stacking, customizing the appearance and rotating the chart.
Flexible Data Binding to Any Object
Unlike basic Android charts, FlexChart is not limited to being populated by a simple numeric array of data values. You can populate all FlexChart series and axis labels with a single List of any object type. This allows full flexibility and enterprise scalability following object-oriented design. The Xuni core library includes an extended List type called ObservableList. This List makes it easy to populate controls and dynamically update the data (observes updates). For example, imagine you have a business object model named MyBusinessObject that includes data for sales, downloads, expenses and the date. [java] public class MyBusinessObject { public Date date; public float sales; public float expenses; public int downloads; } [/java] You can very easily bind a list of these objects to FlexChart using the following java code. [java] ObservableList
Combine Multiple Chart Types in a Single Plot
FlexChart supports combining multiple series with different chart types into a single plot including area, bar, bubble, candle, column, HLOC, line, scatter and spline (smoothed line). FlexChart has a single ChartType property that applies to all series in the chart. However, you can override the chart type of any series by setting the Series’ own ChartType property. For example, this code snippet creates a chart with 2 column series and 1 line series. [java] flexChart.setChartType(ChartType.COLUMN); // create Sales series - column ChartSeries salesSeries = new ChartSeries(flexChart, "Sales", "sales"); flexChart.getSeries().add(salesSeries); // create Expenses series - column ChartSeries expensesSeries = new ChartSeries(flexChart, "Expenses", "expenses"); flexChart.getSeries().add(expensesSeries); // create Downloads series - line ChartSeries downloadsSeries = new ChartSeries(flexChart, "Downloads", "downloads"); downloadsSeries.setChartType(ChartType.LINE); flexChart.getSeries().add(downloadsSeries); [/java] 
Get Support for Multiple Axes and Stacking
You can increase the readability of the plot by adding multiple axes and stacking the series. For example, in the sample chart the download units are not measured at the same scale as currency (sales and expenses) so it may be better to give it its own axis. This code snippet adds a 2nd Y axis and sets the title for each axis accordingly. [java] flexChart.getAxisY().setTitle("Dollars"); ChartAxis axisYRight = new ChartAxis(flexChart, ChartPositionType.RIGHT); axisYRight.setTitle("Downloads"); axisYRight.setName("RIGHT"); axisYRight.setMajorGridVisible(false); flexChart.getAxes().add(axisYRight); // create Downloads series - line ChartSeries downloadsSeries = new ChartSeries(flexChart, "Downloads", "downloads"); downloadsSeries.setChartType(ChartType.LINE); downloadsSeries.setAxisY("RIGHT"); flexChart.getSeries().add(downloadsSeries); [/java] 
Stacking is common feature in charts – you either need it or it does nothing for you. With column charts stacking can improve the readability by minimizing horizontal space, while also making it more difficult to compare values between series. FlexChart supports stacking and stacking 100% - just set the StackingType property. [java] flexChart.setStackingType(ChartStackingType.STACKED); [/java] 
Modify the Chart’s Appearance to Match Any Theme
The FlexChart control has an extensive API that allows you to modify the appearance of virtually every part of the control. To start, you can set the chart’s palette to a different predefined set of colors. But you can also override and manually set the color for each series in addition to border color, thickness and opacity. This code snippet also hides the Y axis to create a very clean, modern look. [java] // set chart palette flexChart.setPalette(Palettes.MATERIAL); // override color for Downloads series downloadsSeries.setColor(Color.argb(255, 119, 179, 0)); // hide Y axis line flexChart.getAxisY().setAxisLineVisible(false); [/java] 
For easy reference, here’s a visual guide to all the predefined palettes. 
Rotate and Customize the Axis Format
In the previous example I show how you can hide the axis line to create a cleaner look. There are a few other properties on the axes that will help improve the overall appearance of the chart. The following code snippet adjusts the major unit, which reduces the total number of labels, and formats and rotates the X axis labels to fit more into view. For fun I’ve also changed the Expenses data to be negative so you can see a drastic new look to the chart. [java] flexChart.getAxisX().setMajorUnit(4000d); flexChart.getAxisX().setLabelAngle(45); flexChart.getAxisY().setFormat("MM/dd"); [/java] 
In addition to rotating the axis labels, did you know that you can also rotate the entire chart? Yes! And it’s quite astounding. Setting one property will rotate all the series, but be careful because the X and Y axes do not change planes. I went ahead and changed the line chart type to scatter, as well, though you absolutely can have a vertically drawn line series if that's what you want. [java] flexChart.setRotated(true); [/java] 
Built-in Legend with Automatic Positioning for Adaptive Apps
As you can see by now FlexChart has a built-in legend that requires no code to set up. By default, the legend is automatically positioned on the right or on the bottom for adaptive/responsive apps. So if you rotate the chart to a portrait layout the legend will move to the bottom so the chart can maximize the horizontal space. But you can override the automatic positioning by simply setting the legend’s position property. For the example above I preferred the legend be at the top. [java] flexChart.getLegend().setPosition(ChartPositionType.TOP); [/java]
Many More Features of FlexChart
There’s a lot more you can do to extend FlexChart including custom tooltips, static data labels, attached annotations, movable line markers, scrolling and zooming. Here are a few other blogs we’ve posted that cover a few additional features in FlexChart for Android. Want to see a feature added to FlexChart? Let us know in the comments.
Greg Lutz