Breaking News

Home / android / android studio / chart / Android Bar & Radar Chart using Volley MSQL PHP JSON

Android Bar & Radar Chart using Volley MSQL PHP JSON

9:31 AM , ,

Apa itu grafik?

Representasi Pictorial Data disebut grafik. Karena ada berbagai jenis grafik seperti:
  • Heat map series
  • Line chart
  • Pie chart
  • Polar chart
  • Range series
  • Scatter chart
  • Spline chart
  • Treemap
  • Waterfall series and many more.
Tapi di posting ini kita akan menggunakan 2 chart yaitu Bar Chart dan Radar Chart.

 

Di mana Anda bisa menerapkan 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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.sumit.chartandroid.MainActivity">
 
    <com.github.mikephil.charting.charts.BarChart
        android:id="@+id/chart"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
         />
 
</RelativeLayout>

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<>();
        yAxis = null;
        yValues = new ArrayList<>();


        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 < 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<>();
                        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

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.sumit.chartandroid.Radar">
 
    <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" />
</android.support.constraint.ConstraintLayout>

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(&quot;loading&quot;);

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



        StringRequest stringRequest = new StringRequest(Request.Method.POST,
                url,
                new Response.Listener() {
                    @Override
                    public void onResponse(String response) {
                        Log.d(&quot;string&quot;,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(&quot;target&quot;).trim();
                                String passing = jsonobject.getString(&quot;passing&quot;).trim();
                                String skills = jsonobject.getString(&quot;skills&quot;).trim();
                                String dribbling = jsonobject.getString(&quot;dribbling&quot;).trim();
                                String penalty = jsonobject.getString(&quot;penalty&quot;).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, &quot;Lionel Messi&quot;);

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

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


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


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

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

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

        );

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

    }
}

Download the Source Code from GITHUB

Sumber. Freebies Learning

1 comment:

Subscribe to: Post Comments ( Atom )