Android / Google Chart / ImageView – sample


This is an answer to one simple question: how to implement a Google Chart graph of an Android application?
well, first use the wizard offered to facilitate the creation of our graphics,go here:
http://code.google.com/apis/chart/image/docs/chart_wizard.html
select your graph type and modify it to suit your needs,then copy the http link is on the right of the page(example:http://chart.apis.google.com/chart?chs=300×225&cht=v&chco=FF6342,ADDE63,63C6DE&chds=0,110&chd=t:100,80,60,30,30,30,10&chdl=A|B|C)
This will be the base url to create your chart based on data that you want to show.
I used a AsyncTask to load the graph, here’s the code:

private class LoadingRemoteGraph extends AsyncTask<String, Void, Bitmap> {
	private final WeakReference<ImageView> imageViewReference;
	ProgressDialog dialog = null;
	private Context context = null;
	private ImageView ivT;
	int vHeight=0;
	int vWidth = 0;

	public LoadingRemoteGraph(Context contextT, final ImageView imageView) {
		context = contextT;
		imageViewReference = new WeakReference<ImageView>(imageView);
		
		ivT=imageView;
	}

	@Override
	protected void onPreExecute() {
		dialog = ProgressDialog.show(context, "",
				getString(R.string.str_generic_progressbar), true);
	}

	@Override
	protected Bitmap doInBackground(String...params) {
		Bitmap bmGraphT = null;
		URL img = null;
		
		ViewTreeObserver vto = ivT.getViewTreeObserver();
		vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
			public void onGlobalLayout() {
				vHeight = ivT.getHeight();
				vWidth = ivT.getWidth();
			}
		});
		
		String url=params[0].replace("WIDTH_GRAPH", String.valueOf(vWidth));
		url=url.replace("HEIGHT_GRAPH", String.valueOf(vHeight));
		
		try {
			img = new URL(url);
		} catch (MalformedURLException e) {
			e.printStackTrace();
		}

		try {
			bmGraphT = BitmapFactory.decodeStream(img.openStream());
		} catch (IOException e) {
			e.printStackTrace();
		}

		return bmGraphT;
	}

	@Override
	protected void onPostExecute(Bitmap bmT) {

		if (isCancelled()) {
			bmT = null;
		}
		if (imageViewReference != null) {
			ImageView imageView = imageViewReference.get();
			if (imageView != null) {
				imageView.setImageBitmap(bmT);
			}
		}

		dialog.dismiss();
	}

}

you can use this task in the onResume method,like this:

...
@Override
public void onResume() {
	super.onResume();

	ImageView ivGraph = (ImageView) findViewById(R.id.iv_score);
	String strUrl = "http://chart.apis.google.com/chart?chxr=0,0,158&chxs=0,676767,11.5,0,_,676767&chxt=y&chbh=a&chs="
			+ "WIDTH_GRAPH"
			+ "x"
			+ "HEIGHT_GRAPH"
			+ "&cht=bvg&chco=0000FF,FF0000&chds=0,158,0,158&chd=t:"
			+ 79
			+ "|" + 30 + "&chdl=Tuo|Media&chdlp=b";

	LoadingRemoteGraph task = new LoadingRemoteGraph(ActivityTest.this,
			ivGraph);
	task.execute(strUrl);
}
...

that’s all.8y3

2 pensieri su “Android / Google Chart / ImageView – sample

    1. If you want to know how to replace the values ​​in the graph, the answer is that you should study the URL chart :p
      after that you should change the URL of the graph as I did in the example to define the height and width;usually the dataset (values ​​which appear in the graph) is found on the part of the URL that begin with chd=t: ,each value of the dataset is divided from the others by a comma (,) and each data set is divided from other datasets through a pipe (|), is very simple … hope that help.8y3

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...