Android Multi-Series Area Chart (Graph) Using numAndroidCharts Library Tutorial

Udemy Generic 728x90

Objective

In this tutorial we learn the process to create Multi-Series Area Chart using numAndroidCharts Library in Android application.

 

 

Pie Chart
Area Chart
 

Area Chart or Area Graph is basically a graph, based on Line Chart which displays graphically quantifiable data. In this chart, the area between the x-axis and the line is commonly filled or emphasized with colors or textures. Its mostly used to compare two or more quantities within a given time period.

In this project, we will illustrate a sample set of data through Area Graph using numAndroidCharts.
 

Step 2

Create New Project

Open Android studio and create a new Android project, named AreaChart.
 

Step 3

Add NumAndroidCharts Library to Project

To use numAndroidCharts library in our project, we need to add the library dependency in the app’s gradle file. So, open build:gradle (Module:app) file and add the following code snippet :

<br />
repositories {<br />
    maven {<br />
        url 'https://dl.bintray.com/sj/maven/'<br />
    }<br />
}</p>
<p>dependencies {<br />
    compile 'com.numetriclabz.numandroidcharts:numandroidcharts:1.0.4'<br />
}<br />

 

Step 4

Add Chart Layout

Now, to create a Area Graph we need to add the AreaChart widget in our Layout file. This widget will automatically illustrate the data set provided by the developer into Area Graph. To add AreaChart widget, open main_activity.xml file and add the below code :

<br />
&lt;com.numetriclabz.numandroidcharts.AreaChart<br />
        android:id=&quot;@+id/linechart&quot;<br />
        android:layout_height=&quot;400dp&quot;<br />
        android:layout_width=&quot;wrap_content&quot;<br />
        android:layout_marginTop=&quot;50dp&quot; /&gt;<br />

Step 4.1

Show Data points 

We can add the data points to the Area graph. To enable data points, we need to set custom attribute show_datapoints to true. Add the below line of code in above xml tag :

<br />
custom:show_datapoints=&quot;true&quot;<br />

 

Step 5

Initialize Chart in Activity

As the final step of creating a pie chart, we need to initialize the AreaChart object in our activity and provide a data set to the library so that it can use the data to create a Area Graph.

Step 5.1

Initialize the AraeChart view 

We need to initialize the AreaChart view defined in layout xml file. To initialize, add the following code in the onCreate() method of main acitivity class.

<br />
    AreaChart areaChart = (AreaChart) findViewById(R.id.linechart);<br />

 

Step 5.2

Add the Data  

Finally, add the data to be illustrated through Area Chart. To add the data, we have to use the library’s model class. Following the sample code snippet to add the data :

<br />
    List&lt;ChartData&gt; value1 = new ArrayList&lt;&gt;();</p>
<p>        value1.add(new ChartData(4f, 0.5f)); //values.add(new ChartData(y,x));<br />
        value1.add(new ChartData(9f, 1f));<br />
        value1.add(new ChartData(18f, 2f));<br />
        value1.add(new ChartData(2f, 4f));<br />
        value1.add(new ChartData(12f, 5f));<br />
        value1.add(new ChartData(9f, 7f));</p>
<p>        List&lt;ChartData&gt; value2 = new ArrayList&lt;&gt;();</p>
<p>        value2.add(new ChartData(5f, 1f)); //values.add(new ChartData(y,x));<br />
        value2.add(new ChartData(6f, 2f));<br />
        value2.add(new ChartData(15f, 3f));<br />
        value2.add(new ChartData(2f, 5f));<br />
        value2.add(new ChartData(3f, 8f));</p>
<p>        List&lt;ChartData&gt; value3 = new ArrayList&lt;&gt;();<br />
        value3.add(new ChartData(value1));<br />
        value3.add(new ChartData(value2));<br />
        areaChart.setData(value3);</p>
<p>        List&lt;String&gt; type = new ArrayList&lt;&gt;();<br />
        type.add(&quot;Value1&quot;);<br />
        type.add(&quot;value2&quot;);<br />
        areaChart.setLegends(type);<br />

Now, compile the code and run application.

Area Chart

 
Area Chart

Here is the complete code of MainActivity Class -

<br />
public class MainActivity extends AppCompatActivity {</p>
<p>    @Override<br />
    protected void onCreate(Bundle savedInstanceState) {<br />
        super.onCreate(savedInstanceState);<br />
        setContentView(R.layout.activity_main);</p>
<p>        AreaChart areaChart = (AreaChart) findViewById(R.id.linechart);</p>
<p>        List&lt;ChartData&gt; value1 = new ArrayList&lt;&gt;();</p>
<p>        value1.add(new ChartData(4f, 0.5f)); //values.add(new ChartData(y,x));<br />
        value1.add(new ChartData(9f, 1f));<br />
        value1.add(new ChartData(18f, 2f));<br />
        value1.add(new ChartData(2f, 4f));<br />
        value1.add(new ChartData(12f, 5f));<br />
        value1.add(new ChartData(9f, 7f));</p>
<p>        List&lt;ChartData&gt; value2 = new ArrayList&lt;&gt;();</p>
<p>        value2.add(new ChartData(5f, 1f)); //values.add(new ChartData(y,x));<br />
        value2.add(new ChartData(6f, 2f));<br />
        value2.add(new ChartData(15f, 3f));<br />
        value2.add(new ChartData(2f, 5f));<br />
        value2.add(new ChartData(3f, 8f));</p>
<p>        List&lt;ChartData&gt; value3 = new ArrayList&lt;&gt;();<br />
        value3.add(new ChartData(value1));<br />
        value3.add(new ChartData(value2));<br />
        areaChart.setData(value3);</p>
<p>        List&lt;String&gt; type = new ArrayList&lt;&gt;();<br />
        type.add(&quot;Value1&quot;);<br />
        type.add(&quot;value2&quot;);<br />
        areaChart.setLegends(type);<br />
    }<br />
}<br />

 


  
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!