Menu
I have a WebView where Width and Height is 25dp. In this small WebView I want to show a circle digram from Chart.js, but it does not resize to fit the small WebView I have created.
the HTML 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>
675
If the chart is the only thing you load up in webview. You can use setLoadWithOverviewMode when getting the settings for the webview to enable your webview to go into Overview mode which means the html content's width will be set to fit your screen. you can checkout the full detail here
The code would be like this. (Remember to set it before you load your HTML content into webview)
webView.getSettings().setJavaScriptEnabled(true); //enable it since you're using js to create your chart
webView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);
webView.getSettings().setDomStorageEnabled(true); //incase you're using some DOM in your js
webView.getSettings().setLoadWithOverviewMode(true); //This code load your webview into overview mode, fit your html to the screen width
and afterwards, finally load your HTML to your webview
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
