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:

저작자 표시
신고

티스토리 툴바