How To Create Graphs In Android Application?

1
Welcome to Loginworks Softwares
2
How To Create Graphs In Android Application?
3
Hello readers, I have come up with a new
energizing topic called how to create graphs in
the Android application. Here, I will direct you
to make the graphs on Android so we should begin
the work.
The graphs will make simpler to visually
illustrate the relationships in the data and make
to take the decisions easy based on that.

When we develop the apps like business apps,
Fitness apps, Marketing apps or Bank apps one of
the common UI components that we need to use is
graph or chart.We have distinctive kinds of
Graphs and some of them are present here.

1. Line graph

2. Pie chart

3. Bar graph

4. Histogram

5. Scatter plot and etc.
4
Create A Project

To execute the graphs in the Android application.
Initially, we have to make a Project.

1. Open Android Studio on your pc.

2. Go to File menu-gtNew-gtNew Project

3. Set application name as GraphsDemo.

4. Company domain Your package name.

5. Then click on Next button.

6. We are using the minimum SDK as Android 4.4
(KitKat).

7. Again tap on the Next button.

8. Pick the Activity type as Empty Activity,
afterward click on Next button.
5
Add A Library

1. Here, we have to add the graphview library to
our project to create the graphs in our
application.

2. Open the app-level build.gradle file in your
project and the following dependency.

dependencies
compile 'com.jjoe64graphview4.2.1'

3. Likewise, include the following in the
project-level build.gradle file.

maven

url "https//jitpack.io"


6
AndroidManifest.Xml

Here the final look of AndroidManifest file.

lt?xml version"1.0" encoding"utf-8"?gt

ltmanifest xmlnsandroid"http//schemas.android.co
m/apk/res/android"
package"com.loginworks.graphsdemo"gt

ltapplication

androidallowBackup"true"

androidicon"_at_mipmap/ic_launcher"

androidlabel"_at_string/app_name"
androidroundIcon"_at_mipmap/ic_launcher_round"


androidsupportsRtl"true"
7
Line Graph

1. A line Graph is also called a line outline,
here the data points are plotted and connected by
a line in dot-to-dot design.

2. To display the line chart in the Android
application we need to use the underneath
elements in the layout file.

ltcom.jjoe64.graphview.GraphView

androidlayout_width"match_parent"

androidlayout_height"200dip"

androidid"_at_id/line_graph"/gt
8
3. Next, initialize the line graph in your class
by utilizing the following code.

GraphView linegraph (GraphView)
findViewById(R.id.line_graph)

4. Set the data in the graph by using DataPoint.

LineGraphSeriesltDataPointgt lineSeries new
LineGraphSeriesltgt(new DataPoint

new DataPoint(0, 1),

new DataPoint(1, 5),

new DataPoint(2, 3),

new DataPoint(3, 2),

new DataPoint(4, 6)

)
9
5. For tweaking the Line Graph style view follow
these steps.

a) Color setColor() method is used to indicate
the color of the line.

series.setColor(Color.GREEN)

b) Title Allowed for changing the title of the
graph using setTitle().

series.setTitle(Line Chart)

c) Thickness To make the changes in the density
of the line by using setThickness() method.

series.setThickness(8)

d) Data Point Radius To set the radius of the
data point using setDataPointRadius() method.

series.setDataPointRadius(10)
10
6. Here the complete picture of Line Graph.

• Bar Graph
• 1. The Bar Graph is a graphical show of
  information with rectangular bars of various
  statures or lengths related to the values that
  they represent.
• 2. Include the below lines of code in Layout file
  to represent the Bar Graph in Android
  Application.

11
ltcom.jjoe64.graphview.GraphView

androidlayout_width"match_parent"

androidlayout_height"200dip"

androidid"_at_id/bar_graph" /gt

3. Initialize the Bar Graph in the activity
class.

GraphView bar_Graph (GraphView)
findViewById(R.id.bar_graph)

4. Setting data to the Bar Graph.

BarGraphSeriesltDatagt barGraph_Data new
BarGraphSeriesltgt(new Data

new Data(0, 1),

new Data(1, 5),
12
5. setValueDependentColor() is used to define the
color of the bars in reliance of the y-value.

barGraph_Data.setValueDependentColor(new
ValueDependentColorltDatagt()

_at_Override

public int get(Data info)

return Color.rgb((int) info.getX()255/4,
(int) Math.abs(info.getY()255/6), 100)


)

6. To change the spacing between two bars we
utilize the setSpacing() method.
barGraph_Data.setSpacing(20)

7. To draw the values of the highest point of the
bar and set the color of the values.

barGraph_Data.setDrawValuesOnTop(true)
13
8. Finally, the result of the designed Bar Graph
is below.

• Points Graph
• 1. The Points Graph is used to display the data
  in the form of points.
• 2. Add the following to the Layout file to
  display the view of Points Graph.
• ltcom.jjoe64.graphview.GraphView
• androidlayout_width"match_parent"
• androidlayout_height "200dip"
• androidid"_at_id/points_graph" /gt

14
3. Initialize the Points Graph in MainActivity
class.

GraphView points_Graph (GraphView)
findViewById(R.id.points_graph)

4. Next, set the data in Points Graph.

PointsGraphSeriesltDataPointgt pointsGraph_Data
new PointsGraphSeriesltgt(new DataPoint

new DataPoint(0, -2),

new DataPoint(1, 5),f

new DataPoint(2, 3),

new DataPoint(3, 2),

new DataPoint(4, 6)

)
15
5. To change the shape of the point from hover
shape to rectangle use the below code.

• pointsGraph_Data.setShape(PointsGraphSeries.Shape.
  RECTANGLE)
• 6. To change the color of the point using
  setColor() method.
• pointsGraphData.setColor(Color.YELLOW)
• 7. The example design of Points Graph as shown
  here.

16
Pie Graph

1. To build a Pie graph we are using another
library called as a MpAndroidChart library.

2. Add the library to a build.gradle file to use
the library features.

dependencies

compile ' com.github.PhilJayMPAndroidChartv2.0
.9'



3. It is also a type of graph in which the circle
is divided into a number of sectors.

4. Add the below element in Layout file to create
the Pie Chart in the application.

lt com.github.mikephil.charting.charts.PieChart

androidid"_at_id/pie_chart"
17
5. we need to initialize the pie chart.

PieChart pie_Chart (PieChart)
findViewById(R.id.pie_chart)

6. Define the x-axis values in the pie chart.

ArrayListltStringgt xaxisValues new
ArrayListltStringgt()

xaxisValuess.add("January")

xaxisValues.add("February")

xaxisValues.add("March")

xaxisValues.add("April")

xaxisValues.add("May")

xaxisValues.add("June")
18
7. To set the y-axis data in the pie chart, we
need to create the DataSet as follows.

ArrayListltEntrygt yaxisvalues new
ArrayListltEntrygt()

yaxisvalues.add(new Entry(8f, 0))

yaxisvalues.add(new Entry(15f, 1))

yaxisvalues.add(new Entry(12f, 2))

yaxisvalues.add(new Entry(25f, 3))

yaxisvalues.add(new Entry(23f, 4))

yaxisvalues.add(new Entry(17f, 5))

pie_Chart.setUsePercentValues(true)

PieDataSet pieData new PieDataSet(yaxisvalues,
"Pie Chart")
19
10. Here the library MpAndroidChart gives the
predefined color templates.

pieData.setColors(ColorTemplate.COLORFUL_COLORS)

11. To make the changes of size and color of the
text, Use the following code.

data.setValueTextSize(13f)

data.setValueTextColor(Color.DKGRAY)

12. we have also the option of enabling or
disabling the hole in the middle of a pie chart
and to control the radius of the hole.

13. If we disable the hole by setting
pie_Chart.setDrawHoleEnabled(false) method. We
get the following visual.
20
14. The following image is the pie graph with the
hole is enabled in the center.

• pie_Chart.setDrawHoleEnabled(true)
• pie_Chart.setHoleRadius(30f)

• pie_Chart.setTransparentCircleRadius(30f)

21
Animate The Graph View
we can also animate the graph view by using the
method animateXY() which will animate from both
the axis of the chart or if we want to animate
only one of the axis then use animateX() or
animateY() method and specify the duration (in
milliseconds) of the animation as a parameter.

pie_Chart.animateXY(1500, 1500)

or

pie_Chart.animateX(1000)

or

pie_Chart.animateY(1000)

Summing Up

Finally, we finished the task of creating
distinctive types of graphs in Android
Application. Hope, this blog will be helpful for
you while creating graphs in your Android
applications. If you have any suggestions or
queries, please feel free to post your queries
below in the comments section. Thanks
22

Thank You For Watching
Connect With This
For More Inf https//www.loginwor
ks.com/blogs/ Call Us
1-434-608-0184