프로그래밍 일지

구글차트(Google Chart)를 공부하고 있긴 한데.. 항상 영어데이터만 쓰다보니 한글로도 표현이 되는지 궁금해졌다. 될까 안될까..? 당연히 된다. 문자인코딩만 꼬이지 않으면 별다른 문제없이 한글데이터를 구글차트에서 볼 수 있다. 이제껏 구글차트에 대한 포스팅들을 잘 따라왔다면, 아래 몇단계만 더 소스를 추가해서 한글데이터를 무리없이 Ajax로 가져올 수 있다. 우선 문자인코딩을 선택해야한다. 여기서는 UTF-8로 선택하겠다. 우선 웹페이지 파일들이 어떤 인코딩으로 만들어졌는지 확인을 해야한다. 우선 chart.html 을 오른쪽 클릭해서 propeties를 확인하면 아래와 같은 화면이 나온다. 보면 Text file encoding 이 있다. ISO-8859-1 이나 MS949 가 아닌지 확인하고..

Creating and Populating a DataTable 구글차트(Google Chart)를 그릴 때는 당연히 데이터가 필요로 하는데 그 데이터는 google.visualization.DataTable 객체에 삽입하여 차트로 바인딩 된다. 구글차트에 필요한 데이터 값을 정의 하는 방법은 3가지가 있다. 아래 예제들 및 설명은 홈페이지에 다 있는 내용이다.(https://developers.google.com/chart/interactive/docs/datatables_dataviews) 1. Empty DataTable + addColumn()/addRows()/addRow()/setCell() 첫번째 방법은 자바스크립트 상에서 비어있는 DataTable 객체를 만들어 놓고, 컬럼값들을 정의하고 ..

Spring MVC project Ajax 호출을 할 웹서비스를 Spring Tool Suite(STS)에서 간단하게 만들어보자. 어떻게 할까 하다가. Spring MVC project 템플릿을 이용해보기로 했다. 아래 그림대로 프로젝트를 만들자. 프로젝트 이름은 chart-sample 로, 그리고 패키지는 com.chart.sample 로 각각 기입하자. Finish 버튼을 누르면 프로젝트가 생성된다. 첫번째로 해야 할 일은, 이전 포스팅에서 작성한 3개파일 + jquery.js 파일을 붙여넣는 일이다.src/main/webapp/resources 폴더에 ajax-sample.js , chart.html , jquery-1.8.1.js, sampleData.json모든 파일을 복사해서 붙여넣자. 아래 ..

Populating Data Using Server-Side Code 서버에서 가져온 데이터를 가지고 구글차트를 그려보자. 구글차트(Google Chart)는 대시보드에 사용될 일이 많은 툴이므로, Ajax로 데이터를 가져오는 것은 당연한 일이다. 역시나 구글차트 홈페이지에서도 Ajax를 이용한 데이터연동에 관한 매뉴얼이 있다. https://developers.google.com/chart/interactive/docs/php_example 따라만 하면 어렵지 않게 사용할 수 있을 듯하다. 아래 예제 역시 모두 위 사이트에서 가져온 예제이다. html 및 javascript 소스 모두 동일하다. 따로 필요한 건 jquery 라이브러리이며, 이건 http://jquery.com/ 여기가서 받아오자. 아래..

Google Chart Tools 웹페이지에서 가능한 차트가 어떤게 있을까 찾아봤다. 물론 RIA 프레임워크를 이용해서 하면 되지만, html + javascript 영역안에서 해보고 싶었다. 간단하고 심플한 chart 가 없을까.. 했는데 역시나 구글 내부 프로젝트로 있다. Google Chart Tools. 정확한 정보를 전달만 하는 그런 대시보드에서 좋을 듯 하며, 애니메이션 효과가 그렇게 뛰어나지는 않으니 그런 디자인적 요소를 중요하게 생각하는 경우라면 다른 제품을 검색하는 것이 나을 듯 하다. (출처 : https://developers.google.com/chart/ ) Pie, Line, Column, Area Chart 등등.. 대쉬보드에서 쓸만한 차트 종류가 가득하다. 구글에서 제공하는 ..