generate different charts in the same activity using a spinner and achartEngine library - achartengine

Question

I am a novice in android and I am using achartEngine library to draw line Graph. what I want to do is to update the graph by using a spinner. For exmaple, if I chose the first option I will get a yellow graph and when
I swich to the second option in my spinner, the graph changes and becomes white with new title and data
for the moment I can only update the data but not the rest of the graph
package com.example.test2;
import java.text.Format;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.GregorianCalendar;
import java.util.HashMap;
import java.util.List;
import org.achartengine.ChartFactory;
import org.achartengine.GraphicalView;
import org.achartengine.chart.PointStyle;
import org.achartengine.model.SeriesSelection;
import org.achartengine.model.TimeSeries;
import org.achartengine.model.XYMultipleSeriesDataset;
import org.achartengine.renderer.XYMultipleSeriesRenderer;
import org.achartengine.renderer.XYSeriesRenderer;
import org.apache.http.NameValuePair;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import com.example.test2.R;
import android.app.Activity;
import android.app.ProgressDialog;
import android.content.Intent;
import android.graphics.Color;
import android.os.AsyncTask;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.LinearLayout;
import android.widget.Spinner;
import android.widget.TextView;
import android.widget.Toast;
public class Graphique extends Activity {
private GraphicalView mChart1;
private GraphicalView mChart2;
private TimeSeries glecimieSeries ;
private TimeSeries pressionSeries;
private XYMultipleSeriesDataset dataset;
private XYSeriesRenderer glecimieRenderer;
private XYSeriesRenderer pressionRenderer;
private XYMultipleSeriesRenderer multiRenderer;
// Progress Dialog
private ProgressDialog pDialog;
// Creating JSON Parser object
JSONParser jParser = new JSONParser();
ArrayList<HashMap<String, String>> listeappareil;
// url to get all products list
private static String url_liste_appareil ;
// JSON Node names
private static final String TAG_SUCCESS = "success";
private static String TAG_APPAREIL;
private static final String TAG_PID = "pid";
private static final String TAG_NOM = "nom";
private static final String TAG_J = "jour";
private static final String TAG_Y = "Y";
// products JSONArray
JSONArray appareil = null;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.graphique);
// getting intent data
Intent in = getIntent();
// Get JSON values from previous intent
String pid = in.getStringExtra(TAG_PID);
String nom = in.getStringExtra(TAG_NOM);
// Displaying all values on the screen
TextView lblNom = (TextView) findViewById(R.id.nom_patient);
lblNom.setText(nom);
Spinner mySpinner = (Spinner)findViewById(R.id.mesure);
ArrayAdapter adapter = ArrayAdapter.createFromResource(this, R.array.appareils, android.R.layout.simple_spinner_item);
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
mySpinner.setAdapter(adapter);
OnItemSelectedListener selectedGraph = new OnItemSelectedListener() {
public void onItemSelected(AdapterView<?> spinner, View container,
int position, long id) {
String graph = spinner.getItemAtPosition(position).toString().toLowerCase();
if(graph == "tensiometre"){
url_liste_appareil = "http://10.0.2.2/connexion_android/"+graph+".php";
TAG_APPAREIL = graph;
// Setting up chart
setupChart2();
// Start plotting chart
new ChartTask2().execute();
}else{
url_liste_appareil = "http://10.0.2.2/connexion_android/"+graph+".php";
TAG_APPAREIL = graph;
// Setting up chart
setupChart1();
// Start plotting chart
new ChartTask1().execute();
}
}
public void onNothingSelected(AdapterView<?> arg0) {
// TODO Auto-generated method stub
}
};
// Setting ItemClick Handler for Spinner Widget
mySpinner.setOnItemSelectedListener(selectedGraph);
}
private void setupChart1(){
// Creating TimeSeries for Glecimie
glecimieSeries = new TimeSeries("Glecimie");
// Creating a dataset to hold each series
dataset = new XYMultipleSeriesDataset();
// Adding Glecimie Series to the dataset
dataset.addSeries(glecimieSeries);
// Creating XYSeriesRenderer to customize glecimieSeries
glecimieRenderer = new XYSeriesRenderer();
glecimieRenderer.setColor(Color.YELLOW);
glecimieRenderer.setPointStyle(PointStyle.CIRCLE);
glecimieRenderer.setFillPoints(true);
glecimieRenderer.setLineWidth(2);
glecimieRenderer.setDisplayChartValues(true);
// Creating a XYMultipleSeriesRenderer to customize the whole chart
multiRenderer = new XYMultipleSeriesRenderer();
multiRenderer.setZoomButtonsVisible(true);
// Adding glecimieRenderer and pressionRenderer to multipleRenderer
// Note: The order of adding dataseries to dataset and renderers to multipleRenderer
// should be same
multiRenderer.addSeriesRenderer(glecimieRenderer);
// Getting a reference to LinearLayout of the MainActivity Layout
LinearLayout chartContainer = (LinearLayout) findViewById(R.id.chart_container);
// Creating a Time Chart
mChart1 = (GraphicalView) ChartFactory.getTimeChartView(getBaseContext(), dataset, multiRenderer,"dd-MMM-yyyy");
multiRenderer.setClickEnabled(true);
multiRenderer.setSelectableBuffer(10);
// Setting a click event listener for the graph
mChart1.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
Format formatter = new SimpleDateFormat("dd-MMM-yyyy");
SeriesSelection seriesSelection = mChart1.getCurrentSeriesAndPoint();
if (seriesSelection != null) {
int seriesIndex = seriesSelection.getSeriesIndex();
String selectedSeries="Glecimie";
if(seriesIndex==0)
selectedSeries = "Glecimie";
else
selectedSeries = "Pression";
// Getting the clicked Date ( x value )
long clickedDateSeconds = (long) seriesSelection.getXValue();
Date clickedDate = new Date(clickedDateSeconds);
String strDate = formatter.format(clickedDate);
// Getting the y value
int amount = (int) seriesSelection.getValue();
// Displaying Toast Message
Toast.makeText(
getBaseContext(),
"Prélèvement au " + strDate + " : " + amount ,
Toast.LENGTH_SHORT).show();
}
}
});
chartContainer.removeAllViews();
// Adding the Line Chart to the LinearLayout
chartContainer.addView(mChart1);
}
private class ChartTask1 extends AsyncTask<String, String, String>{
protected void onPreExecute() {
super.onPreExecute();
pDialog = new ProgressDialog(Graphique.this);
pDialog.setMessage("Loading data. Please wait...");
pDialog.setIndeterminate(false);
pDialog.setCancelable(false);
pDialog.show();
}
// Generates dummy data in a non-ui thread
protected String doInBackground(String... params) {
// Building Parameters
List<NameValuePair> param = new ArrayList<NameValuePair>();
// getting JSON string from URL
JSONObject json = jParser.makeHttpRequest(url_liste_appareil, "GET", param);
// Check your log cat for JSON reponse
Log.d("Tous les appareil: ", json.toString());
try{
// Checking for SUCCESS TAG
int success = json.getInt(TAG_SUCCESS);
if (success == 1) {
// products found
// Getting Array of Products
appareil = json.getJSONArray(TAG_APPAREIL);
Date[] dt = new Date[appareil.length()];
// looping through All Products
for (int j = 0; j < appareil.length(); j++) {
JSONObject p = appareil.getJSONObject(j);
// Storing each json item in variable
GregorianCalendar gc = new GregorianCalendar(2012, 10, j+1);
dt[j] = gc.getTime();
String y = p.getString(TAG_Y);
String jr = p.getString(TAG_J);
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
Date d = sdf.parse(jr);
// Adding data to Glecimie and Pression Series
glecimieSeries.add(d,Double.parseDouble(y));
multiRenderer.setXTitle("Dates");
multiRenderer.setYTitle("Prélèvements");
}
}
}catch (JSONException e) {
e.printStackTrace();
} catch (ParseException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
// Plotting generated data in the graph
protected void onPostExecute(String file_url) {
// dismiss the dialog after getting all products
pDialog.dismiss();
// updating UI from Background Thread
runOnUiThread(new Runnable() {
public void run() {
/**
* Updating parsed JSON data into the graph
* */
mChart1.repaint();
}
});
}
}
private void setupChart2(){
// Creating TimeSeries for Pression
pressionSeries = new TimeSeries("Pression");
// Creating a dataset to hold each series
dataset = new XYMultipleSeriesDataset();
// Adding Glecimie Series to dataset
dataset.addSeries(pressionSeries);
// Creating XYSeriesRenderer to customize pressionSeries
pressionRenderer = new XYSeriesRenderer();
pressionRenderer.setColor(Color.YELLOW);
pressionRenderer.setPointStyle(PointStyle.CIRCLE);
pressionRenderer.setFillPoints(true);
pressionRenderer.setLineWidth(2);
pressionRenderer.setDisplayChartValues(true);
// Creating a XYMultipleSeriesRenderer to customize the whole chart
multiRenderer = new XYMultipleSeriesRenderer();
multiRenderer.setZoomButtonsVisible(true);
// Adding glecimieRenderer and pressionRenderer to multipleRenderer
// Note: The order of adding dataseries to dataset and renderers to multipleRenderer
// should be same
multiRenderer.addSeriesRenderer(pressionRenderer);
// Getting a reference to LinearLayout of the MainActivity Layout
LinearLayout chartContainer = (LinearLayout) findViewById(R.id.chart_container);
// Creating a Time Chart
mChart2 = (GraphicalView) ChartFactory.getTimeChartView(getBaseContext(), dataset, multiRenderer,"dd-MMM-yyyy");
multiRenderer.setClickEnabled(true);
multiRenderer.setSelectableBuffer(10);
// Setting a click event listener for the graph
mChart2.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
Format formatter = new SimpleDateFormat("dd-MMM-yyyy");
SeriesSelection seriesSelection = mChart2.getCurrentSeriesAndPoint();
if (seriesSelection != null) {
int seriesIndex = seriesSelection.getSeriesIndex();
String selectedSeries="Glecimie";
if(seriesIndex==0)
selectedSeries = "Glecimie";
else
selectedSeries = "Pression";
// Getting the clicked Date ( x value )
long clickedDateSeconds = (long) seriesSelection.getXValue();
Date clickedDate = new Date(clickedDateSeconds);
String strDate = formatter.format(clickedDate);
// Getting the y value
int amount = (int) seriesSelection.getValue();
// Displaying Toast Message
Toast.makeText(
getBaseContext(),
" Prélèvement au" + strDate + " : " + amount ,
Toast.LENGTH_SHORT).show();
}
}
});
chartContainer.removeAllViews();
// Adding the Line Chart to the LinearLayout
chartContainer.addView(mChart2);
}
private class ChartTask2 extends AsyncTask<String, String, String>{
protected void onPreExecute() {
super.onPreExecute();
pDialog = new ProgressDialog(Graphique.this);
pDialog.setMessage("Loading data. Please wait...");
pDialog.setIndeterminate(false);
pDialog.setCancelable(false);
pDialog.show();
}
// Generates dummy data in a non-ui thread
protected String doInBackground(String... params) {
// Building Parameters
List<NameValuePair> param = new ArrayList<NameValuePair>();
// getting JSON string from URL
JSONObject json = jParser.makeHttpRequest(url_liste_appareil, "GET", param);
// Check your log cat for JSON reponse
Log.d("Tous les appareil: ", json.toString());
try{
// Checking for SUCCESS TAG
int success = json.getInt(TAG_SUCCESS);
if (success == 1) {
// products found
// Getting Array of Products
appareil = json.getJSONArray(TAG_APPAREIL);
Date[] dt = new Date[appareil.length()];
// looping through All Products
for (int j = 0; j < appareil.length(); j++) {
JSONObject p = appareil.getJSONObject(j);
// Storing each json item in variable
GregorianCalendar gc = new GregorianCalendar(2012, 10, j+1);
dt[j] = gc.getTime();
String y = p.getString(TAG_Y);
String jr = p.getString(TAG_J);
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
Date d = sdf.parse(jr);
// Adding data to Glecimie and Pression Series
pressionSeries.add(d,Double.parseDouble(y));
multiRenderer.setChartTitle("la pression");
multiRenderer.setXTitle("Dates");
multiRenderer.setYTitle("Prélèvements");
}
}
}catch (JSONException e) {
e.printStackTrace();
} catch (ParseException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
// Plotting generated data in the graph
protected void onPostExecute(String file_url) {
// dismiss the dialog after getting all products
pDialog.dismiss();
// updating UI from Background Thread
runOnUiThread(new Runnable() {
public void run() {
/**
* Updating parsed JSON data into the graph
* */
mChart2.repaint();
}
});
}
}
// Initiating Menu XML file (menu.xml)
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_graphique, menu);
return (super.onCreateOptionsMenu(menu));
}
}
Please help

Answer 1

In order to refresh both charts, you need to call repaint on both:
mChart1.repaint();
mChart2.repaint();

Answer 2

You can update the color and other values of the chart by passing values.
In openChart() method you can pass the values.
private void openChart(final String[] code, final int[] distribution,final int color){
defaultRenderer.setBackgroundColor(color);
}