Integrating Pie Chart In android Using Google Charts

Posted By : Keshav Gupta | 19-Apr-2018

android

Step1. Create a 3D piechart html file that will be containing google chart scripts, chart view background, attributes and function drawChart() which will be used to provide pie chart slice value.

<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',-->
          backgroundColor: '#163E77',
          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>

Step2. Now we will be creating a activity class which will be containing a xml layout file which further containing a WebView container on which we will be loading pie chart from html file.So first we will be initialzing WebView attributes.Code will be like:

  private int num1=20,num2=20,num3=20,num4=40,num5=20;
    private AppCompatActivity activity;
    @BindView(R.id.piechart)
    WebView webView;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_layout_piechart);
        ButterKnife.bind(this);
        activity=PieChartActiivty.this;
        webView.addJavascriptInterface(new WebAppInterface(), "Android");
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        webView.getSettings().setLoadWithOverviewMode(true);
        String chartUrl="file:///android_asset/pie_chart_3d.html";
        webView.loadUrl(chartUrl);
    }

Step3. Now we will be overriding a JavaScriptInterface which will override pie slice value runtime in html file.Here is code:

Final code will be like:

public class PieChartActiivty extends AppCompatActivity {
    private int num1=20,num2=20,num3=20,num4=40,num5=20;
    private AppCompatActivity activity;
    @BindView(R.id.piechart)
    WebView webView;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_layout_piechart);
        ButterKnife.bind(this);
        activity=PieChartActiivty.this;
        webView.addJavascriptInterface(new WebAppInterface(), "Android");
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        webView.getSettings().setLoadWithOverviewMode(true);
        String chartUrl="file:///android_asset/pie_chart_3d.html";
        webView.loadUrl(chartUrl);
    }

    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;
        }
    }
}