2013년 4월 19일 금요일

안드로이드 차트 라이브러리 - Essence Chart(에센스 차트) 라이브러리 시작하기

앱을 개발할 때 멋있는 차트를 넣어 보는 것은 어떨까요?

안드로이드(Android) Essence Chart(에센스 차트) 라이브러리를 이용하면 2D/3D 차트를 쉽게 만들 수 있습니다.

본 문서는 에센스 차트 라이브러리를 처음 사용하는 개발자들이 쉽게 따라할 수 있는 교재입니다.


에센스 차트의 특성은 다음과 같습니다.

  • Essence Chart 라이브러리는 다양한 차트를 지원합니다. 지원 하는 차트의 종류는 Essence Chart가 지원하는 차트의 종류에서 확인 하실 수 있습니다.
  • Essence Chart 라이브러리는 크기가 작습니다.
    Android용 라이브러리의 경우 3MB 정도의 크기 입니다.
  • Essence Chart 라이브러리는 다양한 OS를 지원 합니다.
    현재 Android용만 제공 하고 있지만, 추후에 Window, iOS용도 제공할 예정입니다.
  • Essence Chart 라이브러리는 무료로 사용 하실 수 있습니다.
    Essence Chart 라이브러리의 라이센스는 Essence Chart(에센스 차트) 라이센스에서 확인 하실 수 있습니다.

시작하기를 진행 하기 위해서는 반드시 Essence Chart SDK를 설치 해야만 합니다.
설치는 Essence Chart(에센스 차트) SDK 설치하기에서 확인 하실 수 있습니다.
image

Android 시작하기 - 1단계(Chart 생성)

Essence Chart 라이브러리는 Android에서 사용할 수 있는 JAR(Java Archive)를 제공합니다.
Android에서 쉽고 편하게 Chart를 생성 할 수 있습니다.
현재 Android에서는 다음과 같이 지원 되고 있습니다.
  • SDK 설치 프로그램 제공
  • Android JAR 제공
  • 지원 Device : armebai-v7, armebai(armebai는 추후 지원 예정)
  • SDK Demo APP 제공(Google Play에 등록 예정)
  • Min SDK Version : Android 2.3.3(API 10)
  • 동작 확인된 Device
    • 삼성 갤럭시 S2(Android 4.1.2, 젤리빈)
    • 삼성 갤럭시 S3(Android 4.1.2, 젤리빈)
    • 삼성 갤럭시 노트 10.1(Android 4.1.2, 젤리빈)
    • LG 옵티머스 G 프로(Android 4.1.2, 젤리빈)
    • 구글 Nexus7(Android 4.2.2, 젤리빈)
    • 구글 Nexus10(Android 4.2.2, 젤리빈)
  • 일부 Device에서 정상 동작 하지 않을 수 있습니다.
    • 현재 armebai-v7만 지원됩니다.
    • Android OS 버전에 따라 동작 하지 않을 수 있습니다.
  • 문의 사항은 댓글을 이용하시면 됩니다.

Android 시작하기 전에 다음 항목을 확인 하시기 바랍니다.
  • Eclipse 설치 확인
    • Eclipse Classic 3.7.2를 사용하여 시작하기가 제작이 되어 있습니다.
    • 다른 버전(상위 버전)으로도 개발하는 것도 가능합니다만, 본 문서는 3.7.2 기준으로 설명이 되어 있어 메뉴나, 항목이 조금 다를 수 있습니다.
    • Eclipse Classic 3.7.2 다운로드
    • Eclipse 설치는 인터넷에 Eclipse 설치 관련 사이트를 참조하셔서 설치 하십시오.
  • Android SDK 설치 확인
    • Android 시작하기는 Android SDK가 설치 되어 있어야 진행 할 수 있습니다.
    • Android 개발자 사이트에서 다운로드에서 다운 받을 수 있습니다.
    • Android SDK 설치는 인터넷에서 Android SDK 설치 관련 사이트를 참조하셔서 설치 하십시오.
  • Essence Chart SDK 설치 확인

아래 이미지에서 표기된 버전은 업데이트에 따라 버전은 다를 수 있습니다.

Android App 생성하기


eclipse를 실행한다.
image

File –> New –> Other 메뉴를 실행 한다.
image

Android –> Android Application Project를 선택 하고 “Next” 버튼을 선택 한다.
image

Application Name, Project Name, Package Name을 입력한다.
Minimum Required SDK 항목은 API 9: Android 2.3(Gingerbread)를 선택 한다.
Target SDK, Compile With, Theme는 상황에 맞게 선택한다.
“Next” 버튼을 선택 한다.
image

Create custom launcher icon, Create activity, Create Project in Workspace 항목의 Check를 켠다.
”Next” 버튼을 선택 한다.
image

아이콘 이미지 정보를 설정 한다.
”Next” 버튼을 선택 한다.
image

Create Active를 Check하고 BlankActivity를 선택 한다.
”Next” 버튼을 선택 한다.
image

Activeity Name, Layout Name 항목의 값을 입력한다.
(시작하기에서는 기본값을 사용한다, 만약 다른 값을 사용할 경우 해당 항목의 이름이 다를 수 있음)
”Finish”를 선택한다.
image

Essence Chart SDK 복사

설치한 Essence Chart SDK 폴더에서 JAR 파일과 library 폴더를 복사한다.
탐색기를 실행하여 Essence Chart SDK 폴더로 이동한다.
기본 설치 경로는 다음과 같다.
  • Window 32bit : C:\Program Files\Essence Chart SDK\sdk\android
  • Window 64bit : C:\Program Files (x86)\Essence Chart SDK\sdk\android
image

“armebai-v7a” 폴더와 “essence.chart.0.7.6.jar” 파일을 복사한다.
 image

복사한 파일을 Eclipse의 Chart Projcet의 libs 폴더에 복사를 한다.
image

복사를 완료되면 libs 폴더에 “armebai-v7a” 폴더와 “essence.chart.0.7.6.jar” 파일이 복사 된 것을 확인한다.
 image


layout에 chart 추가하기

Eclipse에서 res/layout/activity_main.xml파일을 선택한다.
(activity_main.xml은 Projcet를 생성시 지정한 파일임)
image

activeity_main.xml의 activity_main.xml 탭을 선택한다.
(Graphical Layout옆에 있는 activity_main.xml 탭을 선택)
image

TextView 항목을 다음과 같이 변경한다.
변경 전

변경 후
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world" />
</RelativeLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >
    <com.essence.chart.Chart
        android:id="@+id/chart01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>


image image

수정한 내용을 저장한다.
Project->Clean 메뉴를 선택 하여 Clean all projects를 선택 한다.
image

Chart App 실행

저장된 Project를 실행하여 Chart가 정상적으로 생성이 완료 되는지 확인한다.

Eclipse의 toolbar의 Run 버턴을 선택한다.
Run As 창이 나타다면 “Android Application”을 선택 후 “OK” 버턴을 선택 한다.
image

정상적으로 빌드가 되면 Android Device Chooser가 표시된다.
Android Device Chooser에서 원하는 Device를 선택 하고 “OK” 버튼을 선택 한다.

image

정상적으로 실행이되면 Device에 다음과 같은 Chart App이 실행이 된다.
  • 삼성 갤럭시 S2
image

  • 삼성 갤럭시 노트 10.1
image

  • Google Nexus7
image

댓글 20개:

  1. 레퍼런스가 있어야 개발을할텐데,, 레퍼런스는 제공 안해주나요?

    답글삭제
    답글
    1. 작성은 했는데 아직 정리를 못해서 올리지 못했습니다.
      가능한 빠른 시간에 정리해서 올리겠습니다.

      삭제
  2. 레퍼런스가 없어서 만들 방법이 없네요;;;

    답글삭제
    답글
    1. 금일 사용설명서를 올릴 예정입니다.

      삭제
  3. 내가 샘플 소스 코드를 가질 수 있을까요?

    답글삭제
    답글
    1. 네... Google Play에 올라가 있는 샘플 소스를 github에 올릴 예정입니다. 소스가 올라가면 홈페이지에 공지하겠습니다.

      Yes... I'll commit sample source which posted in google play store. When source commited, I'll notice about that in this blog.

      삭제
  4. 샘플소스코드는 이곳에서 받으세요. https://github.com/essencetech/essencechart

    답글삭제
  5. 안녕하세요 놀라운 차트라이브러리를 보았습니다.

    그런데 다름이 아니라 원형차트에 범례는 표시되는데

    데이터 수치값은 표시가 안되나요??

    답글삭제
    답글
    1. 문의 하신 데이터 값 표시 기능은 다음 업데이트에 포함이 될 예정입니다.
      관련 내용은 http://essenceware.blogspot.kr/2013/04/essence-chart-changes.html에서 확인 하실 수 있습니다.

      삭제
  6. x86 에뮬레이터에서 동작하나요?
    혹시 동작 안한다면 동작하게 해주실수 있나요?
    개발할때는 에뮬레이터를 이용해서....

    답글삭제
    답글
    1. 현재는 x86은 지원하지 않습니다.
      x86 지원 계획은 없는 상태입니다.
      저는 개발 할 때는 Nexus7과 갤 노트 10.1, 갤 S2를 사용하여 개발하고 있습니다.
      애뮬레이터는 실제 Device와는 완전히 동일 하지 않는것 같습니다.

      삭제
  7. 차트가 쓰기 쉽고, 정말 깔끔하네요. 감사합니다.
    한국에도 이런 실력있는 분들이 있다는게 다행이네요..^^

    답글삭제
  8. 방사형(radar) 차트에서..
    최저값이 중앙에 위치하게 되는데..
    예를들어 4가지 값 10, 12, 10, 14 가 있다고 하면 정 가운데 10이 되어 모양이 어색합니다..
    중앙이 0이 되고 값들이 거미줄 처럼 고르게 퍼지게 할 수 없을까요?

    답글삭제
  9. 우선..편법으로.. 전부 값이 0인 gridData를 하나 넣으니 0이 중심이 되긴 합니다만..
    ^^;

    답글삭제
  10. 안녕하세요 essence chart 우연히 찾게 되어 사용하려구 합니다.

    묶은 세로 막대형 그래프를 사용하려고 합니다.

    x축 레이블에 들어가는 데이터를 따로 설정을 하려고 합니다. .

    예를 들면 위의 예제에 나와있는 samsung, apple , --> mar , Apr, May 이런식으로 하려고 하는데

    x축 레이블 설정하는법을 API reference에서 못찾아서 질문드립니다.

    답글삭제
    답글
    1. setSourceData의 GridData를 생성하실 때 첫번째 Column과 Row는 Data의 Column, Row의 Title 값으로 사용이 됩니다.
      실제 Data는 (1,1) 부터 시작이 됩니다.
      아래의 소스를 참조 하십시오.

      protected boolean initChart() {
      m_Chart = (Chart)findViewById(R.id.chart01);
      if (m_Chart == null) {
      return false;
      }

      String[] strColumns = { "Column1", "Column2", "Column3", "Column4", "Column5", "Column6", "Column7", "Column8" };
      String[] strRows = { "Row1", "Row2", "Row3", "Row4", "Row5", "Row6", "Row7", "Row8" };
      double[][] dValue = {
      {1000,1500,2000,1000,3000,5000,7000,6000},
      {4000,2500,2000,2000,4000,6000,4000,6000},
      {6000,8500,5000,2000,5000,6000,4000,6000},
      {6000,8500,5000,2000,5000,6000,4000,6000},
      {6000,8500,5000,2000,5000,6000,4000,6000},
      {6000,8500,5000,2000,5000,6000,4000,6000},
      {6000,8500,5000,2000,5000,6000,4000,6000},
      {6000,8500,5000,2000,5000,6000,2000,10}
      };
      GridData gridData = new GridData(8,8);

      for(int nRow = 0; nRow < 8; nRow++) {
      for(int nColumn = 0; nColumn < 8; nColumn++) {
      if (nRow == 0) {
      gridData.setCell(nRow, nColumn, strColumns[nColumn]); // Column Title
      } else if (nColumn == 0) {
      gridData.setCell(nRow, nColumn, strRows[nRow]); // Row Title --> 범례
      } else {
      gridData.setCell(nRow, nColumn, dValue[nRow][nColumn]); // 실제 Data
      }
      }
      }

      m_Chart.setChartType(Chart.Chart_Type_Line);
      m_Chart.setSourceData(gridData, 1);

      return true;
      }

      삭제
  11. 안녕하세요. 먼저 좋은 라이브러리 공유해주셔서 감사드립니다.
    사용중에 궁금한 점이 있어 이렇게 질문드립니다.
    라인차트를 이용하는데, 입력되는 값의 범위가 0.0~5.0입니다.
    차트가 그려지면서 값에 따라 Y축의 max 값이 변경되는데 이를 고정시킬 수 있는 함수는 없을까요?
    아무리 봐도 못찾겠어서 이렇게 질문드립니다.
    좋은 라이브러리를 공유해주셨는데 이렇게 질문까지 더하게되서 죄송스럽게 생각합니다.

    답글삭제
    답글
    1. 현재 y축에 대한 Max을 제한하는 setYAxisMaximum는 제공이 하고 있습니다.
      setYAxisMaximum API는 Y축의 최대 값을 제한 하는 API입니다.
      Data 값이 설정한 최대 값 보다 클경우 최대 값까지만 표시되도록 제한 하는 API입니다.

      자세한 내용은 안드로이드 차트 라이브러리 - Essence Chart(에센스 차트) SDK 샘플 소스(http://essenceware.blogspot.kr/2013/06/essence-chart-sdk.html)를 참조 하시면 됩니다.

      삭제
  12. 라이브러리 감사드려요!^^
    사용중에 궁금한게 생겨서요... 제가 아직 개발 초보라
    3D Pie 차트를 사용하려고 하는데 데이터값을 어디다가 입력을 해야할지 몰라서요...

    답글삭제
  13. 안녕하세요.

    먼저 좋은 라이브러리 잘 쓰고 있습니다. 고맙습니다.
    질문이 있는데요.
    Version 1.0.0 차트에서 차트 왼쪽 아래에 "Powered by EssenceChart" 이건 어떻게 없애나요?
    답변 좀 부탁해요.

    고맙습니다.
    수고하세요.

    답글삭제