이번장은 계량기차트(Gauge Chart)에 대하여 진행하도록 하겠습니다.Gauge 그래프는 보통 특정영역내에서 수치를 표현하기 위하여 사용되는 그래프 종류입니다.예를들면, 차량에 장착되어있는 RPM/속도 계기판이나 전압을 측정할때 사용하는 전압측정기등과 같은 화면을 Gauge라 부릅니다. ▼ 첫번째 이미지인 속도 계기판과 유사한 화면을 ExtJS에서 제공하는 Gauge 컴포넌트를 이용하여 제작해보도록 하겠습니다. 우선 전체 코드를 작성하여 실행결과 확인 후, 부분코드로 설명을 진행하도록 하겠습니다. ▼ Ext.onReady(function(){ var store = Ext.create('Ext.data.Store',{ fields : ['rpm','speed'], data: [{rpm : 0, spee..

Scatter Chart란, 분산/분포도를 표현해주는 차트입니다.분포되는 그래프란 아래와 같은 차트를 의미합니다. ▼ [출처 : http://dev.sencha.com/ext/5.1.0/examples/kitchensink/?charts=true#scatter-basic] [출처 : http://www.mathsisfun.com/data/scatter-xy-plots.html] 차트 영역내에 포인트로 데이터를 표현하여 어느 영역에 집중이 되있는지 한눈에 알아보기 쉬운차트가 바로 'Scatter Chart' 입니다. 상단 이미지 중, 두번째 출처에서 제공하는 온도별 아이스크림 판매 데이터를 이용하여 한번 Scatter Chart를 생성해보도록 하겠습니다. 상단 데이터를 데이터 스토어에 담아 보도록 합니다...

자바스크립트에서 제공하는 메시지창이 alert, confirm, prompt 가 대표적으로 존재합니다. 하지만 프롬프트창은 개발을 진행해오면서 적용한 사례를 본적이 없어서 이번장에서 제외하도록 하겠습니다. 자바스크립트에서 제공하는 alert과 confirm의 화면입니다. ▼ 화면에서 항상 필요로 하는 메시지창입니다. 메시지박스를 ExtJS에서 제공하는 컴포넌트로 생성을 하여 다양하게 출력시켜보도록 해보겠습니다. 'alert' MessageBoxExtJS 강좌 1장에서 연동시 출력해봤던 메시지 박스입니다. 위와같은 내용으로 출력을 시켜보았습니다. ▶ 샘플코드 Ext.onReady(function(){ Ext.Msg.alert("자바스크립트 알림","이것이 ALERT창입니다."); }) ▶ 실행결과 동일하게..