Use Android WebView and Google Chart API to display data

 Google chart tool is a great tool to visualize data, you can easily to do HTTP GET or POST to get the chart image. And on Android we can use WebView to display Google chart in very easy steps.

1, Put the WebView inside the layout

<?xml version="1.0" encoding="utf-8"?>
           
    <WebView android:id="@+id/char_view"
             android:layout_width="fill_parent"
             android:layout_height="fill_parent"
             android:visibility="gone"/>
   
</LinearLayout>

2, Use WebView.loadUrl to call Google Chart API and show the chart

WebView mCharView = (WebView) findViewById(R.id.char_view);
mUrl = "http://chart.apis.google.com/chart?cht=bvg&chs=250x150&chd=s:Monkeys&chxt=x,y&chxs=0,ff0000,12,0,lt|1,0000ff,10,1,lt";
mCharView.loadUrl(mUrl);

    The result:

    In another way, you can put several chart in one page, that is, to create the html by yourself, and let WebView to display it.

WebView mCharView = (WebView) findViewById(R.id.char_view);
mCharView.loadData(getData(), "text/html", "utf-8");

....

    private String getData() {
        StringBuilder sb = new StringBuilder();

        sb.append("<img src=\"http://0.chart.apis.google.com/chart?cht=bvg&chs=250x150&chd=s:Monkeys&chxt=x,y&chxs=0,ff0000,12,0,lt|1,0000ff,10,1,lt\"/><br>");

        sb.append("<img src=\"http://1.chart.apis.google.com/chart?cht=ls&chs=250x150&chd=t:27,25,60,31,25,39,25,31,26,28,80,28,27,31,27,29,26,35,70,25&chxt=x,y&chxs=0,ff0000,12,0,lt|1,0000ff,10,1,lt\"/><br>");

        sb.append("<img src=\"http://2.chart.apis.google.com/chart?cht=ls&chs=250x150&chd=t:27,25,60,31,25,39|25,31,26,28,80,28,27,31|27,29,26,35,70,25&chxt=x,y&chxs=0,ff0000,12,0,lt|1,0000ff,10,1,lt&chco=FF0000,00FF00,0000FF&chtt=Site+visitors&chdl=NASDAQ|FTSE100|DOW&chf=c,lg,90,FFE7C6,0,76A4FB,0.5&chem=y;s=bubble_icon_text_small;d=ski,bb,Hi,FFFFFF;dp=2;ds=0\"/><br>");

        sb.append("<img src=\"http://3.chart.apis.google.com/chart?chs=250x150&cht=lc&chd=t1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6&chm=F,,1,1:4,20\"/><br>");

        sb.append("<img src=\"http://4.chart.apis.google.com/chart?chs=150x50&cht=tx&chl=x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}\"/><br>");

        sb.append("<img src=\"http://5.chart.apis.google.com/chart?chs=250x150&cht=gom&chxt=x,y&chxl=0:|Groovy|1:|slow|faster|crazy\"/><br>");

        sb.append("<img src=\"http://6.chart.apis.google.com/chart?chs=250x150&cht=t&chtm=africa&chld=DZEGMGAOBWNGCFKECGCVSNDJTZGHMZZM&chco=FFFFFF,FF0000,FFFF00,00FF00&chd=t:0,100,50,32,60,40,43,12,14,54,98,17,70,76,18,29&chf=bg,s,EAF7FE\"/><br>");

        sb.append("<img src=\"http://7.chart.apis.google.com/chart?chs=350x150&cht=p3&chl=January|February|March|April&chd=t:20,40,25,15\"/><br>");

        sb.append("<img src=\"http://8.chart.apis.google.com/chart?chs=250x150&cht=qr&chl=Hello+world&choe=UTF-8\"/><br>");

        sb.append("<img src=\"http://9.chart.apis.google.com/chart?chs=250x150&cht=s&chd=t:12,87,75,41,23,96,68,71,34,9|98,60,27,34,56,79,58,74,18,76|84,23,69,81,47,94,60,93,64,54&chco=FF0000|0000FF&chdl=Cats|Dogs&chxt=x,y\"/><br>");

        return sb.toString();
    }

    The result:

    BTW, you can also use HTTPClient to save the chart as file.

    At last, there's an open source project: chartdroid, to provide native chart support, you just need to pass the URI of your content provider to get the chart view.

Technorati Tags: Android, chart

Relate Posts:

• 金额大写转换器
• Eric Cartman plus Android
• Use SimpleAdapter to make a list with icons
• Visible inactive activity is killed on configuration change
• Use AsyncQueryHandler to do async query

Tags: Android chart webview

Posted in |

Trackback:http://blog.kurtchen.com/2010/03/18/android_webview_google_chart.html?code=aglibG9nLWt1cnRyDQsSBUVudHJ5GJnsAww