프로그래밍 일지

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

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 ..

이상하게 내 블로그에서만 SyntaxHighlighter 사용시에 글자간격(자간)이 너무 좁게 나왔다. 현재는 고쳐서 잘나오지만.. 예전 이미지와 제대로 수정한 이미지를 비교하면 많이 다르다. 아놔 훨씬 보기 편해졌다... 티스토리에서 관리자 화면에 들어가면 [HTML/CSS 편집] 메뉴가 존재한다. 내가 사용하고 있는 스킨에 기본 style.css 에 letter-spacing 옵션이 지정되 있어서 문제였던 거 같다. 본문 적용 부분에 leteer-spacing:-1px; 로 되있는 것을 찾았다. /* 본문 */ .entry .desc { (..생략..) letter-spacing:-1px; } 아 이게 문제였다. 그렇다고 이걸 바꿔버리기엔 본문에 적용되어 있던 속성이니 좀 달라질게 뻔하고, Synta..

SyntaxHighlighter 를 티스토리에 적용하고 나면 몬가 아쉽다. 그건 바로 폰트 크기였으니.. 글씨 크기가 너무 작은 것이다. 하지만 간단히 수정할 수 있다. 받은 css 파일중에 shCore.css 파일이 있다. 그 파일을 열어 수정할 것이다. 열어서보면 font-size 속성이 1em 으로 되있을 것이다. 난 12pt 로 수정했고 파일을 저장했다. 이 파일을 티스토리 관리메뉴중에 [html/css 편집] - [파일업로드] 화면에서 수정한 파일을 다시 올린다. .syntaxhighlighter{ font-size: 12pt !important; } 테스트해보니 글씨가 커졌다.

티스토리 블로그에 보면 소스코드들이 이쁘게 스타일링 되있는 것을 볼 수 있다. SyntaxHighlighter 덕분인데, 제공하는 js와 css 파일들을 알맞게 셋팅해주면 앞으로 이쁜 소스코드를 블로그에서도 볼 수 있다. 아래 웹사이트에 가서 다운로드 한다.http://alexgorbatchev.com/SyntaxHighlighter/ 다운받은 후 압축을 풀어서 styles 및 scripts 파일들을 티스토리에 추가하며, html 소스에도 추가한다. .syntaxhighlighter{ padding: 5px 0; } 위와 같이 SyntaxHighlighter 로 소스가 이쁘게 나오는 것을 볼 수 있다.하지만 맨 오른쪽에 스크롤바가 항상 생기는데 css 에다 위 소스를 추가 해주면 문제가 해결된다.