If you are thinking of plotting charts in your next projejct then this tutorial is for you. In this tutorial we want to look at the best Android Chart libraries and how to use them.
(a). MPAndroidChart
A powerful rocket Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, panning and animations.
Here are the features it supports:
- Many different chart types: LineChart, BarChart (vertical, horizontal, stacked, grouped), PieChart, ScatterChart, CandleStickChart (for financial data), RadarChart (spider web chart), BubbleChart
- Combined Charts (e.g. lines and bars in one)
- Scaling on both axes (with touch-gesture, axes separately or pinch-zoom)
- Dragging / Panning (with touch-gesture)
- Separate (dual) y-axes
- Highlighting values (with customizeable popup-views)
- Save chart to SD-Card (as image)
- Predefined color templates
- Legends (generated automatically, customizeable)
- Customizeable Axes (both x- and y-axis)
- Animations (build up animations, on both x- and y-axis)
- Limit lines (providing additional information, maximums, …)
- Listeners for touch, gesture & selection callbacks
- Fully customizeable (paints, typefaces, legends, colors, background, dashed lines, …)
- Realm.io mobile database support via MPAndroidChart-Realm library
- Smooth rendering for up to 10.000 data points in Line- and BarChart (tested on a 2014 OnePlus One running Android 6.0)
- Lightweight (method count ~1.4K)
- Available as .jar file (only 500kb in size)
- Available as gradle dependency and via maven
- Google-PlayStore Demo Application
- Widely used, great support on both GitHub and stackoverflow – mpandroidchart
- Also available for iOS: Charts (API works the same way)
- Also available for Xamarin: MPAndroidChart.Xamarin
- Limited support for dynamic and realtime data
Step 1: Installation
Start by registering jitpack as a maven Url in your root-level build.gradle:
repositories {
maven { url 'https://jitpack.io' }
}
Now come to app-level build.gradle and declare the dependency:
dependencies {
implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
}
Step 2: Example
Here is an example of BarChart creation activity using this library:
public class BarChartActivity extends DemoBase implements OnSeekBarChangeListener,
OnChartValueSelectedListener {
private BarChart chart;
private SeekBar seekBarX, seekBarY;
private TextView tvX, tvY;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_barchart);
setTitle("BarChartActivity");
tvX = findViewById(R.id.tvXMax);
tvY = findViewById(R.id.tvYMax);
seekBarX = findViewById(R.id.seekBar1);
seekBarY = findViewById(R.id.seekBar2);
seekBarY.setOnSeekBarChangeListener(this);
seekBarX.setOnSeekBarChangeListener(this);
chart = findViewById(R.id.chart1);
chart.setOnChartValueSelectedListener(this);
chart.setDrawBarShadow(false);
chart.setDrawValueAboveBar(true);
chart.getDescription().setEnabled(false);
// if more than 60 entries are displayed in the chart, no values will be
// drawn
chart.setMaxVisibleValueCount(60);
// scaling can now only be done on x- and y-axis separately
chart.setPinchZoom(false);
chart.setDrawGridBackground(false);
// chart.setDrawYLabels(false);
IAxisValueFormatter xAxisFormatter = new DayAxisValueFormatter(chart);
XAxis xAxis = chart.getXAxis();
xAxis.setPosition(XAxisPosition.BOTTOM);
xAxis.setTypeface(tfLight);
xAxis.setDrawGridLines(false);
xAxis.setGranularity(1f); // only intervals of 1 day
xAxis.setLabelCount(7);
xAxis.setValueFormatter(xAxisFormatter);
IAxisValueFormatter custom = new MyAxisValueFormatter();
YAxis leftAxis = chart.getAxisLeft();
leftAxis.setTypeface(tfLight);
leftAxis.setLabelCount(8, false);
leftAxis.setValueFormatter(custom);
leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);
leftAxis.setSpaceTop(15f);
leftAxis.setAxisMinimum(0f); // this replaces setStartAtZero(true)
YAxis rightAxis = chart.getAxisRight();
rightAxis.setDrawGridLines(false);
rightAxis.setTypeface(tfLight);
rightAxis.setLabelCount(8, false);
rightAxis.setValueFormatter(custom);
rightAxis.setSpaceTop(15f);
rightAxis.setAxisMinimum(0f); // this replaces setStartAtZero(true)
Legend l = chart.getLegend();
l.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
l.setOrientation(Legend.LegendOrientation.HORIZONTAL);
l.setDrawInside(false);
l.setForm(LegendForm.SQUARE);
l.setFormSize(9f);
l.setTextSize(11f);
l.setXEntrySpace(4f);
XYMarkerView mv = new XYMarkerView(this, xAxisFormatter);
mv.setChartView(chart); // For bounds control
chart.setMarker(mv); // Set the marker to the chart
// setting data
seekBarY.setProgress(50);
seekBarX.setProgress(12);
// chart.setDrawLegend(false);
}
private void setData(int count, float range) {
float start = 1f;
ArrayList<BarEntry> values = new ArrayList<>();
for (int i = (int) start; i < start + count; i++) {
float val = (float) (Math.random() * (range + 1));
if (Math.random() * 100 < 25) {
values.add(new BarEntry(i, val, getResources().getDrawable(R.drawable.star)));
} else {
values.add(new BarEntry(i, val));
}
}
BarDataSet set1;
if (chart.getData() != null &&
chart.getData().getDataSetCount() > 0) {
set1 = (BarDataSet) chart.getData().getDataSetByIndex(0);
set1.setValues(values);
chart.getData().notifyDataChanged();
chart.notifyDataSetChanged();
} else {
set1 = new BarDataSet(values, "The year 2017");
set1.setDrawIcons(false);
int startColor1 = ContextCompat.getColor(this, android.R.color.holo_orange_light);
int startColor2 = ContextCompat.getColor(this, android.R.color.holo_blue_light);
int startColor3 = ContextCompat.getColor(this, android.R.color.holo_orange_light);
int startColor4 = ContextCompat.getColor(this, android.R.color.holo_green_light);
int startColor5 = ContextCompat.getColor(this, android.R.color.holo_red_light);
int endColor1 = ContextCompat.getColor(this, android.R.color.holo_blue_dark);
int endColor2 = ContextCompat.getColor(this, android.R.color.holo_purple);
int endColor3 = ContextCompat.getColor(this, android.R.color.holo_green_dark);
int endColor4 = ContextCompat.getColor(this, android.R.color.holo_red_dark);
int endColor5 = ContextCompat.getColor(this, android.R.color.holo_orange_dark);
List<Fill> gradientFills = new ArrayList<>();
gradientFills.add(new Fill(startColor1, endColor1));
gradientFills.add(new Fill(startColor2, endColor2));
gradientFills.add(new Fill(startColor3, endColor3));
gradientFills.add(new Fill(startColor4, endColor4));
gradientFills.add(new Fill(startColor5, endColor5));
set1.setFills(gradientFills);
ArrayList<IBarDataSet> dataSets = new ArrayList<>();
dataSets.add(set1);
BarData data = new BarData(dataSets);
data.setValueTextSize(10f);
data.setValueTypeface(tfLight);
data.setBarWidth(0.9f);
chart.setData(data);
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.bar, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.viewGithub: {
Intent i = new Intent(Intent.ACTION_VIEW);
i.setData(Uri.parse("https://github.com/PhilJay/MPAndroidChart/blob/master/MPChartExample/src/com/xxmassdeveloper/mpchartexample/BarChartActivity.java"));
startActivity(i);
break;
}
case R.id.actionToggleValues: {
for (IDataSet set : chart.getData().getDataSets())
set.setDrawValues(!set.isDrawValuesEnabled());
chart.invalidate();
break;
}
case R.id.actionToggleIcons: {
for (IDataSet set : chart.getData().getDataSets())
set.setDrawIcons(!set.isDrawIconsEnabled());
chart.invalidate();
break;
}
case R.id.actionToggleHighlight: {
if (chart.getData() != null) {
chart.getData().setHighlightEnabled(!chart.getData().isHighlightEnabled());
chart.invalidate();
}
break;
}
case R.id.actionTogglePinch: {
if (chart.isPinchZoomEnabled())
chart.setPinchZoom(false);
else
chart.setPinchZoom(true);
chart.invalidate();
break;
}
case R.id.actionToggleAutoScaleMinMax: {
chart.setAutoScaleMinMaxEnabled(!chart.isAutoScaleMinMaxEnabled());
chart.notifyDataSetChanged();
break;
}
case R.id.actionToggleBarBorders: {
for (IBarDataSet set : chart.getData().getDataSets())
((BarDataSet) set).setBarBorderWidth(set.getBarBorderWidth() == 1.f ? 0.f : 1.f);
chart.invalidate();
break;
}
case R.id.animateX: {
chart.animateX(2000);
break;
}
case R.id.animateY: {
chart.animateY(2000);
break;
}
case R.id.animateXY: {
chart.animateXY(2000, 2000);
break;
}
case R.id.actionSave: {
if (ContextCompat.checkSelfPermission(this, Manifest.permission.WRITE_EXTERNAL_STORAGE) == PackageManager.PERMISSION_GRANTED) {
saveToGallery();
} else {
requestStoragePermission(chart);
}
break;
}
}
return true;
}
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
tvX.setText(String.valueOf(seekBarX.getProgress()));
tvY.setText(String.valueOf(seekBarY.getProgress()));
setData(seekBarX.getProgress(), seekBarY.getProgress());
chart.invalidate();
}
@Override
protected void saveToGallery() {
saveToGallery(chart, "BarChartActivity");
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {}
private final RectF onValueSelectedRectF = new RectF();
@Override
public void onValueSelected(Entry e, Highlight h) {
if (e == null)
return;
RectF bounds = onValueSelectedRectF;
chart.getBarBounds((BarEntry) e, bounds);
MPPointF position = chart.getPosition(e, AxisDependency.LEFT);
Log.i("bounds", bounds.toString());
Log.i("position", position.toString());
Log.i("x-index",
"low: " + chart.getLowestVisibleX() + ", high: "
+ chart.getHighestVisibleX());
MPPointF.recycleInstance(position);
}
@Override
public void onNothingSelected() { }
}
There are dozens of such examples in the download link provided below.
Reference
Download or Read more from the below links:
Number | Link |
---|---|
1. | Download Example |
2. | Read more |
(b). AndroidCharts
An easy-to-use Android charts library with animation.
Step 1: Install it
In your app/build.gradle
add the following implementation statement and sync:
implementation 'im.dacer:AndroidCharts:1.0.4'
Step 2: Add to Layout
Add to layout as follows:
Line Graph Example
<HorizontalScrollView>
<view
android:layout_width="wrap_content"
android:layout_height="300dp"
class="im.dacer.androidcharts.LineView"
android:id="@+id/line_view" />
</HorizontalScrollView>
BarChart Example
<HorizontalScrollView>
<view
android:layout_width="wrap_content"
android:layout_height="300dp"
class="im.dacer.androidcharts.BarView"
android:id="@+id/bar_view" />
</HorizontalScrollView>
Pie Chart
On this view we will draw a pie chart:
<view
android:layout_width="300dp"
android:layout_height="wrap_content"
class="im.dacer.androidcharts.PieView"
android:id="@+id/pie_view" />
Step 3: Write Code
Reference the chart view and attach data to it:
Line Graph Example
LineView lineView = (LineView)findViewById(R.id.line_view);
lineView.setDrawDotLine(false); //optional
lineView.setShowPopup(LineView.SHOW_POPUPS_MAXMIN_ONLY); //optional
lineView.setBottomTextList(strList);
lineView.setColorArray(new int[]{Color.BLACK,Color.GREEN,Color.GRAY,Color.CYAN});
lineView.setDataList(dataLists); //or lineView.setFloatDataList(floatDataLists)
BarChart Example
Here is how you draw the BarChart:
BarView barView = (BarView)findViewById(R.id.bar_view);\
barView.setBottomTextList(strList);
barView.setDataList(dataList,100);
Pie Chart
Here is how you draw the PirChart
PieView pieView = (PieView)findViewById(R.id.pie_view);
ArrayList<PieHelper> pieHelperArrayList = new ArrayList<PieHelper>();
pieView.setDate(pieHelperArrayList);
pieView.selectedPie(2); //optional
pieView.setOnPieClickListener(listener) //optional
pieView.showPercentLabel(false); //optional
Full Example
BarFragment
Here is an example of a Fragment that renders BarChart:
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import im.dacer.androidcharts.BarView;
import java.util.ArrayList;
/**
* Created by Dacer on 11/15/13.
*/
public class BarFragment extends Fragment {
@Override public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_bar, container, false);
final BarView barView = (BarView) rootView.findViewById(R.id.bar_view);
Button button = (Button) rootView.findViewById(R.id.bar_button);
button.setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View view) {
randomSet(barView);
}
});
randomSet(barView);
return rootView;
}
private void randomSet(BarView barView) {
int random = (int) (Math.random() * 20) + 6;
ArrayList<String> test = new ArrayList<String>();
for (int i = 0; i < random; i++) {
test.add("test");
test.add("pqg");
// test.add(String.valueOf(i+1));
}
barView.setBottomTextList(test);
ArrayList<Integer> barDataList = new ArrayList<Integer>();
for (int i = 0; i < random * 2; i++) {
barDataList.add((int) (Math.random() * 100));
}
barView.setDataList(barDataList, 100);
}
}
Find more examples here.
Reference
Below are the reference links:
Number | Link |
---|---|
1. | Download Example |
2. | Read more |
(c). HelloCharts
Charts/graphs library for Android compatible with API 8+, several chart types with support for scaling, scrolling and animations
Note that it Works best when hardware acceleration is available, so API 14+(Android 4.0) is recommended. Apache License 2.0.
Here are it’s core features:
- Line chart(cubic lines, filled lines, scattered points)
- Column chart(grouped, stacked, negative values)
- Pie chart
- Bubble chart
- Combo chart(columns/lines)
- Preview charts(for column chart and line chart)
- Zoom(pinch to zoom, double tap zoom), scroll and fling
- Custom and auto-generated axes(top, bottom, left, right, inside)
- Animations
Step 1: Install it
Their two repositories from which you can install this library:
MavenCentral
implementation 'com.github.lecho:hellocharts-library:[email protected]'
Jitpack
From Jitpack start by registering jitpack as a maven repository:
repositories {
maven {
url "https://jitpack.io"
}
}
Then add the dependency:
dependencies {
implementaion 'com.github.lecho:hellocharts-android:v1.5.8'
}
Eclipse
- Download the latest release jar file.
- Copy
hellocharts-library-<version>.jar
into thelibs
folder of your application project.
Step 2: Add to Layout
Add the appropriate HelloCharts to your layout, for example for a LineChart:
<lecho.lib.hellocharts.view.LineChartView
android:id="@+id/chart"
android:layout_width="match_parent"
android:layout_height="match_parent" />
Step 3: Write Code
You can reference the Chart or create it programmatically:
LineChartView chart = new LineChartView(context);
layout.addView(chart);
Then control Chart behaviour:
Chart.setInteractive(boolean isInteractive);
Chart.setZoomType(ZoomType zoomType);
Chart.setContainerScrollEnabled(boolean isEnabled, ContainerScrollType type);
Then use Data model methods to control how the chart looks like:
ChartData.setAxisXBottom(Axis axisX);
ColumnChartData.setStacked(boolean isStacked);
Line.setStrokeWidth(int strokeWidthDp);
Set Chart data and model depending on the type of Chart used:
List<PointValue> values = new ArrayList<PointValue>();
values.add(new PointValue(0, 2));
values.add(new PointValue(1, 4));
values.add(new PointValue(2, 3));
values.add(new PointValue(3, 4));
//In most cased you can call data model methods in builder-pattern-like manner.
Line line = new Line(values).setColor(Color.BLUE).setCubic(true);
List<Line> lines = new ArrayList<Line>();
lines.add(line);
LineChartData data = new LineChartData();
data.setLines(lines);
LineChartView chart = new LineChartView(context);
chart.setLineChartData(data);
Example
Here is an example of PieChart:
PieChartActivity.java
public class PieChartActivity extends ActionBarActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_pie_chart);
if (savedInstanceState == null) {
getSupportFragmentManager().beginTransaction().add(R.id.container, new PlaceholderFragment()).commit();
}
}
/**
* A fragment containing a pie chart.
*/
public static class PlaceholderFragment extends Fragment {
private PieChartView chart;
private PieChartData data;
private boolean hasLabels = false;
private boolean hasLabelsOutside = false;
private boolean hasCenterCircle = false;
private boolean hasCenterText1 = false;
private boolean hasCenterText2 = false;
private boolean isExploded = false;
private boolean hasLabelForSelected = false;
public PlaceholderFragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
setHasOptionsMenu(true);
View rootView = inflater.inflate(R.layout.fragment_pie_chart, container, false);
chart = (PieChartView) rootView.findViewById(R.id.chart);
chart.setOnValueTouchListener(new ValueTouchListener());
generateData();
return rootView;
}
// MENU
@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
inflater.inflate(R.menu.pie_chart, menu);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_reset) {
reset();
generateData();
return true;
}
if (id == R.id.action_explode) {
explodeChart();
return true;
}
if (id == R.id.action_center_circle) {
hasCenterCircle = !hasCenterCircle;
if (!hasCenterCircle) {
hasCenterText1 = false;
hasCenterText2 = false;
}
generateData();
return true;
}
if (id == R.id.action_center_text1) {
hasCenterText1 = !hasCenterText1;
if (hasCenterText1) {
hasCenterCircle = true;
}
hasCenterText2 = false;
generateData();
return true;
}
if (id == R.id.action_center_text2) {
hasCenterText2 = !hasCenterText2;
if (hasCenterText2) {
hasCenterText1 = true;// text 2 need text 1 to by also drawn.
hasCenterCircle = true;
}
generateData();
return true;
}
if (id == R.id.action_toggle_labels) {
toggleLabels();
return true;
}
if (id == R.id.action_toggle_labels_outside) {
toggleLabelsOutside();
return true;
}
if (id == R.id.action_animate) {
prepareDataAnimation();
chart.startDataAnimation();
return true;
}
if (id == R.id.action_toggle_selection_mode) {
toggleLabelForSelected();
Toast.makeText(getActivity(),
"Selection mode set to " + chart.isValueSelectionEnabled() + " select any point.",
Toast.LENGTH_SHORT).show();
return true;
}
return super.onOptionsItemSelected(item);
}
private void reset() {
chart.setCircleFillRatio(1.0f);
hasLabels = false;
hasLabelsOutside = false;
hasCenterCircle = false;
hasCenterText1 = false;
hasCenterText2 = false;
isExploded = false;
hasLabelForSelected = false;
}
private void generateData() {
int numValues = 6;
List<SliceValue> values = new ArrayList<SliceValue>();
for (int i = 0; i < numValues; ++i) {
SliceValue sliceValue = new SliceValue((float) Math.random() * 30 + 15, ChartUtils.pickColor());
values.add(sliceValue);
}
data = new PieChartData(values);
data.setHasLabels(hasLabels);
data.setHasLabelsOnlyForSelected(hasLabelForSelected);
data.setHasLabelsOutside(hasLabelsOutside);
data.setHasCenterCircle(hasCenterCircle);
if (isExploded) {
data.setSlicesSpacing(24);
}
if (hasCenterText1) {
data.setCenterText1("Hello!");
// Get roboto-italic font.
Typeface tf = Typeface.createFromAsset(getActivity().getAssets(), "Roboto-Italic.ttf");
data.setCenterText1Typeface(tf);
// Get font size from dimens.xml and convert it to sp(library uses sp values).
data.setCenterText1FontSize(ChartUtils.px2sp(getResources().getDisplayMetrics().scaledDensity,
(int) getResources().getDimension(R.dimen.pie_chart_text1_size)));
}
if (hasCenterText2) {
data.setCenterText2("Charts (Roboto Italic)");
Typeface tf = Typeface.createFromAsset(getActivity().getAssets(), "Roboto-Italic.ttf");
data.setCenterText2Typeface(tf);
data.setCenterText2FontSize(ChartUtils.px2sp(getResources().getDisplayMetrics().scaledDensity,
(int) getResources().getDimension(R.dimen.pie_chart_text2_size)));
}
chart.setPieChartData(data);
}
private void explodeChart() {
isExploded = !isExploded;
generateData();
}
private void toggleLabelsOutside() {
// has labels have to be true:P
hasLabelsOutside = !hasLabelsOutside;
if (hasLabelsOutside) {
hasLabels = true;
hasLabelForSelected = false;
chart.setValueSelectionEnabled(hasLabelForSelected);
}
if (hasLabelsOutside) {
chart.setCircleFillRatio(0.7f);
} else {
chart.setCircleFillRatio(1.0f);
}
generateData();
}
private void toggleLabels() {
hasLabels = !hasLabels;
if (hasLabels) {
hasLabelForSelected = false;
chart.setValueSelectionEnabled(hasLabelForSelected);
if (hasLabelsOutside) {
chart.setCircleFillRatio(0.7f);
} else {
chart.setCircleFillRatio(1.0f);
}
}
generateData();
}
private void toggleLabelForSelected() {
hasLabelForSelected = !hasLabelForSelected;
chart.setValueSelectionEnabled(hasLabelForSelected);
if (hasLabelForSelected) {
hasLabels = false;
hasLabelsOutside = false;
if (hasLabelsOutside) {
chart.setCircleFillRatio(0.7f);
} else {
chart.setCircleFillRatio(1.0f);
}
}
generateData();
}
/**
* To animate values you have to change targets values and then call {@link Chart#startDataAnimation()}
* method(don't confuse with View.animate()).
*/
private void prepareDataAnimation() {
for (SliceValue value : data.getValues()) {
value.setTarget((float) Math.random() * 30 + 15);
}
}
private class ValueTouchListener implements PieChartOnValueSelectListener {
@Override
public void onValueSelected(int arcIndex, SliceValue value) {
Toast.makeText(getActivity(), "Selected: " + value, Toast.LENGTH_SHORT).show();
}
@Override
public void onValueDeselected() {
// TODO Auto-generated method stub
}
}
}
}
You can find full example code here
Reference
Find the download link below:
Number | Link |
---|---|
1. | Download Example |
2. | Read more |
3. | Follow library author |