The HTML chart is not compatible with a compact Android WebView

I am facing an issue with resizing a circle diagram from Chart.js inside a small WebView. The Width and Height of the WebView are set to 25dp, but the circle diagram does not resize properly to fit this size.

Here is the HTML code for the circle chart:

<!doctype html>
<html>
    <head>
        <script src="chart.min.js"></script>
        <style>
            html, body
        {
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="myChart" style="width:100%; height:80%;"></canvas>      

    <script>

        var chartData = [
  dataprotein,
  datafat,
  datacarb
];

        var data = {
        datasets: [{
                borderWidth: 0,
                data: chartData,
                    backgroundColor: [
                        '#FF604E',
                        '#4666FF',
                        '#47CC6F',
                    ]

            }],

        };

        var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
            // The type of chart we want to create
            type: 'pie',

            // The data for our dataset
            data: data
        });

    </script>
</body>

Answer №1

When loading a chart in a webview as the sole component, consider using setLoadWithOverviewMode to enable "Overview mode." This will adjust the width of the HTML content to fit the screen. For more information, refer to the documentation here

To implement this feature, use the following code snippet: (Make sure to set it before loading your HTML content into the webview)

webView.getSettings().setJavaScriptEnabled(true); //Enable JavaScript if used for creating the chart
webView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT); 
webView.getSettings().setDomStorageEnabled(true); //Enable DOM storage if needed in your scripts
webView.getSettings().setLoadWithOverviewMode(true); //Load the webview in Overview mode to fit the content to screen width

Afterwards, proceed to load your HTML content into the webview

Answer №2

If you want to display a circular chart using Chart.js, you can implement the following code:

webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setDomStorageEnabled(true);

webView.setWebViewClient(new WebViewClient(){

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {

        progDailog.show();
        view.loadUrl(url);

        return true;
    }

    @Override
    public void onPageFinished(WebView view, final String url) {
        progDailog.dismiss();
    }
});

webView.loadUrl(url);

Answer №3

    Enable JavaScript in the web view
    Set loading mode to overview
    Use wide viewport for better display
    Enable DOM storage for enhanced functionality

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

Creating a navigation bar with a logo: A step-by-step guide

I'm trying to create a subnav below my navbar with the text aligned to the right and the logo positioned on the left. However, I'm facing issues with moving the text to the right and adjusting the position of the logo. How can I move the logo dow ...

Having trouble with the unresponsive sticky top-bar feature in Zurb Foundation 5?

According to the information provided on this website, it is recommended to enclose the top-bar navigation within a div element that has both the class "contain-to-grid" and "sticky". However, I have noticed that while the "contain-to-grid" class exists in ...

Is it possible to include an element id in a CSS URL request?

I have an SVG file containing a series of <symbol> elements, each with unique ids. What I am trying to achieve is to use the background-image property in an HTML file to set the element with the id I choose, like this: background-image: url(“sprite ...

I need to temporarily conceal my header for 4.5 seconds to accommodate a popup that is currently visible

Could anyone offer some advice on how to temporarily hide the header of my website for about 4.5 seconds while a popup animation is running? The issue is that the header loads before the animation, causing it to look unprofessional. The URL of my website ...

Button hover in Chrome causing problems with Leaflet map

Since yesterday, I have been experiencing issues with the buttons on my page. chrome : Version 61.0.3163.100 (Build officiel) (64 bits) I do not encounter any problems with Firefox. The problem arises when I select text on my overlay; the overlay beco ...

How can I assign an attribute to an element that has been dynamically generated?

Upon receiving a response from a $.post, I found that it contains various elements including <a> and <img>. To prevent the <a> element from performing its default actions when clicked, and to disable the draggable option for both the < ...

Unable to apply nativeElement.style.width property within ngOnChanges lifecycle method

My current task involves adjusting the width of containers while also monitoring changes in my @Input since the DOM structure is dependent on it. @Input('connections') public connections = []; @ViewChildren('containers', { read: Elemen ...

Creating a unique Angular 2 Custom Pipe tutorial

I've come across various instances of NG2 pipes online and decided to create one myself recently: @Pipe({name: 'planDatePipe'}) export class PlanDatePipe implements PipeTransform { transform(value: string): string { return sessionStor ...

Is it possible to convert the information from <input type="file"/> into an image on the client-side?

As mentioned, I currently have this code: <input type="file" accept="image/png, image/jpeg" onChange={(e) => onHandleProfileImageChange(e)} ></input> I receive the file's data and send it to the server. On the server side, ...

What is the functionality of a generic ListAdapter?

Hello, I am new to this. Please forgive me if my question seems silly. I am interested in creating a generic Adapter class that implements the ListAdapter interface. I need to override certain functions like getView. I believe that the getView function i ...

Any solutions for repairing the hyperlink within the modal class on Bootstrap 5?

I've created a template to display posts, each with its own post.id. There's also a button that triggers a modal, and the "yes" button within the modal should delete the post with the corresponding post.id that I clicked on. However, when I cli ...

The calabash-android tool runs tests on an iPhone simulator

Recently, I've been working on a cross-platform test using calabash. In an attempt to test an android app, I used the command: calabash-android run -p android However, instead of running on the android device, calabash seemed to be targeting the ...

Is it necessary to upload a file in order to view a webpage? Could it be that my coding skills

Here's a simple concept: when you navigate to the same webpage, a different file should be uploaded based on whether you click on <a> elements labeled as tracks or sets. However, my code seems to be malfunctioning. Any ideas? Below is the HTML ...

Utilizing the ajaxForm plugin within a view that is generated as an AJAX response

As I develop a messaging system for my website, I have implemented a flat mailbox design. This means that accessing the inbox or composing a new message does not navigate to a different page; instead, it toggles between div elements. When a user clicks on ...

Tips for extracting span data with Rvest in the R programming language

My typical method for gathering data from websites involves using "SelectorGadget". However, I am encountering some difficulty while attempting to scrape a particular website. The structure of the HTML on this site is as follows: <div class="col-s ...

Interactive display with dynamic dashboard design

The layout of the screen will be similar to a "dashboard," but with dynamic settings. Imagine that when the app starts, you determine how many items need to be displayed on the dashboard screen. For example, if there are two items, it will look like this: ...

Image spotlight effect using HTML canvas

I am currently seeking a solution to create a spotlight effect on an HTML canvas while drawing an image. To darken the entire image, I used the following code: context.globalAlpha = 0.3; context.fillStyle = 'black'; context.fillRect(0, 0, image. ...

Angular JS basic API: Displaying only information that starts with the term 'request'

I've been given the task of developing a straightforward AngularJS API. I have managed to set up the basics for displaying data, but I'm facing an issue where the table only retrieves data from the JSON file if it starts with "request". As a resu ...

Error in building a Kivy app: Unable to locate a compatible version for the required package 'http'

As a novice in GUI development, I am currently working on creating a Kivy app that will initiate an HTTP server using http.server and display it using an Android WebView component. This implementation involves threading to set up the server. Essentially, ...

Place a picture and words within a submit button

I need assistance with aligning text and a small airplane image on a submit button. Currently, the text is overlapping the image and I am unsure how to fix this issue. How can I adjust the position of the text to display to the right of the button? Is ther ...