Capture Icon Generated Past Times Google Charts Api

Posted on

Previous posts demonstrate how to “Display Google Charts (pie chart) on Android WebView” as well as “More Google Charts examples on Android WebView“. To capture the PNG picture of a chart, nosotros tin purpose the getImageURI() method, it provide a string inwards “data:image/png;base64,…” format.


We tin transcend this string to Android code, decode as well as generate bitmap. To decode string inwards “data:image/png;base64,…” format, to Bitmap, nosotros tin purpose the code:

 someone Bitmap decodeBase64PNG(String src){    String imageDataBytes = src.substring(src.indexOf(",") + 1);      InputStream current =     novel ByteArrayInputStream(     Base64.decode(imageDataBytes.getBytes(),      Base64.DEFAULT));         Bitmap bitmap = BitmapFactory.decodeStream(stream);      provide bitmap;  } 

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

Other files alter from concluding post service “More Google Charts examples on Android WebView“.

Modify layout_webchart.xml to add together a Button to Capture the image.

<?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" />          <Button         android:id="@+id/capture"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:text="Capture" />          <WebView         android:id="@+id/web"         android:layout_width="match_parent"         android:layout_height="match_parent"/>  </LinearLayout> 

ShowWebChartActivity.java

package com.example.androidwebchart;  import java.io.ByteArrayInputStream; import java.io.InputStream; import java.util.ArrayList; import java.util.List;  import android.annotation.SuppressLint; import android.app.Dialog; import android.content.Intent; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.util.Base64; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup.LayoutParams; import android.webkit.JavascriptInterface; import android.webkit.WebView; import android.widget.AdapterView; import android.widget.AdapterView.OnItemSelectedListener; import android.widget.ArrayAdapter; import android.widget.Button; import android.widget.ImageView; import android.widget.Spinner; import android.widget.Toast;  @SuppressLint("SetJavaScriptEnabled")  world degree ShowWebChartActivity extends ActionBarActivity {    WebView webView;  int num1, num2, num3, num4, num5;    Spinner spCharts;  List<String> listCharts;  List<String> listHtml;    Button btnCapture;   @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);           btnCapture = (Button)findViewById(R.id.capture);         btnCapture.setOnClickListener(new OnClickListener(){     @Override    world void onClick(View v) {     //call Javascript inwards WebView/HTML     webView.loadUrl("javascript:capture()");    }});  }    someone void showCaptured(String imageuri){    Bitmap bmp = decodeBase64PNG(imageuri);      Dialog dialog = novel Dialog(this);      ImageView imageView = novel ImageView(this);      imageView.setImageBitmap(bmp);      dialog.addContentView(        imageView,         novel LayoutParams(         LayoutParams.MATCH_PARENT,          LayoutParams.MATCH_PARENT));      dialog.show();     }    someone Bitmap decodeBase64PNG(String src){    String imageDataBytes = src.substring(src.indexOf(",") + 1);      InputStream current =     novel ByteArrayInputStream(     Base64.decode(imageDataBytes.getBytes(),      Base64.DEFAULT));         Bitmap bitmap = BitmapFactory.decodeStream(stream);      provide bitmap;  }   world degree WebAppInterface {       @JavascriptInterface   world int getNum1() {    provide num1;   }      @JavascriptInterface   world int getNum2() {    provide num2;   }      @JavascriptInterface   world int getNum3() {    provide num3;   }      @JavascriptInterface   world int getNum4() {    provide num4;   }      @JavascriptInterface   world int getNum5() {    provide num5;   }      @JavascriptInterface   world void captureCallback(String imageURI){    Toast.makeText(ShowWebChartActivity.this,      imageURI, Toast.LENGTH_LONG).show();    showCaptured(imageURI);   }  }  } 

All other HTMLs:

  • add a method Javascript constituent capture() to endure called from Android, as well as telephone telephone chart.getImageURI() to larn image, as well as transcend dorsum to Android past times calling captureCallback().
  • Make nautical chart to global past times removing “var” inwards front end of it.

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 as well as 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 as well as populates a information table,        // instantiates the pie chart, passes inwards the information as well as       // draws it.       constituent 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 as well as depict our chart, passing inwards merely about options.       nautical chart = novel google.visualization.PieChart(document.getElementById('chart_div'));       chart.draw(data, options);     }     </script>          <script type="text/javascript">     constituent capture(){      Android.captureCallback(chart.getImageURI());     }     </script>        </head>    <body>  <!--Div that volition agree the pie chart-->     <div id="chart_div" style="width:100%; height:100%"></div>   </body> </html> 

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);       constituent 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,         };          nautical chart = novel google.visualization.PieChart(document.getElementById('piechart_3d'));         chart.draw(data, options);       }     </script>          <script type="text/javascript">     constituent capture(){      Android.captureCallback(chart.getImageURI());     }     </script>        </head>   <body>     <div id="piechart_3d" style="width: 100%; height: 100%;"></div>   </body> </html> 

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);       constituent 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'         };          nautical chart = novel google.visualization.ScatterChart(document.getElementById('chart_div'));         chart.draw(data, options);       }     </script>          <script type="text/javascript">     constituent capture(){      Android.captureCallback(chart.getImageURI());     }     </script>        </head>   <body>     <div id="chart_div" style="width: 100%; height: 100%;"></div>   </body> </html> 

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); constituent 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'}}   };    nautical chart = novel google.visualization.ColumnChart(document.getElementById('chart_div'));    chart.draw(data, options);  }     </script>          <script type="text/javascript">     constituent capture(){      Android.captureCallback(chart.getImageURI());     }     </script>        </head>   <body>     <div id="chart_div" style="width: 100%; height: 100%;"></div>   </body> </html> 

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);       constituent 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'}}         };          nautical chart = novel google.visualization.BarChart(document.getElementById('chart_div'));          chart.draw(data, options);       }     </script>          <script type="text/javascript">     constituent capture(){      Android.captureCallback(chart.getImageURI());     }     </script>        </head>   <body>     <div id="chart_div" style="width: 100%; height: 100%;"></div>   </body> </html> 

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);       constituent 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' },         };          nautical chart = novel google.visualization.Histogram(document.getElementById('chart_div'));         chart.draw(data, options);       }     </script>          <script type="text/javascript">     constituent capture(){      Android.captureCallback(chart.getImageURI());     }     </script>        </head>   <body>     <div id="chart_div" style="width: 100%; height: 100%;"></div>   </body> </html> 

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);       constituent 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'         };          nautical chart = novel google.visualization.LineChart(document.getElementById('chart_div'));         chart.draw(data, options);       }     </script>          <script type="text/javascript">     constituent capture(){      Android.captureCallback(chart.getImageURI());     }     </script>        </head>   <body>     <div id="chart_div" style="width: 100%; height: 100%;"></div>   </body> </html> 

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);       constituent 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}         };          nautical chart = novel google.visualization.AreaChart(document.getElementById('chart_div'));         chart.draw(data, options);       }     </script>          <script type="text/javascript">     constituent capture(){      Android.captureCallback(chart.getImageURI());     }     </script>        </head>   <body>     <div id="chart_div" style="width: 100%; height: 100%;"></div>   </body> </html> 

More Google Charts examples on Android WebView Capture picture generated past times Google Charts APIDownload the files.