Android WebView is an android UI widget which is used to open any web URL or load html data. WebView is used to show web page in android activity. In simple words, Android WebView is a View that displays web pages. In this tutorial lets see how to add CanvasJS charts to android app.
1. Create a new project in Android Studio
Create a new project with empty activity.
2. Add Asset Folder & Create HTML file
Add asset folder in the newly created app & create html file in the folder, let's call it as "column chart.html". Paste the following code in the html file.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light1", // "light2", "dark1", "dark2"
animationEnabled: true, // change to true
title:{
text: "Basic Column Chart"
},
data: [{
// Change type to "bar", "area", "spline", "pie",etc.
type: "column",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="./canvasjs.min.js"></script>
</body>
</html>
Download & save canvasjs.min.js file in the assets folder. You can download CanvasJS library from their official download page.
3. Create HTML Activity
By default, android studio would create activity_main.xml. Update the code of that file with the below one which creates a layout with webview.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
4. Update the Activity & Load HTML File
In MainActivity.java, enable JavaScript for webview & load html file that you saved in assets folder.
package com.canvasjs.charts;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView canvasJSChartView = findViewById(R.id.webView);
canvasJSChartView.setWebViewClient(new WebViewClient());
canvasJSChartView.getSettings().setJavaScriptEnabled(true); //Enable Javascript for WebView
canvasJSChartView.loadUrl("file:///android_asset/column chart.html");
}
}
Let's try to run your application. To run the app from android studio, open one of your project's activity files, select the device (if you have connected android device to your machine) / emulator device and click Run. Running the project should show you a CanvasJS column chart.
Download Sample from Github.
Top comments (0)