I am trying to implement chart.js inside webview but it is not working at all even after trying many solution

Question

package com.androminor.chartdemo;

  import android.os.Build;
  import android.support.v7.app.AppCompatActivity;
  import android.os.Bundle;
  import android.view.View;
  import android.webkit.WebSettings;
  import android.webkit.WebView;
  public class MainActivity extends AppCompatActivity {
  private WebView webView;
@Override
  protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.webview);
       webView = (WebView) findViewById(R.id.webView1);
    WebSettings webSettings = webView.getSettings();
    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN){
    webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
    webView.getSettings().setAllowFileAccessFromFileURLs(true);
    webSettings.setDomStorageEnabled(true);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
    webView.setLayerType(View.LAYER_TYPE_HARDWARE, null);
    webView.loadUrl("file:///android_asset/pie.html");
  }

The corresponding html is given below: <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0>

<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<style>
canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
</style>
</head>
<body>


<h1>Chart.js Sample</h1>
<script src ="test.js"></script>
<script src="Chart.min.js"></script>
<canvas id="countries" width="" height=""></canvas>



<script>
var pieData = [
{
    value: 20,
    color:"#878BB6"
},
{
    value : 30,
    color : "#4ACAB4"
},
{
    value : 40,
    color : "#FF8153"
},
{
    value : 10,
    color : "#FFEA88"
}
];
var countries= document.getElementById("countries").getContext("2d");
new Chart(countries).Pie(pieData);
</script>
</body>
</html>

Welcome to the Treehouse Community

Looking to learn something new?

Varun Singh

Varun Singh

I am trying to implement chart.js inside webview but it is not working at all even after trying many solution