I have a javascript enabled WebView with a ChromeWebClient and they display the Chart.Js pie example fine. After I set the options to animation: false, then stop displaying the chart.

var pieOptions = {
            animation : false
        }
        window.onload = function(){
            var ctx1 = document.getElementById("chart-area1").getContext("2d");
            window.myPie1 = new Chart(ctx1).Pie(pieData,pieOptions);

            var ctx2 = document.getElementById("chart-area2").getContext("2d");
            window.myPie2 = new Chart(ctx2).Pie(pieData);
        };

The first pie chart with the disabled animation doesn't display, the second does. Both display fine on desktop Chrome. I am using an Android 4.4.4 device by the way. After tapping the are where the inanimated chart should be, it will display itself (I guess refreshing the chart with the touch event).

Am I missing something or is this a bug?

I have a javascript enabled WebView with a ChromeWebClient and they display the Chart.Js pie example fine. After I set the options to animation: false, then stop displaying the chart.

var pieOptions = {
            animation : false
        }
        window.onload = function(){
            var ctx1 = document.getElementById("chart-area1").getContext("2d");
            window.myPie1 = new Chart(ctx1).Pie(pieData,pieOptions);

            var ctx2 = document.getElementById("chart-area2").getContext("2d");
            window.myPie2 = new Chart(ctx2).Pie(pieData);
        };

The first pie chart with the disabled animation doesn't display, the second does. Both display fine on desktop Chrome. I am using an Android 4.4.4 device by the way. After tapping the are where the inanimated chart should be, it will display itself (I guess refreshing the chart with the touch event).

Am I missing something or is this a bug?

• javascript
• android
• webview
• chart.js

Share Improve this question Follow edited Nov 26, 2014 at 12:55 j0k 22.8k2828 gold badges8181 silver badges9090 bronze badges asked Oct 15, 2014 at 9:59 momomomo 3,47466 gold badges3939 silver badges6767 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

I tried this answer on Android WebView renders blank/white and it solved the problem. Basically we tell the WebView to avoid using hardware rendering:

webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

In addition to the accepted answer, I had to enable javascript for my webView:

        webView.getSettings().setJavaScriptEnabled(true);

Based on the previous answer here and a few others in other posts, I've ended up with the below code which works fine for me.

Note, my HTML is a plete "page" stored as a string. I have assets in my project under /assets/html/, which I use as my Base Url. The assets include CSS, other JS files, etc.

// Reference the webview
WebView webView = view.findViewById(R.id.webView);
// Avoid hardware rendering (force software rendering)
webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

// Reference settings so we can change some
WebSettings settings = webView.getSettings();

// Enable items needed for proper chartJS execution
settings.setJavaScriptEnabled(true);
settings.setDomStorageEnabled(true);
settings.setAllowUniversalAccessFromFileURLs(true);
settings.setAllowFileAccessFromFileURLs(true);
settings.setCacheMode(WebSettings.LOAD_NO_CACHE);

// Load the chartJS HTML (from a class property)
String html = mHtml;
// Load the HTML into the webView (note the other needed files reside: css, js, etc.)
webView.loadDataWithBaseURL("file:///android_asset/html/", html, "text/html", "UTF-8", null);
// Set to white, the default html bkg color
webView.setBackgroundColor(Color.WHITE);