본문 바로가기
Data Analysis/Spotfire

[Spotfire] Gauge Chart 연동하기

by 불탄오징어 2017. 10. 6.
반응형

 

 

Spotfire에서도 KPI Chart를 제공하기는 하지만 시각적으로 아쉬움은 있습니다. 그래서 Text Area에서 직접 수치를 출력하거나 Bullet Chart를 이용하곤 하는데 그래도 대쉬보드를 구성하는데 있어서는 여전히 아쉬움이 남습니다. 목표수치를 놓고 얼마나 달성했는지 여부를 표현하기에는 개인적으로 Gauge 차트를 선호하는 편인데 Spotfire에서는 기본차트에는 없으며 JS Visualization Framework 의 예제로도 제공하지 않습니다.

 

그러던 차에 구글링을 통해서 관련 예제를 찾았습니다.

 

참고 : http://spotfired.blogspot.kr/search?q=gauge

 

아주 멋집니다. 이 예제는 Text Area에서 Javascript와 html을 활용한 예제인데 대충 동작 방식을 알면 다른 Javascript Chart에도 응용이 가능할 것 가능할 것 같네요. 위의 Gauge 차트의 출처는 http://bernii.github.io/gauge.js/ 인데 해당 페이지로 가면 옵션을 조절하여 Gauge Chart의 형태를 변형할 수 있다.

 

 

간단하게 Spotfire 상에서 구현하는 방법은 다음과 같습니다.

 

  1) Spotfire에서 Text Area를 생성하고 Edit Html 모드로 들어간 후 아래와 같이 html을 작성한다.
     중간의 Calculated Value에 데이터로 연결할 Calculated Value를 삽입하자.
     단 삽입된 값에 대해서 서식(Format)을 지정하면 안된다.

<canvas id="gauge1"></canvas>
<span id="calcValue1" style='display:none'>
   <SpotfireControl id="Calculated value의 고유아이디" />
</span> 

 

  2) 아래 주소의 소스를 복사한다.

    http://bernii.github.io/gauge.js/dist/gauge.min.js

 

 

  3) Edit Html 모드에서 상단의 Add Javascript - New Script를 선택하여 붙여 넣고 gauge.js 라고 저장한 후 OK를 눌러 javascript를 삽입한다.

 

 

 

  4)  Add Javascript를 클릭한 후 New를 눌러 다음의 javascript를 추가한다.
      아래의 Script는 Gauge Chart를 구성하는 스크립트이다.

var opts = {
  lines: 12, 
  angle: 0.22,
  lineWidth: 0.1, 
  pointer: {
    length: 0.5, 
    strokeWidth: 0.035, 
    color: '#afafaf' 
  },
  limitMax: 'false', 
  colorStart: '#2DA3DC', 
  colorStop: '#C0C0DB',
  strokeColor: '#EEEEEE', 
  generateGradient: true
};
var target = document.getElementById('gauge2'); 
var gauge = new Donut(target).setOptions(opts); 

gauge.maxValue = 100; 
gauge.animationSpeed = 32; 
gauge.setTextField(document.getElementById("measure2"));

function refreshGauge2(){
   val = parseInt($("#calcValue2").text())
   if(isNaN(val)) return

   gauge.set(val)
}

$("#calcValue2").one('DOMSubtreeModified',refreshGauge2)

refreshGauge2();

 

참고로 <canvas></canvas> 태그를 사용하기 위해 설정이 필요한데  tools>admin manager>preferences>TextArea>TAPreferences>PerfomrHtmlSanitation:false 로 변경합니다.

댓글