DEV Community

Vishwas R
Vishwas R

Posted on • Updated on

How to Add CanvasJS Charts to your Android App?

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.
Android Studio 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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");
    }
}
Enter fullscreen mode Exit fullscreen mode

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.

CanvasJS Column Chart in Android App

Download Sample from Github.

Top comments (0)