Hello Fellas, We all know andorid till date don’t provide any graph view. That’s is why we are here.
There are many library available by various contributor all over the world. Some reputated one’s are:
ii. http://www.android-graphview.org/
iii. aChartEngine
This blog is based on MPAndroidChart library. Here are the steps to create a simple graph (a curved or line graph).
Step1. Add dependency in module level gradle aka build.gradle
|
1 2 3 4 5 6 7 8 9 10 |
repositories { maven { url "https://jitpack.io" } } dependencies { //format for including lib jar files for all flavors compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.github.PhilJay:MPAndroidChart:v2.2.3' } |
Step2. Add custom type of Chart provided by library.
|
1 2 3 4 |
<com.github.mikephil.charting.charts.LineChart android:id="@+id/chart1" android:layout_width="match_parent" android:layout_height="match_parent" /> |
note: we are using LineChart for the same of simplicity.
Step3. Configure your Chart View that was defined in step 2.
MPAndroidChart provide getter setter for the basic view as well changes that we want to reflect in graph view.
Here is our sample configuration.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
mChart.setViewPortOffsets(0, 20, 0, 0); mChart.setBackgroundColor(Color.rgb(255, 255, 255)); // description text // initializing chart mChart = (LineChart) view.findViewById(R.id.chart1); //adding description mChart.setDescription("Traffic Data"); // enable touch gestures mChart.setTouchEnabled(true); // enable scaling and dragging mChart.setDragEnabled(true); mChart.setScaleEnabled(true); // if disabled, scaling can be done on x- and y-axis separately mChart.setPinchZoom(false); // to draw any grid mChart.setDrawGridBackground(true); // to draw X-axis for our graph XAxis xAxis = holder.mChart.getXAxis(); xAxis.setEnabled(true); // setting position to TOP and INSIDE the chart xAxis.setPosition(XAxis.XAxisPosition.TOP_INSIDE); // setting text size for our axis label xAxis.setTextSize(10f); xAxis.setTextColor(Color.BLACK); // to draw axis line xAxis.setDrawAxisLine(true); xAxis.setDrawGridLines(false); YAxis yAxis = holder.mChart.getAxisLeft(); // yAxis.setTypeface(tf); // setting the count of Y-axis label's yAxis.setLabelCount(12, false); yAxis.setTextColor(Color.BLACK); yAxis.setPosition(YAxis.YAxisLabelPosition.INSIDE_CHART); yAxis.setDrawGridLines(true); yAxissetAxisLineColor(Color.BLACK); holder.mChart.getAxisRight().setEnabled(false); // add data // note: create data is custom method holder.mChart.setData(createData(10)); holder.mChart.getLegend().setEnabled(false); // adding some animation that is some good part holder.mChart.animateXY(2000, 2000); // dont forget to refresh the drawing holder.mChart.invalidate(); |
Some cooked code for createData(count)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
private LineData setData(int count) { // adding months in X-axis ArrayList<String> xVals = new ArrayList<String>(); xVals.add("January"); xVals.add("February"); xVals.add("March"); xVals.add("April"); xVals.add("May"); xVals.add("June"); xVals.add("July"); xVals.add("August"); xVals.add("September"); xVals.add("October"); xVals.add("November"); xVals.add("December"); ArrayList<Entry> vals1 = new ArrayList<Entry>(); // Sample data in trafficDataJSON: //{"1":0,"2":0,"3":11,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0} // Adding data values for Y-Axis for (int i = 1; i <= count; i++) { try { vals1.add(new Entry(trafficDataJSON.getInt("" + i), i)); } catch (JSONException e) { e.printStackTrace(); } } // create a dataset and give it a type LineDataSet set1 = new LineDataSet(vals1, "DataSet 1"); set1.setDrawCubic(true); set1.setCubicIntensity(0.2f); //set1.setDrawFilled(true); set1.setDrawCircles(false); set1.setLineWidth(1.8f); set1.setCircleRadius(4f); set1.setCircleColor(Color.BLACK); set1.setHighLightColor(Color.rgb(244, 117, 117)); set1.setColor(Color.BLACK); set1.setFillColor(Color.BLACK); set1.setFillAlpha(100); set1.setDrawHorizontalHighlightIndicator(false); set1.setFillFormatter(new FillFormatter() { @Override public float getFillLinePosition(ILineDataSet dataSet, LineDataProvider dataProvider) { return -10; } }); // create a data object with the datasets LineData data = new LineData(xVals, set1); // data.setValueTypeface(tf); data.setValueTextSize(9f); data.setDrawValues(false); return data; } |
Here is our sample creation :
That’s all folks. Stay Updated.