As an alternative to creating Android charts in pure Java, an interesting possibility exists for creating charts using the handy old WebView and HTML/Javascript approach.

Initially, I know….most people would’nt prefer this approach…but if you give it some thought, it can open a whole range of other possibilities to explore!

NOTE to self:
RGraph uses the HTML5 Canvas component, which is NOT accommodated in the webkit packaged with Android 1.5. RGraph works nicely & tested with Android 2.1 and 2.2.

Example of the HTML/Javascript approach:

  1. Calendar using Epoch
  2. 3D-Rotating cube uses HTML/Javascript

Note: I know it silly but the RGraph version got its own: Android RGraph Charting

Download: TestAndroidGraphView

Steps involved:

  1. Create an assets directory for HTML files – Android internally maps it to file:///android_asset/ (note singular asset)
  2. Copy flot_graph.html into it: res/assets/flot_graph.html
  3. Create a javascript directory: res/assets/javascript/flot

Some notes:

  • Ability to interaction with the plot/chart via Javascript  by checking data series

Note: As you guys/gals may have noticed, the data values are hard-coded..(naughty naughty naughty). This was done to keep things simple as possible. Ideally the data would come from a data source/content provider such as SQLite or Web service. I like the Active Record approach and will provide some details in my next article on doing Active Record for Android android-active-record

Screen Orientation/Rotation Changes in Android .
Bumping my own Page/Thread – you cant get any more ridiculous than me:
Wanna do cheap tricks with your Android: Say you have a list of data values in a ListView
and upon device rotation change the view automatically changes to Landscape view with a graphical chart view plot. Passing parameters data values between Activity Views using
Intent “extras” Bundles.


Javascript Interaction – Select data set to display

Zoomable Controls:

Steps involved:

  1. Create the XML-Layout file wherein you declare the WebView holder
  2. Create the HTML and include the Javascript code
  3. Create the Android Activity

1. Create the XML-Layout file declaring the WebView
File: graphview.xml

<?xml version="1.0" encoding="utf-8"?>


2. Create the HTML and include the Javascript code
File: flot_graph.html

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Flot Examples</title> 
    <link href="./javascript/flot/examples/layout.css" rel="stylesheet" type="text/css"></link> 
    <!--[if IE]><script language="javascript" type="text/javascript" src="./javascript/flot/excanvas.min.js"></script><![endif]--> 
    <script language="javascript" type="text/javascript" src="./javascript/flot/jquery.js"></script> 
    <script language="javascript" type="text/javascript" src="./javascript/flot/jquery.flot.js"></script> 
    <div id="placeholder" style="width:600px;height:300px;"></div> 
    <p id="choices">Show:</p> 
<script id="source" language="javascript" type="text/javascript"> 
$(function () {
    var datasets = {
        "Symptoms": {
            label: "Symptoms",
            data: [[1988, 10], [1989, 20], [1990, 10], [1991, 30], [1992, 40]]
        "Reactions": {
            label: "Reactions",
                        data: [[1988, 0], [1989, 0], [1990, 10], [1991, 30], [1992, 40]]
        "Injections": {
            label: "Injections",
                        data: [[1988, 0], [1989, 0], [1990, 0], [1991, 30], [1992, 40]]
    // hard-code color indices to prevent them from shifting as
    // countries are turned on/off
    var i = 0;
    $.each(datasets, function(key, val) {
        val.color = i;
    // insert checkboxes 
    var choiceContainer = $("#choices");
    $.each(datasets, function(key, val) {
        choiceContainer.append('<br/><input type="checkbox" name="' + key +
                               '" checked="checked" id="id' + key + '">' +
                               '<label for="id' + key + '">'
                                + val.label + '</label>');
    function plotAccordingToChoices() {
        var data = [];
        choiceContainer.find("input:checked").each(function () {
            var key = $(this).attr("name");
            if (key && datasets[key])
        if (data.length > 0)
            $.plot($("#placeholder"), data, {
                yaxis: { min: 0 },
                xaxis: { tickDecimals: 0 }

3. Create the Android Activity

import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

 * Test for Flot/Javascript for plotting on Android
 * @author wagied davids
public class Main extends Activity

		/** Called when the activity is first created. */
		public void onCreate(Bundle savedInstanceState)

				// Get a reference to the declared WebView holder
				WebView webview = (WebView) this.findViewById(;

				// Get the settings
				WebSettings webSettings = webview.getSettings();

				// Enable Javascript for interaction

				// Make the zoom controls visible

				// Allow for touching selecting/deselecting data series

				// Set the client
				webview.setWebViewClient(new WebViewClient());
				webview.setWebChromeClient(new WebChromeClient());

				// Load the URL