프로그래밍 일지

이전 포스팅에서 설명한 3번째 방식으로 서버로부터 데이터를 받으려 한다. var data = new google.visualization.DataTable( { cols: [{id: 'task', label: 'Employee Name', type: 'string'}, {id: 'startDate', label: 'Start Date', type: 'date'}], rows: [{c:[{v: 'Mike'}, {v: new Date(2008, 1, 28), f:'February 28, 2008'}]}, {c:[{v: 'Bob'}, {v: new Date(2007, 5, 1)}]}, {c:[{v: 'Alice'}, {v: new Date(2006, 7, 16)}]}, {c:[{v: 'Frank'}, {v: ..

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 객체를 만들어 놓고, 컬럼값들을 정의하고 ..

한글이 왜 깨져서 나올까. JSP 혹은 서블릿(Servlet) 을 이용하다보면 처음에 봉착하는 문제가.. 한글이 깨져서 나오는 것이다. 왜 한글이 깨지는 걸까. 대부분 문자인코딩이라는 아주 막연한 단어에 이게 문제야 라고 말을 할 뿐이지 어디가 문제이고 어떻게 고쳐야 하는지 알길이 없다. html 문서의 기본 인코딩은 "ISO-8859-1" 라는 기본지식을 가지고 시작해야 한다. 저 "ISO-8859-1" 가 모길래? ISO/IEC 8859-1컴퓨터에서 8비트로 문자를 나타내기 위한 ISO와 IEC의 공동 표준이다. 가장 널리 쓰이며 대부분의 서유럽 언어를 지원한다. 네덜란드어(일부[* 1]), 노르웨이어, 덴마크어, 독일어, 로만슈어, 스웨덴어 스코틀랜드 게일어, 아이슬란드어, 아일랜드어, 에스파냐어,..

Maven Dependency 검색에 문제가 있다면 2가지 해결방법이 있다.하나는 이클립스 시작할 때 매번 index 를 업데이트 받게 되는 것과.둘째는 내가 index 업데이트 받고 싶을 때만 받는 경우. 이클립스 시작할 때 Maven Index 업데이트 하기. [Window] - [Preference] 에서 Maven 설정중에 "Download repository index updates on startup" 을 선택하자. 이클립스를 재실행 해보면 아래와 같이 index 를 업데이트 하게 된다. 매번 이클립스 시작할 때마다 업데이트 하냐고 버벅거리는게 싫다! 나 역시 이클립스가 켜질 때 Maven index 를 업데이트 받냐고 버벅거리는 게 싫었다. 그래서 위의 체크박스는 해제해 놓는다. 항상 최신 ..

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/ 여기가서 받아오자. 아래..

Download 서버에서 ajax 방법으로 데이터를 받아오게 될 때, 어떤 형식으로 데이터를 받아올지 고민을 하게 된다. XML ? JSON ? 우선 여기서는 JSON 표현식의 문자열을 서버로부터 받을 것이므로, 그 문자열를 파싱을 해서 자바스크립트 객체로 만들어야 데이터로 접근을 할 수 있다. eval 표현식으로 변환이 가능하며, 다른 방법도 있으니 알아보자. https://github.com/douglascrockford/JSON-js 위 웹사이트에가서 json.js 파일을 다운받아 html 파일에 붙이자. JSON.parse() , toJSONString() 자주 쓸 기능 2개만 알아보자. var result = "{\"a\":0, \"b\":1000, \"c\":\"abc\"}"; var obj ..

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