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, val3, val4, val5;
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"/>
No comments:
Post a Comment