More Google Charts Examples On Android Webview

Posted on

Last post service demo simple event of using Google Charts API inwards WebView. Now I demo to a greater extent than nautical chart examples, include: Pie Chart, 3D Pie Chart, Scatter Chart, Column Chart, Bar Chart, Histogram, Line Chart together with Area Chart.

For MainActivity.java, activity_main.xml and AndroidManifest.xml, cite to final post service “Display Google Charts (pie chart) on Android WebView“.

Modify ShowWebChartActivity.java to furnish a Spinner for user to lead diverse type of charts, together with charge coresponding html accordingly.

package com.example.androidwebchart;  import java.util.ArrayList; import java.util.List;  import android.annotation.SuppressLint; import android.content.Intent; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.view.View; import android.webkit.JavascriptInterface; import android.webkit.WebView; import android.widget.AdapterView; import android.widget.AdapterView.OnItemSelectedListener; import android.widget.ArrayAdapter; import android.widget.Spinner;  @SuppressLint("SetJavaScriptEnabled")  world course of pedagogy ShowWebChartActivity extends ActionBarActivity {    WebView webView;  int num1, num2, num3, num4, num5;    Spinner spCharts;  List<String> listCharts;  List<String> listHtml;   @Override  protected void onCreate(Bundle savedInstanceState) {   super.onCreate(savedInstanceState);         setContentView(R.layout.layout_webchart);                  Intent intent = getIntent();         num1 = intent.getIntExtra("NUM1", 0);         num2 = intent.getIntExtra("NUM2", 0);         num3 = intent.getIntExtra("NUM3", 0);         num4 = intent.getIntExtra("NUM4", 0);         num5 = intent.getIntExtra("NUM5", 0);                  spCharts = (Spinner) findViewById(R.id.spcharts);                  listCharts = novel ArrayList<String>();         listCharts.add("Pie Chart");         listCharts.add("Pie Chart 3D");         listCharts.add("Scatter Chart");         listCharts.add("Column Chart");         listCharts.add("Bar Chart");         listCharts.add("Histogram");         listCharts.add("Line Chart");         listCharts.add("Area Chart");                  listHtml = novel ArrayList<String>();         listHtml.add("file:///android_asset/pie_chart.html");         listHtml.add("file:///android_asset/pie_chart_3d.html");         listHtml.add("file:///android_asset/scatter_chart.html");         listHtml.add("file:///android_asset/column_chart.html");         listHtml.add("file:///android_asset/bar_chart.html");         listHtml.add("file:///android_asset/histogram.html");         listHtml.add("file:///android_asset/line_chart.html");         listHtml.add("file:///android_asset/area_chart.html");               ArrayAdapter<String> dataAdapter = novel ArrayAdapter<String>(this,       android.R.layout.simple_spinner_item, listCharts);      dataAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);      spCharts.setAdapter(dataAdapter);      spCharts.setOnItemSelectedListener(new OnItemSelectedListener(){     @Override    world void onItemSelected(AdapterView<?> parent, View view,      int position, long id) {     String chartHtml = listHtml.get(parent.getSelectedItemPosition());     webView.loadUrl(chartHtml);    }     @Override    world void onNothingSelected(AdapterView<?> parent) {     // TODO Auto-generated method stub         }});                  webView = (WebView)findViewById(R.id.web);         webView.addJavascriptInterface(new WebAppInterface(), "Android");          webView.getSettings().setJavaScriptEnabled(true);    }   world course of pedagogy WebAppInterface {       @JavascriptInterface   world int getNum1() {    render num1;   }      @JavascriptInterface   world int getNum2() {    render num2;   }      @JavascriptInterface   world int getNum3() {    render num3;   }      @JavascriptInterface   world int getNum4() {    render num4;   }      @JavascriptInterface   world int getNum5() {    render num5;   }  }  } 

layout_webchart.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical" >          <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="center_horizontal"         android:autoLink="web"         android:text="https://rootandroid.org//"         android:textStyle="bold" />          <Spinner         android:id="@+id/spcharts"         android:layout_width="match_parent"         android:layout_height="wrap_content" />          <WebView         android:id="@+id/web"         android:layout_width="match_parent"         android:layout_height="match_parent"/>  </LinearLayout> 

Create diverse html for diverse type.

/assets/pie_chart.html

<!--ref: https://google-developers.appspot.com/chart/interactive/docs/quick_start--> <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 together with 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 together with populates a information table,        // instantiates the pie chart, passes inwards the information together with       // draws it.       component division drawChart() {        // Create the information table.       var information = novel 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 nautical chart options       var options = {'title':': Google Charts event of Pie chart'};        // Instantiate together with depict our chart, passing inwards about options.       var nautical chart = novel google.visualization.PieChart(document.getElementById('chart_div'));       chart.draw(data, options);     }     </script>   </head>    <body>  <!--Div that volition concur the pie chart-->     <div id="chart_div" style="width:100%; height:100%"></div>   </body> </html> 

/assets/pie_chart_3d.html

<!--ref: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart--> <html>   <head>     <script type="text/javascript" src="https://www.google.com/jsapi"></script>     <script type="text/javascript">       google.load("visualization", "1", {packages:["corechart"]});       google.setOnLoadCallback(drawChart);       component division drawChart() {         var information = google.visualization.arrayToDataTable([           ['Items',  'Value'],           ['Item 1', Android.getNum1()],           ['Item 2', Android.getNum2()],           ['Item 3', Android.getNum3()],           ['Item 4', Android.getNum4()],           ['Item 5', Android.getNum5()]         ]);          var options = {           title: ': Google Charts event of 3D Pie chart',           is3D: true,         };          var nautical chart = novel google.visualization.PieChart(document.getElementById('piechart_3d'));         chart.draw(data, options);       }     </script>   </head>   <body>     <div id="piechart_3d" style="width: 100%; height: 100%;"></div>   </body> </html> 

/assets/scatter_chart.html

<!--ref: https://google-developers.appspot.com/chart/interactive/docs/gallery/scatterchart--> <html>   <head>     <script type="text/javascript" src="https://www.google.com/jsapi"></script>     <script type="text/javascript">       google.load("visualization", "1", {packages:["corechart"]});       google.setOnLoadCallback(drawChart);       component division drawChart() {         var information = google.visualization.arrayToDataTable([           ['x', 'Value'],           [ 1, Android.getNum1()],           [ 2, Android.getNum2()],           [ 3, Android.getNum3()],           [ 4, Android.getNum4()],           [ 5, Android.getNum5()]         ]);          var options = {           title: ': Google Charts event of Scatter chart',           hAxis: {title: 'X'},           vAxis: {title: 'Value'},           legend: 'none'         };          var nautical chart = novel google.visualization.ScatterChart(document.getElementById('chart_div'));         chart.draw(data, options);       }     </script>   </head>   <body>     <div id="chart_div" style="width: 100%; height: 100%;"></div>   </body> </html> 

/assets/column_chart.html

<!--ref: https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart--> <html>   <head>     <script type="text/javascript" src="https://www.google.com/jsapi"></script>     <script type="text/javascript">       google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); component division drawChart() {    var information = google.visualization.arrayToDataTable([     ['Items', 'Value'],     ['Item 1',  Android.getNum1()],     ['Item 2',  Android.getNum2()],     ['Item 3',  Android.getNum3()],     ['Item 4',  Android.getNum4()],     ['Item 5',  Android.getNum5()]   ]);    var options = {     title: ': Google Charts event of Column chart',     hAxis: {title: 'Value', titleTextStyle: {color: 'red'}}   };    var nautical chart = novel google.visualization.ColumnChart(document.getElementById('chart_div'));    chart.draw(data, options);  }     </script>   </head>   <body>     <div id="chart_div" style="width: 100%; height: 100%;"></div>   </body> </html> 

/assets/bar_chart.html

<!--ref: https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart--> <html>   <head>     <script type="text/javascript" src="https://www.google.com/jsapi"></script>     <script type="text/javascript">       google.load("visualization", "1", {packages:["corechart"]});       google.setOnLoadCallback(drawChart);       component division drawChart() {         var information = google.visualization.arrayToDataTable([           ['Items', 'Value'],           ['Item 1',  Android.getNum1()],           ['Item 2',  Android.getNum2()],           ['Item 3',  Android.getNum3()],           ['Item 4',  Android.getNum4()],           ['Item 5',  Android.getNum5()]         ]);          var options = {           title: ': Google Charts event of Bar chart',           vAxis: {title: 'Value',  titleTextStyle: {color: 'red'}}         };          var nautical chart = novel google.visualization.BarChart(document.getElementById('chart_div'));          chart.draw(data, options);       }     </script>   </head>   <body>     <div id="chart_div" style="width: 100%; height: 100%;"></div>   </body> </html> 

/assets/histogram.html

<!--ref: https://google-developers.appspot.com/chart/interactive/docs/gallery/histogram--> <html>   <head>     <script type="text/javascript" src="https://www.google.com/jsapi"></script>     <script type="text/javascript">       google.load("visualization", "1", {packages:["corechart"]});       google.setOnLoadCallback(drawChart);       component division drawChart() {         var information = google.visualization.arrayToDataTable([           ['Items', 'Value'],           ['Item 1', Android.getNum1()],           ['Item 2', Android.getNum2()],           ['Item 3', Android.getNum3()],           ['Item 4', Android.getNum4()],           ['Item 5', Android.getNum5()]]);          var options = {           title: ': Google Charts event of Histogram',           legend: { position: 'none' },         };          var nautical chart = novel google.visualization.Histogram(document.getElementById('chart_div'));         chart.draw(data, options);       }     </script>   </head>   <body>     <div id="chart_div" style="width: 100%; height: 100%;"></div>   </body> </html> 

/assets/line_chart.html

<!--ref: https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart--> <html>   <head>     <script type="text/javascript" src="https://www.google.com/jsapi"></script>     <script type="text/javascript">       google.load("visualization", "1", {packages:["corechart"]});       google.setOnLoadCallback(drawChart);       component division drawChart() {         var information = google.visualization.arrayToDataTable([           ['Items', 'Value'],           ['Item 1',  Android.getNum1()],           ['Item 2',  Android.getNum2()],           ['Item 3',  Android.getNum3()],           ['Item 4',  Android.getNum4()],           ['Item 5',  Android.getNum5()]         ]);          var options = {           title: ': Google Charts event of Line chart'         };          var nautical chart = novel google.visualization.LineChart(document.getElementById('chart_div'));         chart.draw(data, options);       }     </script>   </head>   <body>     <div id="chart_div" style="width: 100%; height: 100%;"></div>   </body> </html> 

/assets/area_chart.html

<!--ref: https://google-developers.appspot.com/chart/interactive/docs/gallery/areachart--> <html>   <head>     <script type="text/javascript" src="https://www.google.com/jsapi"></script>     <script type="text/javascript">       google.load("visualization", "1", {packages:["corechart"]});       google.setOnLoadCallback(drawChart);       component division drawChart() {         var information = google.visualization.arrayToDataTable([           ['Items', 'Value'],           ['Item 1',  Android.getNum1()],           ['Item 2',  Android.getNum2()],           ['Item 3',  Android.getNum3()],           ['Item 4',  Android.getNum4()],           ['Item 5',  Android.getNum5()]         ]);          var options = {           title: ': Google Charts event of Area chart',           hAxis: {title: 'Value',  titleTextStyle: {color: '#333'}},           vAxis: {minValue: 0}         };          var nautical chart = novel google.visualization.AreaChart(document.getElementById('chart_div'));         chart.draw(data, options);       }     </script>   </head>   <body>     <div id="chart_div" style="width: 100%; height: 100%;"></div>   </body> </html> 

simple event of using Google Charts API inwards WebView More Google Charts examples on Android WebViewDownload the files.