차트 편집

CEMS에서 제공되는 20여 가지의 차트의 편집 기능에 대개 소개한다.

소개

모든 차트는 오른쪽 상단의 버튼의 Edit Options 메뉴를 통해 차트를 편집할 수 있다.

Open

차트 편집 화면은 그림과 같이 차트의 출력 내용을 확인하기 위한 상단 부분과 옵션 선택을 위한 하단의 탭 부분으로 나누어진다. 하단의 탭 부분은 General, Tags, Axes, Display, Time Range 등으로 구성되는데 차트 별로 조금씩 달라진다.

각 차트의 편집 화면에 나타나는 차트의 속성들은 차트 고유의 것으로 다른 차트와 대시보드와 별개이지만 Time Range 탭의 Time Range와 Refresh 옵션의 경우, 편집 화면을 통해 별도로 설정되지 않았다면 대시보드 주 화면에서 지정된 옵션의 영향을 받는다.

다음은 라인 차트의 편집 화면이다.

Open

그룹 차트

다음 그림과 같이 계층 구조 가장 상단의 machbase에 대해 Group-all 정보를 위한 차트를 추가하였다고 생각해 보자.

다음과 같이 차트가 나타나면 버튼의 Edit Options으로 편집 화면으로 전환할 수 있다.

다음 그림에서 알 수 있듯이 그룹 차트의 경우 General 탭 하나 만을 제공한다. Chart Title에서 차트의 제목을 수정할 수 있고 Group List의 선택 옵션을 통해 다른 그룹으로 변경할 수 있다. 버튼으로 출력되는 데이터의 값을 새로 고칠 수 있고 버튼으로 수정한 내용을 미리 적용볼 수 있으며 버튼으로 저장한다.

라인 차트

라인 차트는 편집 화면에서는 다음과 같이 다섯 개의 탭을 제공한다. 수정된 값으로 차트를 다시 그리려면 으로 적용하거나 으로 저장해야 한다.

1. General

    

   1. Chart Title
      차트의 제목을 수정할 수 있다.
      
      

2. Tags
   차트의 기본 탭으로 차트에 출력할 태그들을 선택한다. 선택한 태그 데이터에 Calc Mode 함수들이 적용된 값으로 차트를 그린다.

   1. Tag Name
      선택한 태그의 이름으로 수정할 수 없다. 수정하고자 하면 아래 Alias를 입력하면 이 이름 대신 입력한 이름을 표시한다.

   2. Calc Mode
      차트에 적용되는 집계 유형으로 Min(최소값), Max(최대값), Count(갯수), Sum(총계), Average(평균), Raw(원시 데이터) 중의 하나를 선택할 수 있다.

   3. Alias
      위의 태그 이름 대신 차트에 표시할 이름이다.

   4. 
      태그 데이터를 출력할 때 사용하는 색상으로 주어진 색상 중에 선택하거나 입력창에 색상 코드를 입력하여 변경할 수 있다.

   5. Add New Tag
      차트에 새로운 태그를 추가한다.
      
      

3. Axes

   • X 축

     • Tick marks Interval
       X축에 표현되는 데이터 간의 간격으로 단위는 픽셀이다.

     • Time Interval
       X축의 시간 간격으로 단위까지 지정할 수 있으며, 초, 분, 시, 일의 단위를 설정할 수 있다(미설정 시 자동으로 계산된다).

   • Y 축

     • Use custom min
       Y축의 최소값을 설정한다.

     • Use custom max
       Y축의 최대값을 설정한다.

4. Display
   그래프의 표현 방식을 변경한다. 라인 차트와 영역 차트, 포인트 라인 차트, 포인트 차트는 같은 종류의 차트로 아래 옵션들을 변경하여 전환 가능하다.

   1. Opacity of fill
      라인 차트의 불투명도를 변경한다. 불투명도가 0이면 투명한 것이며 1은 100% 불투명하다.

   2. Line thickness
      라인 차트를 그리는 선의 두께를 변경한다.

   3. Data Points
      데이터 값을 선으로 이어 표현하는 것으로 라인 차트가 된다.
      데이터 값을 점으로 이어 표현하는 것으로 포인트 라인 차트가 된다.
      점으로 이은 상태에서 Line thickness를 0으로 주면 포인트 차트가 된다.

   4. Show legend
      차트 아래에 나타나는 태그 이름을 숨길 수 있다.

5. Time Range

   1. Time Range
      차트를 그릴 데이터의 범위를 지정한다. 기본값은 now-3h ~ now 로 3시간 전으로부터 현재까지의 태그 데이터를 차트로 그린다.

   2. Refresh
      지정된 시간을 현재 값으로 하여 차트를 새로 고친다. 위의 그림과 같이 5 분(minutes)으로 설정된 경우 5분마다 차트를 새로 고쳐서 표시한다.

       

영역 차트

라인 차트와 동일하며 Display 탭의 Opacity of fill 옵션을 0으로 설정하면 라인 차트로 변형할 수 있다.

포인트 라인 차트

라인 차트와 동일하며 Display 탭의 옵션을 통해 라인 차트나 포인트 차트 형태로 변환할 수 있다.

포인트 차트

바 차트

바 차트의 경우 General, Tags, Time Range의 내용은 라인 차트와 동일하다.

• Axes

  • X 축

    • Time Interval
      X축의 시간 간격으로 단위까지 지정할 수 있으며, 초, 분, 시, 일의 단위를 설정할 수 있다(미설정 시 자동으로 계산된다).

  • Y 축

    • Use custom min
      Y축의 최소값을 설정한다.

    • Use custom max
      Y축의 최대값을 설정한다.
      
      바 차트에서 Y축의 min, max 값을 사용하여 그래프의 유효 부분만을 확대할 수 있다.
      예를 들어, 다음 그래프와 같이 값들이 30 ~ 40 사이에 분포되어 있을 경우 min을 30, max를 40으로 설정하여 변화 상태를 구체적으로 확인할 수 있다.

• Display

  • Bar width
    바 차트의 막대 폭을 설정한다.

  • Show legend
    차트 아래에 출력되는 태그 이름을 숨길 수 있다.
    
    

누적 바 차트

바 차트와 Axes를 제외한 General, Tags, Display, Time Range의 내용은 바 차트와 동일하다.

• Axes

  • Time Interval
    X축의 시간 간격으로 단위까지 지정할 수 있으며, 초, 분, 시, 일의 단위를 설정할 수 있다(미설정 시 자동으로 계산된다).

파이 차트

파이 차트는 편집 화면에서는 다음과 같이 4 개의 탭으로 구성되며 Tags, Time Range의 경우, 라인 차트와 동일하다.

1. General

    

   1. Chart title
      차트의 제목을 입력한다.

   2. Chart title position
      차트의 제목이 나타나는 위치로 왼쪽 상단(left)과 가운데 상단(Center)중에 선택할 수 있다.

   3. Calculation type
      시간을 기준으로 분할되어 전송된 시계열 데이터를 사용해서 최종 데이터를 계산하는 방법으로 Last가 기본값이다. First, Last, Sum, Count, Average, Minimum, Maximum을 선택할 수 있다.
      
      파이 차트는 태그 하나에 대해 한가지 값만을 사용하는데 실제 전달되는 시계열 데이터는 [{time1, value1}, {time2, value2}.... {timeN, valueN}] 으로 다수의 데이터이다. 이 때, Calculation Type을 Last 로 하면 전달되는 마지막 데이터 valueN을 사용하고 first이면 value1을, Count는 갯수인 N을, Sum은 value1 ~ valueN까지 총 합을, Average는 값들의 평균값, Min은 최소값, Max는 최대값을 출력한다.

   4. Division number
      전체 시간을 몇 개의 시간 간격으로 분할할 것인지 선택한다.

게이지 차트

게이지 차트는 다음과 같이 4 개의 탭으로 구성되며 General, Tags, Time Range의 경우, 파이 차트와 동일하다.

• Display

  • Maximum value
    게이지 차트에 표시되는 최대값으로 아래쪽의 Set Range Color의 Minimum value, Maximum value에 우선한다.

  • Decimal Places
    소수점 자리 숫자를 나타낸다. 만일 데이터가 소수점을 포함하지 않는 정수 데이터라면 이 값은 무시된다.

  • Unit
    데이터의 단위가 차트 안쪽 상단에 표시된다.

  • Set Range Color

    • 온도 범위 별로 색상을 표시한다.
      위 그림의 예에서는 0 ~ 33°C는 , 33 ~ 66°C는 , 66 ~ 100°C는 으로 표시하여 위험도를 시각적으로 나타내고 있다.

    • 오른쪽 텍스트 입력 필드에서 색상 코드를 입력하여 원하는 색상으로 표시할 수 있다.

반원차트

텍스트 차트

• Display

• Set Range Color

그리드 차트

• General
  
  

• Tag
  
  

   

• Time Range
  다른 차트들과 동일하다.