Use Android WebView and Google Chart API to display data
Use Android WebView and Google Chart API to display data March 18th, 2010<转载>
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);The result:
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);
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);The result:
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();
}
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.
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.
原文:http://blog.kurtchen.com/2010/03/18/android_webview_google_chart.html