Chart.js not displaying on Android Webview if animation is set to false

Question

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?

score 5 · Accepted Answer · edited May 23 '17 at 12:30

5

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

edited May 23 '17 at 12:30

Community

1
1

answered Oct 16 '14 at 04:44

momo

3,404
6
37
66

1

Worked for me too. I'm using Chart.js older version (for maximum compatibility) and in my case, the html `canvas` on webview on older devices is only possible with this. Thanks. – spcsLrg Apr 26 '22 at 07:40

score 0 · Answer 2 · answered Aug 03 '15 at 20:03

0

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

        webView.getSettings().setJavaScriptEnabled(true);

answered Aug 03 '15 at 20:03

knutigro

1,082
2
10
20

score 0 · Answer 3 · answered Aug 02 '18 at 06:36

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 complete "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);

Chart.js not displaying on Android Webview if animation is set to false

3 Answers3

Linked