We will use AchartEngine. This is a great library for Android that help you to create charts. It supports several chart types, just to name a few:
  • line chart
  • area chart
  • bar chart
  • pie chart
  • combined chart and so on.
 This library helps you in every aspects when you create a charts so you don’t need anything else to create interesting charts.

If you use Android Studio you can download directly the jar containing all the classes and add it to your project. When the download is completed, you should add the library under libs folder so that I can be included automatically into your project.
here some basic concepts that stand behind this library and they are important so that you can use it:
  • Dataset (The set of data you have to draw in your chart)
  • The view (or the type of chart you want)
  • Renderer (It controls how the view is drawn, settings some parameters you can change the way the charts looks like. There are two types of renderer: one that controls the rendering of the dataset and another one that controls how the main chart aspects look like (i.e. axis, labels and so on)
  • Chart factory (combines the dataset and the renderers to create the charts. The chart can be created inside an Activity or the factory can return a View.)

Line chart

As first example, we want to create a Line chart. In this chart we will draw the temperature that is our Dataset. Considering that a line chart is an XY chart we create as first step the right series that holds the data:
1XYSeries series = new XYSeries("London Temperature hourly");
next we have to populate the series using the data retrieved from WeatherLib (hourly weather forecast):
1int hour = 0;
2for (HourForecast hf : nextHourForecast) {
3    series.add(hour++, hf.weather.temperature.getTemp());
4}
almost done, the series contains the data. If you look carefully we represented on X-axis the hours and on Y-axis the temperature.
Remembering the basic concepts described above, we have to create a series renderer:
1// Now we create the renderer
2XYSeriesRenderer renderer = new XYSeriesRenderer();
3renderer.setLineWidth(2);
4renderer.setColor(Color.RED);
5// Include low and max value
6renderer.setDisplayBoundingPoints(true);
7// we add point markers
8renderer.setPointStyle(PointStyle.CIRCLE);
9renderer.setPointStrokeWidth(3);
At line 3, we set the line width. One aspect you should consider when using achartengine is that the dimensions are expressed in pixel not in dp!. At line 4, we set the color and then at line 8 we set the Point Style, meaning the point contained in our series.
The last step is creating the renderer that controls the full charts and add the single renderer for each series:
1XYMultipleSeriesRenderer mRenderer = new XYMultipleSeriesRenderer();
2mRenderer.addSeriesRenderer(renderer);
and then:
1// We want to avoid black border
2mRenderer.setMarginsColor(Color.argb(0x00, 0xff, 0x00, 0x00)); // transparent margins
3// Disable Pan on two axis
4mRenderer.setPanEnabled(false, false);
5mRenderer.setYAxisMax(35);
6mRenderer.setYAxisMin(0);
7mRenderer.setShowGrid(true); // we show the grid
A small tip: if you create a chart, you will notice that around the chart there are black borders, if you want to remove them you have to set this margin transparent (line 2). At line 5,6 we set the Y value range.
The last step is creating the View:
1GraphicalView chartView = ChartFactory.getLineChartView(getActivity(), dataset, mRenderer);
Now we have the view the last step is adding it to our layout. Let us suppose we have a linear layout:
1<LinearLayout
2       android:layout_width="match_parent"
3       android:layout_height="match_parent"
4       android:id="@+id/chart"
5       android:orientation="vertical"/>
We add the view to it:
1chartLyt.addView(chartView,0);
Running the example we have at the end:


Bar chart

Bar chart are another type of charts that can be built using AchartEngine. In this case, we can suppose we want to plot the pressure values retrieved from WeatherLib. As we did before we have to create a data series:
1for (HourForecast hf : nextHourForecast) {
2    series.add(hour++, hf.weather.currentCondition.getPressure());
3 
4    if (hour > 24)
5        break;
6}
Some steps are very similar to what explained before so we can safely jump them and create the chart:
1GraphicalView chartView = ChartFactory.getBarChartView(getActivity(), dataset, mRenderer, BarChart.Type.DEFAULT);

Range bar

Range bar is special type of bar chart and it is interesting because it uses a different type of data series. A Range bar is a bar that has a lower and upper limit. We can use this type of chart if we want to plot the max and min temperature.
1RangeCategorySeries series = new RangeCategorySeries("London next days temperature");
now we add the values:
1for (DayForecast df : dayForecast) {
2    series.add(df.forecastTemp.min, df.forecastTemp.max);
3    mRenderer.addXTextLabel(hour++, sdf.format(df.timestamp));
4}
At line 2 we set the min and max temperature adding them to the data series. At line 3 we add a label to the X-axis values. In this case we use the day number and the month:
1SimpleDateFormat sdf = new SimpleDateFormat("dd,MMM");
now we add the series:
1XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
2dataset.addSeries(series.toXYSeries());
and create the series renderer:
1XYSeriesRenderer renderer = new XYSeriesRenderer();
2renderer.setDisplayChartValues(true);
3mRenderer.addSeriesRenderer(renderer);
4mRenderer.setYAxisMax(30.0);
5mRenderer.setYAxisMin(0.0);
6renderer.setChartValuesTextSize(12);
7renderer.setChartValuesFormat(new DecimalFormat("#.##"));
8renderer.setColor(Color.GREEN);
Some aspects to notice: at line 2, we tell to the renderer we want that the values appears on the chart, while at line 6, we set the text size. Another important aspect: the value format: at line 7, we specify that we want two digits after the decimal point. Finally, we can create the graph:
1GraphicalView chartView = ChartFactory.getRangeBarChartView(getActivity(), dataset, mRenderer, BarChart.Type.DEFAULT);
Running the example we have:


TAGS :