본문 바로가기

프로그래밍/안드로이드

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: ,

Relate Posts: