Night Dreaming (by Sudar)

I wanted to visualize data using graphs in one of the Android app that I was developing and found that Android SDK don’t provide a good graphing API, which you can use out of the box.

You have to either using Canvas 2D graphics to draw your graphs from scratch or use some commercial components.

If you can assume that some form of Internet connection will be available then you can use Google Graphs API to get the graph and embed it in a webview control. But I didn’t wanted to make that assumption and so I started to search for a good graph component, which I can use in my app.

After some frustrated search attempts, I stumbled upon a wiki at rapid android, which explained, how you can use jQuery based JavaScript library flot to draw graphs for android. At first I dismissed it, since I didn’t wanted to assume that an active Internet connection would be available for my app. But after reading it for the second time, I realized that the graphs could be drawn using HTML and JavaScript files stored locally, without the need to be connected.

So I wrote a sample app to try it out and it really worked out great. I thought of posting the source code and a little writeup about it so that it would be useful for others as well.

Goal

So my goal was to create graphs in android using any JavaScript or HTML that are stored locally. The app and the graphs should work even if access to Internet is not available.

Flot

Flot is a jQuery based JavaScript library that was easy to use and created powerful and feature-rich graphs. The main advantage of flot is that it is completely compatible with the browser that is available in android.

Setting up webview

The first thing that we have to do is to setup webview, which will be rendering the HTML page, on which we will be drawing the graph. You can add the webview control to your android layout.xml file using the following code.

Once it is added to your layout.xml page, you can access it in your activity using the following code.

Adding the HTML page to assets folder

The next step is to place the HTML, CSS and JavaScript files into the /assets folder. You should have the files only in the assets folder and not in any arbitrary folder because webview can only open files which are placed in the /assets folder.

Also add the flot and jQuery files into the /assets folder and refer to them with relative urls in your HTML file. You can also checkout the HTML file that I have created for reference.

Once you add the HTML file, you can load it in your webview using the following code snippet.

Connecting Java and JavaScript

We will be adding an interface to the webview  (by calling the addJavascriptInterface method) which will allow us call JavaScript methods from the Java code.

In the Java side, we have to create a separate class, which can be used to interact with JavaScript and pass data between the two worlds. Check out the following code snippets to find out how to do it.

Check out the StatsGraphHandler class in my sample project for reference.

Enjoy your graph

That’s it 🙂 Fire up your app and you can see the excellent graph generated.

Advanced usage

You can also add some buttons in the HTML page, which can directly interact with the graph. For other options, check out flot’s documentation.

Sample Code

You can download the complete code of the sample app that I created from my github account.

Links

• Flot
• Complete Source code
• Documentation about Webview