Wednesday, 20 May 2015

Android Google Chart Example


Here I am going to explain how to display a  google chart based on the input value
                                  
Step 1) Open res ⇒ layout⇒ activity_main.xml and add below items.
                                       

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin" >

    <EditText
        android:id="@+id/val1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number" />

    <EditText

        android:id="@+id/val2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number" />


    <EditText

        android:id="@+id/val3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number" />


    <EditText

        android:id="@+id/val4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number" />


  <EditText

        android:id="@+id/val5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number" />


    <Button
        android:id="@+id/show"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Click and wait" />
    
    
      <WebView
        android:id="@+id/web"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    

</LinearLayout>

Step 2) Open assests⇒chart.thml and add below items.

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
      
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);


      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'ITEM');
      data.addColumn('number', 'VALUE');
      data.addRows([
        ['Item 1', Android.getNum1()],
        ['Item 2', Android.getNum2()],
        ['Item 3', Android.getNum3()], 
        ['Item 4', Android.getNum4()],
        ['Item 5', Android.getNum5()]
      ]);

      // Set chart options
      var options = {'title':'AndroidDhina:Google Chart',
                     'width':600,
                     'height':600};

      // Instantiate and draw our chart, passing in some options.
    var chart = newgoogle.visualization.PieChart                                                                                      (document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
 <!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:600; height:600"></div>
  </body>
</html>

Step 3) Activity Class

package com.example.android_google_chart;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.EditText;

public class MainActivity extends Activity {

EditText val1, val2, val3val4val5;
Button btnShow;
WebView webView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

val1= (EditText) findViewById(R.id.val1);
val2= (EditText) findViewById(R.id.val2);
val3= (EditText) findViewById(R.id.val3);
val4= (EditText) findViewById(R.id.val4);
val5= (EditText) findViewById(R.id.val5);
btnShow= (Button) findViewById(R.id.show);


btnShow.setOnClickListener(btnShowOnClickListener);
}

OnClickListener btnShowOnClickListener = new OnClickListener() {

@Override
public void onClick(View v) 
{
webView= (WebView) findViewById(R.id.web);
webView.addJavascriptInterface(new WebAppInterface(), "Android");

webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("file:///android_asset/chart.html");

}

};

public class WebAppInterface {

@JavascriptInterface
public int getNum1() {
return getNum(val1);
}

@JavascriptInterface
public int getNum2() {
return getNum(val2);
}

@JavascriptInterface
public int getNum3() {
return getNum(val3);
}

@JavascriptInterface
public int getNum4() {
return getNum(val4);
}

@JavascriptInterface
public int getNum5() {
return getNum(val5);
}
}

private int getNum(EditText editText) {

int num = 0;

String Num = editText.getText().toString();
if (!stringNum.equals("")) {
num = Integer.valueOf(Num);
}

return (num);
}
}

Step 4) Add android internet permission to your Manifestfile.xml

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