AirChart

About

Charts are nothing but graphical representation of the data. As Android app developers, most of the times, we get this data from the REST APIs. And due to the time taken in getting a response from an API, we need to show a loading UI to the app user. Thus, this library takes care of:

• Show loading UI while the data loads
• Allowing the dev to directly supply JSON received in the API response to show a chart
• Allowing the dev to set chart parameters via code

Setup

Add this line in your root build.gradle at the end of repositories:

allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
  }
}

Add this line in your app build.gradle:

android {
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}
dependencies {
  implementation 'com.github.mumayank:AirChartProject:LATEST_VERSION'
}

where LATEST_VERSION is

Usage

Set chart data from REST API

If your REST APIs are returning the correctly-formatted JSONObject for a chart, you can simply pass it to the library. The library will take care of the rest, making the Android developer's job almost negligible. In this case, you only have to include this one line of code:

AirChart(activity, viewGroup).showBarChart(jsonString)

Here,

• activity is the reference to the activity
• viewGroup is the layout where you want the chart to appear
• jsonString is the JSON received from the REST API

---

Show loading UI

As stated above, if you want the library to show loading progress, you can simply split the initialization and the function call:

• Before making the REST API call, write this code:

	val airChart = AirChart(activity, viewGroup)

• After receiving response, write this code:

	airChart.showBarChart(jsonString)

---

Set chart data using code

airChart.showBarChart(object: AirChartBar.IBar {  

	override fun getTitle(): String {  
		return "title of the chart"  
	}  

	override fun getXAxisTitle(): String {  
		return "this is X-axis"  
	}  

	override fun getXAxisLabels(): ArrayList<String> {  
		return arrayListOf("Student1", "Student2", "Student3")  
	}  

	override fun getYLeftAxisTitle(): String {  
		return "this is Y-axis"  
	}  

	override fun getYLeftAxisValues(): ArrayList<Value> {  
		return arrayListOf(  
			Value(  
				"marks in sem 1",  
				arrayListOf(50.0, 40.0, 49.5)  
			),  
			Value(  
				"marks in sem 2",  
				arrayListOf(100.0, 30.0, 31.0)  
			)  
		)  
	}  

	override fun getColors(): ArrayList<String> {  
		return arrayListOf("#ffa726", "#2196f3")  
	}  

	/*  
	Additional optional functions that can be overridden on demand:     
	*/  

	override fun getSubTitle(): String? {  
		return "this is subtitle of the chart"  
	}  

	override fun getDecimalFormatPattern(): String? {  
		return "0.#"  
	}  

	override fun getAdditionalValues(): java.util.ArrayList<AdditionalValue>? {  
		return arrayListOf(  
			AdditionalValue("Key1", "Value1"),  
			AdditionalValue("Key2", "Value2"),  
			AdditionalValue("Key3", "Value3")  
		)  
	}  

	override fun getIsHorizontal(): Boolean {  
		return false  
	}  

	override fun getCustomViewLayoutResId(): Int? {  
		return R.layout.custom_view  
	}  

	override fun getIsAnimationRequired(): Boolean? {  
		return true  
	}  

	override fun onValueSelected(e: Entry?) {  
		// do something  
	}  

	override fun onNoValueSelected() {  
		// do something  
	}  

})

Note:

• Set title or subTitle as an empty string ("") to hide them from the view
• If any JSONArray has no values, send an empty array ([])
• getYLeftAxisValues accepts an arrayList of Value. If you want a simple bar chart, put only 1 Value object in the arrayList. If you want a grouped bar chart, put multiple Value objects in the arrayList.
• If you want a HorizontalBarChart, simply return true in getIsHorizontal

---

JSON format (this info is for the backend dev)

{
  "title": "Student records",
  "xAxisTitle": "Projects",
  "xAxisLabels": [
	"Narendra",
	"Rahul",
	"Prakash",
	"Sonia",
	"Lalu"
  ],
  "yLeftAxisTitle": "Progress Value",
  "yLeftAxisValues": [
	{
	  "legendLabel": "Scope",
	  "values": [
		24.3,
		12.1,
		13.5,
		12.7,
		17.8
	  ]
	},
	{
	  "legendLabel": "Taken up",
	  "values": [
		13.1,
		5.9,
		2.4,
		9.3,
		5.3
	  ]
	}
  ],
  "colors": [
	"#2196f3",
	"#ff9800"
  ],
  "subTitle": "Subtitle of the chart",
  "decimalFormatPattern": "0.0",
  "additionalValues": [
	{
	  "key": "Key1",
	  "value": "Value1"
	},
	{
	  "key": "Key2",
	  "value": "Value2"
	}
  ],
  "isHorizontal": false,
  "isAnimationRequired": true
}

Note:

• All fields are compulsory
• Set title or subTitle as an empty string ("") to hide them from the view
• If any JSONArray has no values, send an empty array ([])
• If you want a simple bar chart, put only 1 JSONObject in the yLeftAxisValues JSONArray. If you want grouped bar chart, put multiple JSONObject in it.
• If you want a HorizontalBarChart, simply put true in getIsHorizontal

Click here to find the Java POJO classes corresponding to the above JSON

---

Limits

• The horizontal bar chart does not support zoom (When you embed this chart in any app, most likely the app content will scroll vertically. If zoom is supported in the chart, and you zoom in, now if you scroll vertically, the chart scroll will fight with the app scroll)

• No. of minimum and maximum bars supported in the horizontal bar chart are 2 and 16 respectively (Due to the above, if there is no zoom, and we embed a lot of bars, the data will become unreadable)

---

Additional Information

• Most of the times, we need to show the user some extra information in the chart. Hence, the library provides an easy provision to do so. Simply put your title and value in the form of a key-value pair in additionalValues field. The library will generate a table on top of the chart to show such values.

• Ideally, keep the width as MATCH_PARENT and height as WRAP_CONTENT of the layout that you supply to the AirChart library during init (let's call it parentLayout). In case the UI of the parentLayout has a height constraint, you can keep the height as a fixed value (say 500dp). In this case, if there is a lot of data (like additional data, custom view etc) the library will automatically convert the view into a ScrollView so that all the items are shown to the user properly.

---

Please star this repository if it has helped you :)