Android Scatter Chart with inverse Y-axis using numAndroidCharts library Tutorial

Udemy Generic 728x90

Objective

In this tutorial we learn how to implement Scatter Chart with inverse Y-axis using numAndroidCharts Library in Android App.

 


 
scatter-chart

A Scatter Chart shows the relationship between two sets of data using points. In this tutorial, we will implement Scatter Chart with inverse Y-axis.
 

Step 2

Creating a new project

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

Step 3

Adding library in Project

To draw Scatter Chart, we need to compile numAndroidCharts Library in our project. Open build.gradle file and use the following code to compile numAndroidCharts Library.

<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.14'<br />
}<br />

 

Step 4

Creating Layout

To create a Scatter chart in Android, we need to use com.numetriclabz.numandroidcharts.ScatterChart xml tag in your layout xml file. This tag creates the view of Line chart.

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

 

Step 5

Initializing the Scatter chart

To implement Scatter Chart, we need to initialize the view of the Scatter Chart. Add the following code in your java file. This code helps to create custom view of Scatter Chart.

<br />
ScatterChart scatterChart = (ScatterChart) findViewById(R.id.chart);<br />

 

Step 6

Add the data

All data should be converted into a ChartData object before it can be used by a chart. To display the data in a Line chart, we need to create an ArrayList. Every individual value of the raw data should be represented as ChartData. An ArrayList of such ChartData objects is used to create a Set of data(y, x).

<br />
List&lt;ChartData&gt; values = new ArrayList&lt;&gt;();<br />
 values.add(new ChartData(4f, 0.5f)); //values.add(new ChartData(y,x));<br />
 values.add(new ChartData(8f, 1f));<br />
 values.add(new ChartData(18f, 2f));<br />
 values.add(new ChartData(2f, 4f));<br />
 values.add(new ChartData(12f, 5f));<br />
 values.add(new ChartData(9f, 7f));</p>
<p>

 

Step 7

Add the data with String labels

If we want to add the data with string horizontal labels, use the following code in your java file

<br />
List&lt;ChartData&gt; values = new ArrayList&lt;&gt;();<br />
  values.add(new ChartData(4f, &quot;2001&quot;)); //values.add(new ChartData(y,&quot;Labels&quot;));<br />
  values.add(new ChartData(9f, &quot;2002&quot;));<br />
  values.add(new ChartData(18f,&quot;2003&quot;));<br />
  values.add(new ChartData(2f, &quot;2004&quot;));<br />
  values.add(new ChartData(12f,&quot;2005&quot;));<br />
  values.add(new ChartData(9f, &quot;2006&quot;));</p>
<p>

 

Step 8

Set the data

We need to set the data in Scatter Chart via setData().

<br />
scatterChart.setData(values);<br />

 

Step 10

Run your App

Now, run your app and you will see a Scatter chart.

4

1 (7)

 

Step 12

Set the circle size

We can set the circle size via setCircleSize() method.

<br />
scatterChart.setCircleSize(25f);<br />

2

 

Step 11

Set the description

Now, We can add the description to the chart via setDescription(“Your description”);

<br />
scatterChart.setDescription(&quot;Scatter Chart&quot;);<br />

 

3

 

Step 12

Inverse Y-axis

Till last step, we have successfully created the Scatter Chart but to convert y-axis inverse, we need use setInverseY_Axis() method of LineChart Class. Pass true as the parameter to the setInverseY_Axis() method. Add the following code snippet to your main activity class.

<br />
scatterChart.setInverseY_Axis(true);<br />

3

 
 

  
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!