Android Bar & Radar Chart using Volley MSQL PHP JSONsteemCreated with Sketch.

in #android8 years ago

What is Chart ?


Pictorial Representation of Data is called chart. As there are different types of chart like :

  • Heat map series
  • Line chart
  • Pie chart
  • Polar chart
  • Range series
  • Scatter chart
  • Spline chart
  • Treemap
  • Waterfall series and many more.
But in this post we will be using 2 charts which are Bar Chart and Radar Chart.

 

 

 

 

 

 

 


Where you can implement Charts ?

  • Financial Data.
  • Monthly Bills.
  • Comparison between Data and many more.

Steps to implement in Android

  1. Get the JSON Data.
  2. Parse JSON using Volley.
  3. Use MPAndroidChart for showing JSON Data.
 

Add this to your Gradle File

compile 'com.android.volley:volley:1.0.0'
compile 'com.github.PhilJay:MPAndroidChart:v2.0.9'

Add this to your Manifest File

<uses-permission android:name="android.permission.INTERNET"/>
 

You can use this URL for Bar Chart

You can use this URL for Radar Chart

 

Step 1. activity_main.xml

<com.github.mikephil.charting.charts.BarChart
    android:id="@+id/chart"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
     />

Step 2. MainActivity.java

package com.example.sumit.chartandroid;

import android.app.ProgressDialog;
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;

import com.android.volley.Request;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.StringRequest;
import com.github.mikephil.charting.charts.BarChart;
import com.github.mikephil.charting.data.BarData;
import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.utils.ColorTemplate;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.sql.Array;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

public class MainActivity extends AppCompatActivity {
private ProgressDialog pd;

ArrayList yAxis;
ArrayList yValues;
ArrayList xAxis1;
BarEntry values ;
BarChart chart;


BarData data;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    pd = new ProgressDialog(MainActivity.this);
    pd.setMessage("loading");


   // Log.d("array",Arrays.toString(fullData));
    chart = (BarChart) findViewById(R.id.chart);
    load_data_from_server();

}

public void load_data_from_server() {
    pd.show();
    String url = "http://vga.ramstertech.com/freebieslearning/chart.php";
    xAxis1 = new ArrayList&lt;&gt;();
    yAxis = null;
    yValues = new ArrayList&lt;&gt;();


    StringRequest stringRequest = new StringRequest(Request.Method.POST,
            url,
            new Response.Listener() {
                @Override
                public void onResponse(String response) {
                    Log.d("string",response);

                    try {

                        JSONArray jsonarray = new JSONArray(response);

                        for(int i=0; i &lt; jsonarray.length(); i++) {

                            JSONObject jsonobject = jsonarray.getJSONObject(i);


                            String score = jsonobject.getString("score").trim();
                            String name = jsonobject.getString("name").trim();

                            xAxis1.add(name);

                            values = new BarEntry(Float.valueOf(score),i);
                            yValues.add(values);

                        }
                    } catch (JSONException e) {
                        e.printStackTrace();


                    }

                    BarDataSet barDataSet1 = new BarDataSet(yValues, "Goals LaLiga 16/17");
                    barDataSet1.setColor(Color.rgb(0, 82, 159));

                    yAxis = new ArrayList&lt;&gt;();
                    yAxis.add(barDataSet1);
                    String names[]= xAxis1.toArray(new String[xAxis1.size()]);
                    data = new BarData(names,yAxis);
                    chart.setData(data);
                    chart.setDescription("");
                    chart.animateXY(2000, 2000);
                    chart.invalidate();
                    pd.hide();
                }
            },
            new Response.ErrorListener() {
                @Override
                public void onErrorResponse(VolleyError error) {
                    if(error != null){

                        Toast.makeText(getApplicationContext(), "Something went wrong.", Toast.LENGTH_LONG).show();
                        pd.hide();
                    }
                }
            }

    );

    MySingleton.getInstance(getApplicationContext()).addToRequestQueue(stringRequest);

}

}

Step 3. activity_radar.xml

<com.github.mikephil.charting.charts.RadarChart
    android:id="@+id/chartr"
    android:layout_width="368dp"
    android:layout_height="495dp"
    tools:layout_editor_absoluteX="8dp"
    tools:layout_editor_absoluteY="8dp" />

Step 4. Radar.java

package com.example.sumit.chartandroid;
package com.example.sumit.chartandroid;

import android.app.ProgressDialog;
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;

import com.android.volley.Request;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.StringRequest;
import com.github.mikephil.charting.charts.RadarChart;
import com.github.mikephil.charting.data.BarData;
import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.RadarData;
import com.github.mikephil.charting.data.RadarDataSet;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.util.ArrayList;

public class Radar extends AppCompatActivity {
ArrayList entries;
private ProgressDialog pd;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_radar);
pd = new ProgressDialog(Radar.this);
pd.setMessage("loading");

    entries = new ArrayList&lt;&gt;();
    load_data_from_server();
}
public void load_data_from_server() {
    pd.show();
    String url = "http://vga.ramstertech.com/freebieslearning/radar.php";



    StringRequest stringRequest = new StringRequest(Request.Method.POST,
            url,
            new Response.Listener() {
                @Override
                public void onResponse(String response) {
                    Log.d("string",response);

                    try {

                        JSONArray jsonarray = new JSONArray(response);

                        for(int i=0; i &lt; jsonarray.length(); i++) {

                            JSONObject jsonobject = jsonarray.getJSONObject(i);


                            String target = jsonobject.getString("target").trim();
                            String passing = jsonobject.getString("passing").trim();
                            String skills = jsonobject.getString("skills").trim();
                            String dribbling = jsonobject.getString("dribbling").trim();
                            String penalty = jsonobject.getString("penalty").trim();
                            entries.add(new Entry(Float.valueOf(target), 0));
                            entries.add(new Entry(Float.valueOf(passing), 1));
                            entries.add(new Entry(Float.valueOf(skills), 2));
                            entries.add(new Entry(Float.valueOf(dribbling), 3));
                            entries.add(new Entry(Float.valueOf(penalty), 4));




                        }
                    } catch (JSONException e) {
                        e.printStackTrace();


                    }

                    RadarChart chart = (RadarChart) findViewById(R.id.chartr);

                    RadarDataSet dataset_comp1 = new RadarDataSet(entries, "Lionel Messi");

                    dataset_comp1.setColor(Color.BLUE);
                    dataset_comp1.setDrawFilled(true);

                    ArrayList dataSets = new ArrayList();
                    dataSets.add(dataset_comp1);


                    ArrayList labels = new ArrayList();
                    labels.add("Target");
                    labels.add("Passing");
                    labels.add("Skills");
                    labels.add("Dribbling");
                    labels.add("Penalty");


                    RadarData data = new RadarData(labels, dataSets);
                    chart.setData(data);
                    String description = "Showing Lionel Messi's Skill Analysis (scale of 1-5)";
                    chart.setDescription(description);
                  
                    chart.invalidate();
                    chart.animate();
                    pd.hide();

                }
            },
            new Response.ErrorListener() {
                @Override
                public void onErrorResponse(VolleyError error) {
                    if(error != null){

                        Toast.makeText(getApplicationContext(), "Something went wrong.", Toast.LENGTH_LONG).show();
                        pd.hide();
                    }
                }
            }

    );

    MySingleton.getInstance(getApplicationContext()).addToRequestQueue(stringRequest);

}

}

Add Singleton class

package com.example.sumit.chartandroid;
package com.example.sumit.chartandroid;
import android.content.Context;
import android.graphics.Bitmap;
import android.support.v4.util.LruCache;

import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.toolbox.ImageLoader;
import com.android.volley.toolbox.Volley;

public class MySingleton {
private static MySingleton mInstance;
private RequestQueue mRequestQueue;
private ImageLoader mImageLoader;
private static Context mCtx;

private MySingleton(Context context) {
    mCtx = context;
    mRequestQueue = getRequestQueue();

    mImageLoader = new ImageLoader(mRequestQueue,
            new ImageLoader.ImageCache() {
                private final LruCache&lt;String, Bitmap&gt;
                        cache = new LruCache&lt;String, Bitmap&gt;(20);

                @Override
                public Bitmap getBitmap(String url) {
                    return cache.get(url);
                }

                @Override
                public void putBitmap(String url, Bitmap bitmap) {
                    cache.put(url, bitmap);
                }
            });
}

public static synchronized MySingleton getInstance(Context context) {
    if (mInstance == null) {
        mInstance = new MySingleton(context);
    }
    return mInstance;
}

public RequestQueue getRequestQueue() {
    if (mRequestQueue == null) {

        mRequestQueue = Volley.newRequestQueue(mCtx.getApplicationContext());
    }
    return mRequestQueue;
}

public  void addToRequestQueue(Request req) {
    getRequestQueue().add(req);
}

public ImageLoader getImageLoader() {
    return mImageLoader;
}

}

Download the Source Code from GITHUB

Sort:  

Dear friend! Next time also use #vahid564 and follow @vahid564 to get an upvote on your quality posts!

Congratulations @sumitrajpal! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 1 year!

Click here to view your Board

Do not miss the last post from @steemitboard:

Carnival Challenge - Collect badge and win 5 STEEM
Vote for @Steemitboard as a witness and get one more award and increased upvotes!

Congratulations @sumitrajpal! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 2 years!

You can view your badges on your Steem Board and compare to others on the Steem Ranking

Vote for @Steemitboard as a witness to get one more award and increased upvotes!

Coin Marketplace

STEEM 0.04
TRX 0.33
JST 0.078
BTC 62081.79
ETH 1631.74
USDT 1.00
SBD 0.40