본문 바로가기
C++ 200제/코딩 IT 정보

안드로이드 AChartEngine 사용법, Temperature 실시간 예제

by vicddory 2017. 6. 22.

안드로이드 AChartEngine 사용법, Temperature 실시간 예제


AChartEngine 사용하기


프로젝트 - TimeChart1.zip

첨부파일 - achartengine-0.6.0.jar


전체 프로젝트는 위의 첨부 파일에 담겨있습니다. 예제에 대해선 아래 설명 글들을 먼저 읽으시고 다운 받으시길 바랍니다. 그리고 바로 아래는 제가 예제를 작성하고 안드로이드 AChartEngine 예제를 공부하기 위해 주로 참조했던 포스트입니다.


먼저, 아래를 거쳐 설명 글들을 읽어주세요.


안드로이드 AChartEngine는 위와 같이 여러 그래프를 제공하는 안드로이드용 오픈 소스입니다. 데모 소스(TimeChart1.zip)를 실행시켜 보려면, achartengine-0.6.0.jar 파일을 추가해줘야 합니다.


먼저, 데모 소스 코드를 다운 받은 jar 파일을 선택해 추가하세요.


프로젝트 우클릭 - 속성(Properties) - Java Build Path - Libraries - Add External Jars 에서 다운 받은 Jar 파일 선택해서 추가


AChartEngine - TimeChart[Android 실시간 그래프 예제] 꺽은선, 막대 Graph


Temperature Range 사용 예


참조 예제


- Bar 예제 - 안드로이드 aChartEngineで棒グラフ

- Pie 예제 - Android AChartEngineで円グラフを描く

- 꺾인선 예제 - Line charts and BAr charts


응용해 볼 소스는 Temperature range입니다. 그라데이션이 들어간 bar라고 생각하시면 되겠네요.


아래 그림은 오픈 소스를 그대로 실행한 화면입니다.


AChartEngine - Temperature range[Android 실시간 그래프 예제] 꺽은선, 막대 Graph


아래처럼 바꾸기 위해선, 소스를 수정하는데....


전 DB를 사용해서 데이터를 불러왔습니다.


AChartEngine - Temperature range 옵션 수정[Android 실시간 그래프 예제] 꺽은선, 막대 Graph

MyActivity를 상속받는 graph 클래스, OnCreate 함수


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
// 안드로이드 AChartEngine 예제 사용법
public class graph extends MyActivity
{
    protected GraphicalView mChartView;
    boolean aa = true;
    SQLiteDatabase db;
 
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.graphx);
 
        double[] minValues = new double[] { 0000000 };
        double[] D = new double[7];
        List<double[]> values = new ArrayList<double[]>();
 
        db = openOrCreateDatabase("imsi", MODE_PRIVATE, null);
        Cursor mCursor = db.query(
            "week"new String[] { "NumericalValue" }, nullnullnullnullnull);
        mCursor.moveToFirst();
 
        for (int i = 0; i < mCursor.getCount(); i++)
        {
            D[i] = Integer.valueOf(mCursor.getString(0));
            mCursor.moveToNext();
        }
 
        values.add(new double[]
        { D[0], D[1], D[2], D[3], D[4], D[5], D[6] });
        db.close();
 
        XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
        RangeCategorySeries series = new RangeCategorySeries("");
        int length = minValues.length;
 
        for (int k = 0; k < length; k++)
            series.add(minValues[k], getMonthData[k]);
 
        dataset.addSeries(series.toXYSeries());
 
        int[] colors = new int[] { Color.BLACK };
        XYMultipleSeriesRenderer renderer = buildBarRenderer(colors);
        setChartSettings(renderer, """"""0.512.5-3045, Color.WHITE, Color.WHITE);
 
        renderer.setBarSpacing(0.5);
        renderer.setXLabels(0);
        renderer.setYLabels(10);
        renderer.setShowGrid(true);
        renderer.setGridColor(Color.parseColor("#c9c9c9"));
        renderer.setMarginsColor(Color.parseColor("#FFFFFF"));
        renderer.setAxesColor(Color.WHITE);
        renderer.setBackgroundColor(Color.WHITE);
        renderer.setZoomEnabled(falsefalse);
        renderer.setShowAxes(false);
        renderer.setShowLegend(false);
        renderer.setPanEnabled(falsefalse);
        renderer.setMargins(new int[] { 0000 });
        renderer.setYLabelsAlign(Align.RIGHT);
 
        SimpleSeriesRenderer r = renderer.getSeriesRendererAt(0);
        r.setDisplayChartValues(true);
 
        r.setChartValuesTextSize(12);
        r.setChartValuesSpacing(3);
        r.setGradientEnabled(true);
        r.setGradientStart(40000, Color.parseColor("#e71d73"));
        r.setGradientStop(45000, Color.parseColor("#ffffff"));
        LinearLayout chart_area = (LinearLayout)findViewById(R.id.chart_area);
 
        mChartView =
        ChartFactory.getRangeBarChartView(this, dataset, renderer, Type.STACKED);
        chart_area.addView(mChartView);
    }
    ....
    ....
cs


setChartSettings 함수


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
protected void setChartSettings(
    XYMultipleSeriesRendererrenderer, String title, String xTitle, String yTitle,
    double xMin, double xMax, double yMin, double yMax,
    int axesColor, int labelsColor)
{
    renderer.setChartTitle(title);
    renderer.setXTitle(xTitle);
    renderer.setYTitle(yTitle);
    renderer.setXAxisMin(xMin);
    renderer.setXAxisMax(xMax);
    renderer.setYAxisMin(4000);
    renderer.setYAxisMax(4600);
    renderer.setAxesColor(axesColor);
    renderer.setLabelsColor(labelsColor);
}
cs


buildBarRenderer 함수


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
protected XYMultipleSeriesRenderer buildBarRenderer(int[] colors)
{
    XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
 
    renderer.setAxisTitleTextSize(16);
    renderer.setChartTitleTextSize(20);
    renderer.setLabelsTextSize(15);
    renderer.setLegendTextSize(15);
 
    int length = colors.length;
 
    for (int i = 0; i < length; i++)
    {
        SimpleSeriesRenderer r = new SimpleSeriesRenderer();
        r.setColor(colors[i]);
        renderer.addSeriesRenderer(r);
    }
 
    return renderer;
}
cs


UI XML


1
2
3
4
5
<LinearLayout
android:id="@+id/chart_area"
android:layout_width="wrap_content"
android:layout_height="175dip"
android:background="#FFFFFF"/>
cs


그리고, setChartSettings의 인수 중 5, 6번째를 건드리면, 바의 수를 늘릴 수도 있습니다.


1
2
setChartSettings(renderer, """"""
    0.512.5-3045, Color.WHITE, Color.WHITE);
cs


이렇게요.


AChartEngine - Temperature range 예제 1[Android 실시간 그래프 예제] 꺽은선, 막대 Graph


2번항 맨아래에 제가 걸어놓은 안드로이드 AchartEngine 링크 사이트들도 참조해 보세요.

그리고 Intent가 아닌, View로 그래프를 넣어야 하나의 액티비티 안에서도 여러 그래프 구현이 가능해집니다.


1
2
3
LinearLayout chart_area = (LinearLayout) findViewById(R.id.chart_area);
mChartView = ChartFactory.getRangeBarChartView(this, dataset, renderer, Type.STACKED);
chart_area.addView(mChartView);
cs


아래처럼요.


AChartEngine - Temperature range 예제 2[Android 실시간 그래프 예제] 꺽은선, 막대 Graph


실시간 그래픽 갱신


항상 안드로이드 AChartEngine를 사용할 때 필수 요소인 세 메소드를 선언합니다.


1
2
3
4
5
6
7
private XYMultipleSeriesDataset mDataset = new XYMultipleSeriesDataset();;
private XYSeries dataSeries = new XYSeries("RealTime");
 
int[] colors = new int[] { Color.parseColor("#E71D73") };
PointStyle[] styles = new PointStyle[] { PointStyle.POINT };
 
XYMultipleSeriesRenderer renderer = buildRenderer(colors, styles);
cs


그리고, 아래의 예처럼 실시간 renderer을 먼저 onCreate 메소드 내부에 정의합니다.


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
for (int i = 0; i < length; i++
{
    ((XYSeriesRenderer)renderer.getSeriesRendererAt(i)).setFillPoints(true);
}
 
setChartSettings(renderer, """"""0500180, Color.WHITE, Color.WHITE);
 
renderer.setXLabels(12);
renderer.setYLabels(10);
 
renderer.setShowGrid(true);
 
renderer.setMarginsColor(Color.parseColor("#FFFFFF"));
renderer.setAxesColor(Color.WHITE);
renderer.setBackgroundColor(Color.WHITE);
 
renderer.setXLabelsAlign(Align.RIGHT);
renderer.setYLabelsAlign(Align.RIGHT);
 
renderer.setZoomButtonsVisible(true);
 
renderer.setPanLimits(new double[] { 0504159 });
renderer.setZoomLimits(new double[] { 0504159 });
 
renderer.setZoomEnabled(falsefalse);
 
renderer.setShowAxes(false);
renderer.setShowLegend(false);
 
renderer.setPanEnabled(falsefalse);
renderer.setMargins(new int[] {0000});
renderer.setYLabelsAlign(Align.RIGHT);
cs


이후에, 데이터 처리에 대한 메소드는 개인이 알아서 처리하는데, 중요한건, 이 데이터를 처리해줄 모듈입니다. 그래서, 예를들어 아래와 같이 짧은 메소드를 추가해줍니다.


물론 안드로이드 AChartEngine 아래 메소드는 반복문에서 수행이 되어야 합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
private void updateChart(int a, int b){
    dataSeries.add(a, b);
 
    if(view != null) {
        view.invalidate();
    }
    else{
        dataSeries.add(0, b);
        mDataset.addSeries(dataSeries);
 
        view = ChartFactory.getCubeLineChartView(
            this, mDataset, renderer, (float0.5);
 
        linearLayout.addView(view);
    }
 
    if (a == 50){
        dataCnt = 0;
        dataSeries.clear();
    }
}
cs


만약에 View에 ChartFactory가 추가가되지 않으면, 추가하는 else 과정을 거치고, 이미 추가된 상태라면 invalidate()를 호출해 view를 갱신시켜 줍니다.


추가로, 차트가 가득찰 경우 clear()를 호출해 비워줄 수도 있습니다.


ChartFactory의 getCubeLineChartView를 호출해 테스트를 해봤는데, dataSeries의 데이터 길이에 상관없이 넥서스s나 갤럭시 노트에서 잘 구동이 되네요.


안드로이드 AChartEngine 사용법, Temperature 실시간 예제

댓글