Question

while developing an Android application that uses Rickshaw to draw some charts, I encountered this weird problem: on Galaxy Nexus S (having OS 4.0.4) the chart draws perfectly, while on a Motorola Defy (CyanogenMod7, having OS 2.3.7) it does not. Could this be an OS version issue? Can anyone help me with this?

Here is the code:

public class RickshawTestActivity extends Activity {
    private WebView webView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        webView = new WebView(this);

        webView.getSettings().setJavaScriptEnabled(true);

        setContentView(webView);

        webView.loadUrl("file:///android_asset/chart.html");

    }
}

And here is assets/chart.html

<!doctype>
<script src="vendor/d3.min.js"></script>
<script src="vendor/d3.layout.min.js"></script>
<script src="rickshaw.min.js"></script>

<div id="chart"></div>

<script>
    var data = [ {
        x : 1910,
        y : 92228531
    }, {
        x : 1920,
        y : 106021568
    }, {
        x : 1930,
        y : 123202660
    }, {
        x : 1940,
        y : 132165129
    }, {
        x : 1950,
        y : 151325798
    }, {
        x : 1960,
        y : 179323175
    }, {
        x : 1970,
        y : 203211926
    }, {
        x : 1980,
        y : 226545805
    }, {
        x : 1990,
        y : 248709873
    }, {
        x : 2000,
        y : 281421906
    }, {
        x : 2010,
        y : 308745538
    } ];

    var graph = new Rickshaw.Graph({
        element : document.querySelector("#chart"),
        width : 580,
        height : 250,
        series : [ {
            color : 'steelblue',
            data : data
        } ]
    });

    graph.render();
</script>

The data is valid, and all the referenced .js files are found.
This also works in my Mozilla 13 browser.

Thanks

---

EDIT:

I also tested this piece of code on different emulators and concluded that the code above works only on OS versions 3.0 and above. On OS versions below 3.0, this does not work.

Now how can I make it work? Thanks

EDIT:
I need a library that is cross-platform.

Answer 1

I assume one ore more features Rickshaw/D3 uses is not (correctly/fully) implemented in the WebKit version shipped with Android prior to 3.0. As Webkit is part of the OS you can not change or update it separately.

The only chance you have is using a different web browser app that has it’s own rendering engine – e.g. Firefox for Android has one as far as I remember.

If you need an Android app that runs on 2.1+ that I only see the possibility to embed an web-renderer in your app or use client side chart generation instead. The are some libraries available that allows you to do so:

• http://code.google.com/p/afreechart/
• http://code.google.com/p/droidcharts/

Both libraries are plain Java libraries that do not rely on JavaScript – hence they are independent of the WebKit version the OS contains.