Android Bar Graph using GraphView Library Tutorial

Udemy Generic 728x90

Objective

In this tutorial we learn how to implement Bar graph using Graphview library in your android application.

  


  
15

  

A Graph is a diagram representing a system of connections or interrelations among two or more things by a number of distinctive dots, lines, bars etc.

This tutorial explains two dimensional drawing showing the relationship between two sets of series of bar. Graph will have an independent variable represented on the horizontal line (X-axis) and a dependent variable represented on the vertical line (Y-axis). The perpendicular axis intersect at a point called Origin, and are calibrated in the units of quantities represented. A graph usually has four quadrants representing the positive and negative value of a variable.

We can represent graph in the various form. Here we will explain about Bar Graph

  • Bar Graph is a type of graph that presents grouped data with rectangular bar with length proportional to values that they represent.

 

Step 2

Download GraphView Library

We will use a GraphView.jar file to create Bar graph. This jar file defines the various type of chart through the series class. We will use the GraphView and add the BarGraphSeries subclasses.

Download GraphView-4.01.jar

Step 3

Creating a Bar Graph

 

Step 3.1

Creating a new project

Create a new Project in android Studio goto File ⇒ New ⇒ New Projects.

Step 3.2

Add Library file

Download .jar file and paste into the libs folder of your project.

Step 3.3

Add Library files into dependencies

To compile the jar file in your project. Add the .jar file into dependencies of your project.

<br />
dependencies {<br />
    compile fileTree(dir: 'libs', include: ['*.jar'])<br />
    testCompile 'junit:junit:4.12'<br />
    compile 'com.android.support:appcompat-v7:23.1.1'<br />
    compile files('libs/GraphView-4.0.1.jar')</p>
<p>}<br />

 

Step 3.4

Making Layout

We need a graph view to represent the Bar graph. We will make a graph view by using com.jjoe64.graphview.GraphView tag.Use the following code in your activity_main.xml file.

<br />
&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;<br />
&lt;RelativeLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;<br />
    xmlns:tools=&quot;http://schemas.android.com/tools&quot;<br />
    android:layout_width=&quot;match_parent&quot;<br />
    android:layout_height=&quot;match_parent&quot;<br />
    android:paddingBottom=&quot;@dimen/activity_vertical_margin&quot;<br />
    android:paddingLeft=&quot;@dimen/activity_horizontal_margin&quot;<br />
    android:paddingRight=&quot;@dimen/activity_horizontal_margin&quot;<br />
    android:paddingTop=&quot;@dimen/activity_vertical_margin&quot;<br />
    tools:context=&quot;app.num.graphview.MainActivity&quot;&gt;</p>
<p>    &lt;TextView<br />
        android:id=&quot;@+id/bartext&quot;<br />
        android:layout_width=&quot;wrap_content&quot;<br />
        android:layout_height=&quot;wrap_content&quot;<br />
        android:text=&quot;Bar Graph&quot;<br />
        android:textSize=&quot;16dp&quot;<br />
        android:layout_marginBottom=&quot;20dp&quot;/&gt;</p>
<p>    &lt;com.jjoe64.graphview.GraphView<br />
        android:layout_width=&quot;match_parent&quot;<br />
        android:layout_height=&quot;200dip&quot;<br />
        android:title=&quot;Graph Title&quot;<br />
        android:id=&quot;@+id/graph&quot;<br />
        android:layout_below=&quot;@+id/bartext&quot;/&gt;</p>
<p>&lt;/RelativeLayout&gt;</p>
<p>

  

Step 3.5

To plot Bar Graph

To plot a Bar diagram with graphView we have to use the class BarGraphSeries. The bar graph has its origin at zero. If y-axis value is negative then bar graph will be inverted.

<br />
 GraphView bar_graph = (GraphView) findViewById(R.id.graph);<br />
        BarGraphSeries&lt;DataPoint&gt; bar_series = new BarGraphSeries&lt;DataPoint&gt;(new DataPoint[] {<br />
                new DataPoint(0, -2),<br />
                new DataPoint(1, 7),<br />
                new DataPoint(2, 4),<br />
                new DataPoint(3, 5),<br />
                new DataPoint(5, 2),<br />
                new DataPoint(4, 8)<br />
        });<br />
        bar_graph.addSeries(bar_series);<br />
        // tap listener<br />
        bar_series.setOnDataPointTapListener(new OnDataPointTapListener() {<br />
            @Override<br />
            public void onTap(Series series, DataPointInterface dataPoint) {<br />
                Toast.makeText(MainActivity.this, &quot;Series: On Data Point clicked: &quot; + dataPoint, Toast.LENGTH_SHORT).show();<br />
            }<br />
        });<br />

 

11

 

Step 3.5.1

BarGraphSeries has some special features for styling

 

Step 3.5.1.1
Value dependent color

We can define the color of bar in the dependence of y-values via .setValueDependentColor().

</p>
<p>       GraphView bar_graph = (GraphView) findViewById(R.id.graph);<br />
        BarGraphSeries&lt;DataPoint&gt; bar_series = new BarGraphSeries&lt;DataPoint&gt;(new DataPoint[] {<br />
                new DataPoint(0, -2),<br />
                new DataPoint(1, 7),<br />
                new DataPoint(2, 4),<br />
                new DataPoint(3, 5),<br />
                new DataPoint(5, 2),<br />
                new DataPoint(4, 8)<br />
        });<br />
        bar_graph.addSeries(bar_series);</p>
<p>        // set the color of bar<br />
        bar_series.setValueDependentColor(new ValueDependentColor&lt;DataPoint&gt;() {<br />
            @Override<br />
            public int get(DataPoint data) {<br />
                return Color.rgb((int) data.getX() * 255 / 4, (int) Math.abs(data.getY() * 255 / 6), 100);<br />
            }<br />
        });<br />
        // tap listener<br />
        bar_series.setOnDataPointTapListener(new OnDataPointTapListener() {<br />
            @Override<br />
            public void onTap(Series series, DataPointInterface dataPoint) {<br />
                Toast.makeText(MainActivity.this, &quot;Series: On Data Point clicked: &quot; + dataPoint, Toast.LENGTH_SHORT).show();<br />
            }<br />
        });<br />

 

12

 

Step 3.5.1.2
Spacing

We can define spacing between bar in percentage via .setSpacing();

<br />
GraphView bar_graph = (GraphView) findViewById(R.id.graph);<br />
        BarGraphSeries&lt;DataPoint&gt; bar_series = new BarGraphSeries&lt;DataPoint&gt;(new DataPoint[] {<br />
                new DataPoint(0, -2),<br />
                new DataPoint(1, 7),<br />
                new DataPoint(2, 4),<br />
                new DataPoint(3, 5),<br />
                new DataPoint(5, 2),<br />
                new DataPoint(4, 8)<br />
        });<br />
        bar_graph.addSeries(bar_series);</p>
<p>        // styling<br />
        bar_series.setValueDependentColor(new ValueDependentColor&lt;DataPoint&gt;() {<br />
            @Override<br />
            public int get(DataPoint data) {<br />
                return Color.rgb((int) data.getX() * 255 / 4, (int) Math.abs(data.getY() * 255 / 6), 100);<br />
            }<br />
        });</p>
<p>        bar_series.setSpacing(50); // set the space between bar<br />
        // tap listener<br />
        bar_series.setOnDataPointTapListener(new OnDataPointTapListener() {<br />
            @Override<br />
            public void onTap(Series series, DataPointInterface dataPoint) {<br />
                Toast.makeText(MainActivity.this, &quot;Series: On Data Point clicked: &quot; + dataPoint, Toast.LENGTH_SHORT).show();<br />
            }<br />
        });<br />

 

13

 

Step 3.5.1.3
Value on the top

 

The y-values display on the top of the bar. We can set the color and text size of the y-values. these feature can be activated via .setDrawValuesOnTop(true). We can change the color of y-values via .setValuesOnTopColor(Your color) and set the text size via .setValuesOn TopSize(your size);

<br />
 GraphView bar_graph = (GraphView) findViewById(R.id.graph);<br />
        BarGraphSeries&lt;DataPoint&gt; bar_series = new BarGraphSeries&lt;DataPoint&gt;(new DataPoint[] {<br />
                new DataPoint(0, -2),<br />
                new DataPoint(1, 7),<br />
                new DataPoint(2, 4),<br />
                new DataPoint(3, 5),<br />
                new DataPoint(5, 2),<br />
                new DataPoint(4, 8)<br />
        });<br />
        bar_graph.addSeries(bar_series);</p>
<p>        // styling<br />
        bar_series.setValueDependentColor(new ValueDependentColor&lt;DataPoint&gt;() {<br />
            @Override<br />
            public int get(DataPoint data) {<br />
                return Color.rgb((int) data.getX() * 255 / 4, (int) Math.abs(data.getY() * 255 / 6), 100);<br />
            }<br />
        });</p>
<p>        bar_series.setSpacing(50);</p>
<p>        // draw values on top<br />
        bar_series.setDrawValuesOnTop(true);<br />
        bar_series.setValuesOnTopColor(Color.RED);<br />
        bar_series.setValuesOnTopSize(40);<br />
        // tap listener<br />
        bar_series.setOnDataPointTapListener(new OnDataPointTapListener() {<br />
            @Override<br />
            public void onTap(Series series, DataPointInterface dataPoint) {<br />
                Toast.makeText(MainActivity.this, &quot;Series: On Data Point clicked: &quot; + dataPoint, Toast.LENGTH_SHORT).show();<br />
            }<br />
        });<br />

 

15

 
  
If there is any issue or need any kind of help with the numAndroidCharts library then please raise an issue at GitHub. We will try to provide a solution for that as soon as possible. https://github.com/numetriclabz/numAndroidCharts
  
If there is any issue or need any kind of help with the numAndroidCharts library then please raise an issue at GitHub. We will try to provide a solution for that as soon as possible. https://github.com/numetriclabz/numAndroidCharts
  

Udemy Generic 728x90

Spread the word. Share this post!