Issue with Chart.js not showing up in Android Webview when animation is disabled

I am experiencing an issue with a javascript enabled WebView using a ChromeWebClient. The Chart.Js pie example displays fine until I set the options to animation: false, after which the chart stops displaying.

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 strange thing is that the first pie chart with disabled animation does not display, while the second one does. Both charts work perfectly on desktop Chrome, but when accessed through an Android 4.4.4 device, the inanimated chart only appears after tapping the area where it should be (presumably refreshing due to the touch event).

Is this possibly a bug, or am I overlooking something?

javascriptandroidwebviewchart.js

Answer №1

After testing out various solutions, I decided to implement the one suggested in this thread about fixing blank/white screens on Android WebView, and it worked like a charm. By setting the WebView to use software rendering instead of hardware rendering, the issue was resolved:

webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

Answer №2

Aside from the solution provided, it was necessary for me to activate javascript within my webView:

        webView.getSettings().setJavaScriptEnabled(true);

Answer №3

After reviewing various answers on this topic, I have crafted the following code that perfectly suits my needs.

It's worth mentioning that my HTML content is stored as a complete "page" within a string. The assets for my project are located in /assets/html/, which serves as the Base Url containing CSS, JS files, and more.

// Get reference to the webview
WebView webView = view.findViewById(R.id.webView);
// Disable hardware rendering (using software rendering instead)
webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

// Access webview settings for customization
WebSettings settings = webView.getSettings();

// Enable necessary features for proper execution of chartJS
settings.setJavaScriptEnabled(true);
settings.setDomStorageEnabled(true);
settings.setAllowUniversalAccessFromFileURLs(true);
settings.setAllowFileAccessFromFileURLs(true);
settings.setCacheMode(WebSettings.LOAD_NO_CACHE);

// Load the chartJS HTML content (stored in a class property)
String html = mHtml;
// Display the HTML in the webview along with other required files like css, js, etc.
webView.loadDataWithBaseURL("file:///android_asset/html/", html, "text/html", "UTF-8", null);
// Set the default background color to white
webView.setBackgroundColor(Color.WHITE);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When I make a post request, I receive a response in the form of an HTTPS link, but it is not redirected to

I'm making a post request and receiving the response as follows: " [Symbol(Response internals)]: {url: 'https://login.somenewloginpage'}" My intention is to open a new page using that URL, but unfortunately it does not redirect t ...

javascriptnode.jsexpress

What is the best way to swap out an observable array with an array retrieved from an API response

I have a custom material autocomplete input that allows users to select items in a dynamic form component. Since the fields of the form are dynamic, I need to filter the list of items every time a user types something into the input. filteredOptions: { [k ...

javascriptarraysangularrxjssubscription

Retrieve text excluding a specific class or id using jQuery

I need help with extracting text from an HTML div. <div id="example"> I am writing a <span class='outer'>query for help <span class='inner'>on a coding forum</span></span> </div> const te ...

javascripthtmljquerytext

I'm encountering an issue with VS Code where it is unable to identify ejs tags within my project

I'm running into an issue with Vs code where it's not recognizing ejs output tags when they're inside an html tag, like in the input tag below : <input type="checkbox" name="checkbox" value="<%=item._id%>" onChange="this.form. ...

javascripthtmlnode.jsexpressejs

How to extract data from a span element using AngularJS

Combining input values to create a cohesive string: <input ng-model="first"> <input ng-model="second"> <span ng-model="result">{{first}} and {{second}}</span> Is there a way to retrieve the resulting string from JavaScript? I&apos ...

javascriptangularjs

An effective method for converting a string into a two-dimensional array using JavaScript

One challenge I am facing is checking from a string if a specific fruit has the correct amount on a given date. I've managed to achieve this by converting the string into a 2D array and iterating over the columns. While this method works, I can't ...

javascriptarraysloops

A guide to dynamically rendering pages in Next.js

Currently, I am working on rendering a webpage on the frontend by fetching data from the database. The route for a specific webpage is hard coded at the moment, but I am looking to make it dynamic as there are multiple webpages in the database. I also want ...

javascriptreactjsaxiosnext.jsmern

What is the functionality of client-side applications?

I am new to web development and my programming background is primarily focused on algorithms and creating visualization tools using local Windows forms. I often distribute these tools via email as compiled exe files (C++ or C# win form) to my math students ...

javascripthtmlasp.netwebweb-applications

Is there a way to input the Sno data into the database in ascending order?

function table_insert(lease_ids){ var lease_id=lease_ids+1; var table = document.getElementById('table_data123'), rows = table.getElementsByTagName('tr'), i, j, cells, customerId; for (i = 0, j = rows.le ...

javascriptphpjqueryajax

Unable to retrieve data from PHP using AJAX request

My project consists of 3 interconnected files: index.php, functions.js, and compute.php In index.php, there is a div that triggers a function in functions.js called compute(), which sends an AJAX request to perform a task in compute.php The code in index ...

javascriptphphtmlajax

No input value provided

I can't figure out what's going wrong. In other js files, this code works fine. Here is my HTML code: <table class='table'> <tr> <th>Event</th><td><input class='for ...

javascriptjqueryhtml

Using JQuery to iterate through every unique div id in the HTML document

i am attempting to utilize jquery to iterate through each div tag that has an id of "rate". The goal is for jquery to execute a function on the individual divs. Here is my code snippet: information.html <html> <input class="rate" type="hidden ...

javascriptphpjqueryhtmlcss

Mastering the art of iterating through a JSON response

Looking to populate a combobox with data from the database. Upon accessing mystream.php?theLocation=NewYork, I receive the following JSON response: RESULT {"result": [{"theID":"36"},{"theStream":"0817-05131"},{"theLabel":"hgjbn"},{"theLocation":"NewYork ...

javascriptjqueryjson

"Enhancing user experience through file uploads using the onchange event

I'm currently working on implementing file upload functionality using the onchange event. I encountered an error stating that 'file is not defined.' //html file <input type="file" style="display: none;" onchange="angular.element(th ...

javascriptjqueryangularjs

Is your Node.js HTTP Request failing to function properly?

I am currently working on creating an HTTP Request function where all requests are directed to the same domain but with different file names. Unfortunately, I am encountering a problem where nothing is being displayed in the console and no data is being r ...

javascriptnode.js

Having trouble accessing my API through localhost with NextJS

I'm currently working on an app that involves fetching data from my own API. The goal is to retrieve user-specific information and use it within the app. However, I've encountered a roadblock with CORS headers and I'm unsure of how to procee ...

javascriptnext.js

toggle between utilizing the page object API and the primary Nightwatch API

Currently, I am incorporating the page object model alongside nightwatch for my testing procedures. Encountering challenges while trying to interact with an element led me to execute some jquery. However, the 'execute' command is not featured in ...

javascriptselenium-webdrivernightwatch.js

Issues with the HTML required attribute not functioning properly are encountered within the form when it is

I am encountering an issue with my modal form. When I click the button that has onclick="regpatient()", the required field validation works, but in the console, it shows that the data was submitted via POST due to my onclick function. How can I resolve thi ...

javascriptajaxformscodeigniterbootstrap-modal

Showcasing solely the latest entry in the database utilizing nodeJS

I am having an issue with my code where it is only displaying the last record from the database. How can I modify it to display all the records from the database using nodeJS? Any assistance would be greatly appreciated. Thank you. var express = require ...

javascriptnode.jsexpress

Initializing ng-app with a specific name will prevent the initialization of variables

Here is the code snippet I am working with: <div ng-app="" ng-init="show_login=false;count=0"> <button> ng-click="show_login=!show_login;count=count+1">INSPIRE</button> <form ng-show="show_login"> Username <input type="t ...

javascriptangularjsangularjs-directiveangularjs-controller