Plotting on android

1. Plotting on android

2. New app, ShowPlot • Get achartengine • http://code.google.com/p/achartengine/downloads/list • Get jar • Add aChartEngine.jar • Right-click on src, • select build path, • select “configure build path” • In libraries tab, select add external jar, browse for jar that you downloaded • In order and export tab, select jar • Layout • add linear layout • In xml, make added linear layout to be • <LinearLayoutandroid:id="@+id/chart" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" />

3. A plot has two parts • Data • Renderer • We make functions to define each part • Data • public XYMultipleSeriesDatasetgetMyData() { • XYMultipleSeriesDatasetmyData = new XYMultipleSeriesDataset(); • XYSeriesdataSeries = new XYSeries("data"); • dataSeries.add(0,2); • dataSeries.add(1,1); • dataSeries.add(2,4); • dataSeries.add(3,3); • dataSeries.add(4,2); • dataSeries.add(5,6); • myData.addSeries(dataSeries); • return myData; • }

4. renderer • public XYMultipleSeriesRenderergetMyRenderer() { • XYSeriesRenderer r = new XYSeriesRenderer(); • r.setColor(Color.BLUE); • r.setLineWidth(10); • r.setPointStyle(PointStyle.SQUARE); // CIRCLE, DIAMOND , POINT, TRIANGLE, X • r.setFillPoints(true); // not for point or x • // don't know how to set point size or point color • r.setFillBelowLine(true); • r.setFillBelowLineColor(Color.WHITE); • XYMultipleSeriesRenderermyRenderer = new XYMultipleSeriesRenderer(); • myRenderer.addSeriesRenderer(r); • return myRenderer; • }

5. Make plot • Add member variable • private GraphicalViewmChartView; • In onCreate, add • if (mChartView == null) { • LinearLayout layout = (LinearLayout) findViewById(R.id.chart); • mChartView = ChartFactory.getLineChartView(this, getMyData(),getMyRenderer()); • layout.addView(mChartView); • } else { • mChartView.repaint(); // use this whenever data has changed and you want to redraw • } • Make onResume • @Override • protected void onResume() { • super.onResume(); • if (mChartView != null) { • mChartView.repaint(); • } • } • run

6. Make another set of data • Add to getMyData, just before return • XYSeriesdataSeries2 = new XYSeries("data"); • dataSeries2.add(0,1); • dataSeries2.add(1,1); • dataSeries2.add(2,2); • dataSeries2.add(3,1); • dataSeries2.add(4,2); • dataSeries2.add(5,4); • myData.addSeries(dataSeries2);

7. More renderer • Must have same number of renderer entries as data sets • In getMyRenderer, just before return, add • XYSeriesRenderer r2 = new XYSeriesRenderer(); • r2.setColor(Color.RED); • r2.setLineWidth(10); • r2.setPointStyle(PointStyle.DIAMOND); • r2.setFillPoints(true); • r2.setFillBelowLine(false); • myRenderer.addSeriesRenderer(r2); • run

8. Other plot types • Replace • mChartView = ChartFactory.getLineChartView(this, getMyData(),getMyRenderer()); • With • mChartView = ChartFactory.getBarChartView(this, getMyData(),getMyRenderer(), BarChart.Type.DEFAULT); • Or with, • mChartView = ChartFactory.getBarChartView(this, getMyData(),getMyRenderer(), BarChart.Type.STACKED); • Or with • mChartView = ChartFactory.getScatterChartView(this, getMyData(),getMyRenderer());

9. Time series • The x-axis should be time • public XYMultipleSeriesDatasetgetMyTimeSeriesData() { • XYMultipleSeriesDatasetmyData = new XYMultipleSeriesDataset(); • TimeSeriesdataSeries = new TimeSeries("data"); • dataSeries.add(new GregorianCalendar(2011, 5, 9, 18, 15, 1).getTimeInMillis(),0); • dataSeries.add(new GregorianCalendar(2011, 5, 9, 18, 15, 5).getTimeInMillis(),2); • dataSeries.add(new GregorianCalendar(2011, 5, 9, 18, 15, 15).getTimeInMillis(),1); • dataSeries.add(new GregorianCalendar(2011, 5, 9, 18, 15, 25).getTimeInMillis(),3); • dataSeries.add(new GregorianCalendar(2011, 5, 9, 18, 15, 35).getTimeInMillis(),1); • dataSeries.add(new GregorianCalendar(2011, 5, 9, 18, 15, 55).getTimeInMillis(),2); • myData.addSeries(dataSeries); • return myData; • } • !Change getMyRendererto only make a single renderer entry! • In onCreate, put • mChartView = ChartFactory.getTimeChartView(this, getMyTimeSeriesData(),getMyRenderer(), null); • Run, note x-axis is in time

10. bubble • public XYMultipleSeriesDataset getMyData3() { • XYMultipleSeriesDatasetmyData = new XYMultipleSeriesDataset(); • XYValueSeriesdataSeries = new XYValueSeries("data"); • dataSeries.add(0,0,1); • dataSeries.add(1,2,2); • dataSeries.add(2,1,3); • dataSeries.add(3,3,2); • dataSeries.add(4,1,1); • dataSeries.add(5,2,0); • myData.addSeries(dataSeries); • return myData; • } • In onCreate, • mChartView = ChartFactory.getBubbleChartView(this, getMyData3(),getMyRenderer());