More Google Charts examples on Android WebView

Last post show simple example of using Google Charts API in WebView. Now I show more chart examples, include: Pie Chart, 3D Pie Chart, Scatter Chart, Column Chart, Bar Chart, Histogram, Line Chart and Area Chart.



For MainActivity.java, activity_main.xml and AndroidManifest.xml, refer to last post "Display Google Charts (pie chart) on Android WebView".

Modify ShowWebChartActivity.java to provide a Spinner for user to select various type of charts, and load 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") 
public class 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 = new 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 = new 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 = new 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
   public void onItemSelected(AdapterView<?> parent, View view,
     int position, long id) {
    String chartHtml = listHtml.get(parent.getSelectedItemPosition());
    webView.loadUrl(chartHtml);
   }

   @Override
   public void onNothingSelected(AdapterView<?> parent) {
    // TODO Auto-generated method stub
    
   }});
        
        webView = (WebView)findViewById(R.id.web);
        webView.addJavascriptInterface(new WebAppInterface(), "Android");

        webView.getSettings().setJavaScriptEnabled(true); 

 }

 public class WebAppInterface {

     @JavascriptInterface
  public int getNum1() {
   return num1;
  }
  
  @JavascriptInterface
  public int getNum2() {
   return num2;
  }
  
  @JavascriptInterface
  public int getNum3() {
   return num3;
  }
  
  @JavascriptInterface
  public int getNum4() {
   return num4;
  }
  
  @JavascriptInterface
  public int getNum5() {
   return 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="http://android-er.blogspot.com/"
        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 various html for various 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 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':'Android-er: Google Charts example of Pie chart'};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.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: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);
      function drawChart() {
        var data = 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: 'Android-er: Google Charts example of 3D Pie chart',
          is3D: true,
        };

        var chart = new 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);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['x', 'Value'],
          [ 1, Android.getNum1()],
          [ 2, Android.getNum2()],
          [ 3, Android.getNum3()],
          [ 4, Android.getNum4()],
          [ 5, Android.getNum5()]
        ]);

        var options = {
          title: 'Android-er: Google Charts example of Scatter chart',
          hAxis: {title: 'X'},
          vAxis: {title: 'Value'},
          legend: 'none'
        };

        var chart = new 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);
function drawChart() {

  var data = 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: 'Android-er: Google Charts example of Column chart',
    hAxis: {title: 'Value', titleTextStyle: {color: 'red'}}
  };

  var chart = new 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);
      function drawChart() {
        var data = 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: 'Android-er: Google Charts example of Bar chart',
          vAxis: {title: 'Value',  titleTextStyle: {color: 'red'}}
        };

        var chart = new 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);
      function drawChart() {
        var data = 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: 'Android-er: Google Charts example of Histogram',
          legend: { position: 'none' },
        };

        var chart = new 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);
      function drawChart() {
        var data = 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: 'Android-er: Google Charts example of Line chart'
        };

        var chart = new 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);
      function drawChart() {
        var data = 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: 'Android-er: Google Charts example of Area chart',
          hAxis: {title: 'Value',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0}
        };

        var chart = new 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>

Download the files.