Line Chart in a Custom XML Layout
In this post, we will create a line chart in a custom layout.
Step 1: Basic Setup for AChartEngine with LineChartExample as project name
Step 2: Update the file res/values/strings.xml
1
2
3
4
5
6
7
| <resources> <string name="app_name">AChartEngineLineChart</string> <string name="hello_world">Hello world!</string> <string name="menu_settings">Settings</string> <string name="title_activity_main">MainActivity</string> <string name="str_btn_chart">Income vs Expense Line Chart</string></resources> |
Step 3: Update the layout of the MainActivity in the file res/layout/activity_main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:id="@+id/tv_title" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/str_tv_title" android:gravity="center_horizontal" /> <LinearLayout android:id="@+id/chart_container" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/tv_title" > </LinearLayout></RelativeLayout> |
Note : The line chart will be added to chart_container at run time.
Step 4: Update the file res/values/styles.xml
1
2
3
| <resources> <style name="AppTheme" parent="android:Theme" /></resources> |
Step 5: Update the file res/values-v11/styles.xml
1
2
3
| <resources> <style name="AppTheme" parent="android:Theme.Holo" /></resources> |
Step 6: Update the file res/values-v14/styles.xml
1
2
3
| <resources> <style name="AppTheme" parent="android:Theme.Holo" /></resources> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
| package in.revan.achartenginelinechartcustomlayout;import org.achartengine.ChartFactory;import org.achartengine.chart.PointStyle;import org.achartengine.model.XYMultipleSeriesDataset;import org.achartengine.model.XYSeries;import org.achartengine.renderer.XYMultipleSeriesRenderer;import org.achartengine.renderer.XYSeriesRenderer;import android.app.Activity;import android.graphics.Color;import android.os.Bundle;import android.view.Menu;import android.view.View;import android.widget.LinearLayout;public class MainActivity extends Activity { private View mChart; private String[] mMonth = new String[] { "Jan", "Feb" , "Mar", "Apr", "May", "Jun", "Jul", "Aug" , "Sep", "Oct", "Nov", "Dec" }; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); openChart(); } private void openChart(){ int[] x = { 1,2,3,4,5,6,7,8 }; int[] income = { 2000,2500,2700,3000,2800,3500,3700,3800}; int[] expense = {2200, 2700, 2900, 2800, 2600, 3000, 3300, 3400 }; // Creating an XYSeries for Income XYSeries incomeSeries = new XYSeries("Income"); // Creating an XYSeries for Expense XYSeries expenseSeries = new XYSeries("Expense"); // Adding data to Income and Expense Series for(int i=0;i<x.length;i++){ incomeSeries.add(x[i], income[i]); expenseSeries.add(x[i],expense[i]); } // Creating a dataset to hold each series XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset(); // Adding Income Series to the dataset dataset.addSeries(incomeSeries); // Adding Expense Series to dataset dataset.addSeries(expenseSeries); // Creating XYSeriesRenderer to customize incomeSeries XYSeriesRenderer incomeRenderer = new XYSeriesRenderer(); incomeRenderer.setColor(Color.WHITE); incomeRenderer.setPointStyle(PointStyle.CIRCLE); incomeRenderer.setFillPoints(true); incomeRenderer.setLineWidth(2); incomeRenderer.setDisplayChartValues(true); // Creating XYSeriesRenderer to customize expenseSeries XYSeriesRenderer expenseRenderer = new XYSeriesRenderer(); expenseRenderer.setColor(Color.YELLOW); expenseRenderer.setPointStyle(PointStyle.CIRCLE); expenseRenderer.setFillPoints(true); expenseRenderer.setLineWidth(2); expenseRenderer.setDisplayChartValues(true); // Creating a XYMultipleSeriesRenderer to customize the whole chart XYMultipleSeriesRenderer multiRenderer = new XYMultipleSeriesRenderer(); multiRenderer.setXLabels(0); multiRenderer.setChartTitle("Income vs Expense Chart"); multiRenderer.setXTitle("Year 2012"); multiRenderer.setYTitle("Amount in Dollars"); multiRenderer.setZoomButtonsVisible(true); for(int i=0;i<x.length;i++){ multiRenderer.addXTextLabel(i+1, mMonth[i]); } // Adding incomeRenderer and expenseRenderer to multipleRenderer // Note: The order of adding dataseries to dataset and renderers to multipleRenderer // should be same multiRenderer.addSeriesRenderer(incomeRenderer); multiRenderer.addSeriesRenderer(expenseRenderer); // Getting a reference to LinearLayout of the MainActivity Layout LinearLayout chartContainer = (LinearLayout) findViewById(R.id.chart_container); // Creating a Line Chart mChart = ChartFactory.getLineChartView(getBaseContext(), dataset, multiRenderer); // Adding the Line Chart to the LinearLayout chartContainer.addView(mChart); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.activity_main, menu); return true; }} |
14. Run the application
Comments
Post a Comment