Android OS Version
Due to many Android operating system (OS) versions, we have to choose which OSes to support. In each revision of the OS, UI components such as WebView behave differently. WebView in Android 4.4 (KitKat, API 19) is based on Chromium, which supports standard HTML 5 and CSS31,2. Previous Android versions (API 18 or lower) will operate in quirks mode with non-standard web features2.
Focusing on displaying charts locally on the device requires allowing WebView to access files from the URL. This is only required on Android 4.3 (Jelly Bean, API 18) or higher:
We also noted that older OSes below Android 3.0 (Honeycomb, API 11) have a non-conformant WebView to standard web standards. For example, the performance is subpar. In order to compensate for these behavioural differences,we decided to disable the chart feature for these older OSes.
Project Setup for WebView
Like all Android applications, we create an XML layout file for the UI and set the necessary permissions in the app manifest.
Setting up the Android layout is straightforward:
Note: There is no need to include
<uses-permission android:name="android.permission.INTERNET" /> in the
AndroidManifest.xml because we are loading HTML files locally, which does not require Internet access.
Loading a WebView Chart
Next, we’ll add the HTML to load in the proper directory and configure the WebView control. We’ll also have to change the HTML slightly for showing in a mobile web browser.
To load files from the URL requires placing files in
<project dir>/src/assets/ and then loading HTML:
To make sure that the chart is displayed properly, include the following in the HTML:
Interacting with the WebView
For our application, the charts are not interactive. We disable touch events on the HTML page. By disabling touch events, we do not have to deal with unnecessary zooming, scrolling, and text selection:
We ran into a problem when leaving the activity. WebView will display the following message in logcat3:
To prevent this message from showing up use WebView stopLoading() method:
Web Chart Libraries
We selected Chart.js to display the bar and pie charts. This chart package is easy and simple to use. It does not require jQuery. We loaded the chart package in our own chart using the following HTML:
Chart.js does not provide axis titles or a legend in the bar chart. For the pie chart, it does not provide the option to label the pie chart sections. However, a forked version of Chart.js adds these features.
An example using the pie chart with the forked Chart.js:Flot.js
Flot.js provides customization through plugins. It requires jQuery, which is included in the package or can be downloaded directly from the JQuery website. Load the script just before the end of the HTML:
jquery.colorhelpers.js: makes it easier to add color to the chart
jquery.flot.js: the chart script
jquery.flot.categories.js: allows plotting text or categories with the data
jquery.flot.tickrotor.js: allows rotation of the x- and/ or y-axis tick labels4
jquery.flot.axislabels.js: display x- and y-axis labels5
The following shows how to use the plugins, this is placed after loading the .js files: