HAMA 블로그

시계열 데이터 스토어로서의 Elasticsearchhttps://www.elastic.co/kr/blog/elasticsearch-as-a-time-series-data-store Kibana 를 사용하기 위해서라도 한번 바꿔 볼까.. ( from Influxdb + Grafana ) 저는 오픈 소스 성능 모니터링 도구인 stagemonitor, 의 프로젝트 관리자로서, 백엔드로서 여전히 멋지지만 노후화되고 있는 TSDB(Graphite Time Series DataBase)를 대체할 데이터베이스를 찾고 있었습니다. TSDB는 앱 응답 시간 또는 서버의 CPU 활용과 같은 (성능) 메트릭 데이터를 저장할 수 있는 특별한 패키지입니다. 궁극적으로는 설치가 용이하고 확장 가능하며 다양한 기능을 지원하고 메트..

line chart import matplotlib.pyplot as plt xs = range(1440) plt.plot(xs, watts) plt.axis([0, 1440, 0, 100000]) plt.xlabel("# of 1min of day") plt.ylabel("# of watt") plt.show() bar chart import matplotlib.pyplot as plt xs = range(1440) plt.bar(xs, watts) plt.axis([0, 1440, 0, 100000]) plt.xlabel("# of 1min of day") plt.ylabel("# of watt") plt.show() line chart 2 import matplotlib.pyplot as plt i..

InfluxDB 와 Grafana 를 사용하는 방법은 아래 링크를 통해 알 수 있다. http://hamait.tistory.com/537 이 둘을 같이 쓰다보면 시간때문에 헥깔릴 수 있는데 간단 정리 해본다.A 기기 : InfluxDB 에 데이터를 넣는 머신 ( OS시간 1시 30분 ) DB 서버 : InfluxDB 가 돌아가는 서버 ( OS 시간 1시 ) 내 PC : 브라우저를 (Grafana) 통해 가시화하는 내 컴퓨터 (OS 시간 12시 30분) 가 있다고 하자.A 기기에서 InfluxDB 서버에 현재 시간 1시 30분을 UTC 시간으로 변경하여 데이터와 함께 INSERT 해주면 InfluxDB 에 저장된다.이때 내 PC, 즉 내 브라우저 통해서는 어떻게 데이터가 나올까? 내 컴퓨터에선 안나온다...

* 너무 옛날 버전이라 참고하지마세요 (2015년경) * 2021년 버전은 -> hamait.tistory.com/1120 InfluxDB 간략 소개 InfluxDB * 2013년도에 만들어진 시계열 데이타를 저장하기위한 NoSQL 저장소 * 구글이 만든 key/value database library 인 LevelDB를 사용 * distributed and scale horizontally하게 설계되었습니다. 따라서, cluster에 새로운 node만 추가하면 쉽게 scale-out 할 수 있습니다. * Schemaless design 입니다. Grafana * 데이타 소스로 Graphite / Elasticsearch / InfluxDB 등을 이용하여 타임시리즈를 그래프 / 대쉬보드로 가시화해주는 툴..

사실 d3 라이브러리를 사용하는것은 OpenGL 이나 SVG/GDI+ 를 사용하는것 만큼 나름 로우레벨 작업이다. 이름 자체가 나타내듯이 Data-Driven Documents 이지 그래프 / 차트 라이브러리가 아니기때문이다.개인적으로는 아주 가끔 가다가 차트작업을 했었고, 차트에 그려질 그래프 스타일이 그때 마다 가지각색 이었기때문에 chart FX 나 Teechart 를 사용하기보다는 GDI+ 로 직접 그렸던것 같다. (차트라이브러리를 공부해서 사용하는것보다 밑바닥부터 그린게 편하긴한데.. 대략 일주일정도 소모됬던것 같다) d3 라이브러리 경우 자유성은 분명 높지만, 간단하면서 아주 일반적인 차트를 그리는데 있어서는 공부도 좀 해야하고 신경써야할 부분이 많다. 이럴때 d3 를 이용하여 어느정도 템플릿..

원본내용중 누락부분이 있으니 , 전체를 꼼꼼히 보시려면 글 마지막의 레퍼런스를 참고하십시요. Transitions 으로 작업하기 D3’s selection.transition 메소드는 DOM 이 바뀔때 애니메이션(변환)을 쉽게 해준다. 예를들어 텍스트 색상을 빨강으로 바꾸기위해서 다음과 같이 body 엘리먼트를 선택하고 스타일 속성을 주는데..d3.select("body").style("color", "red");어느정도의 시간동안 변화를 주기위해서는 transition 을 사용한다.d3.select("body").transition().style("color", "red"); 선택할수있는 모든 요소들은 순간적인 변화 대신transition 을 통해 시간을 두고 애니메이션 할수있다. Transitions..

사물인터넷을 위한 관제 웹 어플리케이션에서 현재 전기/수도의 사용량을 그래프로 보여주고 싶어서 알아보던중d3 라이브러리를 알게되어 간단히 적용해보고 (10분 완성) 주석 형식으로 설명을 달아본다. 0. 적용 모습 1. d3 라이브러리 include 2. 웹 페이지에서 그래프가 위치 할만한곳에 div 설정 3. 웹 페이지 로딩이 끝나면 그래프 시작 4. 그래프 드로잉 부분 var current_watt_for_graph = 0; function graphStart(){ var n = 60, // x 축 범위를 위한 변수 random = d3.random.normal(0, 0), data = d3.range(n).map(random); // 0~0 으로 x축(60) 범위를 초기화 한다. var margin ..

Visual IndexBox Plots Bubble Chart Bullet Charts Calendar View Non-contiguous Cartogram Chord Diagram Dendrogram Force-Directed Graph Circle Packing Population Pyramid Stacked Bars Streamgraph Sunburst Node-Link Tree Treemap Voronoi Diagram Hierarchical Edge Bundling Voronoi Diagram Symbol Map Parallel Coordinates Scatterplot Matrix Zoomable Pack Layout Hierarchical Bars Epicyclical Gears Collis..