구글 차트 ($.ajax를 활용한 차트 출력)

# 구글 차트 라이브러리

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 를 통하여
구글 라이브러리를 연결하고 자바 스크립트를 통하여 콜백방식으로 차트를 그려낼 준비를 한다.


주의할점은 ajax의 async(비동기화)를 false로 바꾸어 동기처리로 바꾸어야한다.
그래야 데이터가 들어올때까지 기다린 후에 자료를 처리한다.

 

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
//구글 차트 라이브러리 로딩
google.load("visualization","1",{
        "packages":["corechart"]
    });
 
//Callback : 구글 차트 로딩이 완료가 된 후에 drawChart라는 함수를 실행한다.
    //responseText : json 데이터를 텍스트로 읽어들임
    //JSON.stringify(j/s객체) : javascript 객체를 json 데이터를 읽어들임 
google.setOnLoadCallback(drawChart);
 
function drawChart(){
    var jsonData = $.ajax({
        url:"/resources/json/sampleData.json",
        dataType:"json",
        async:false
    })
 
//1)데이터 테이블 생성
var data = new google.visualization.DataTable(jsonData);
//2)차트를 출력할 div("chart_div") 지정
//종류 : PieChart , LineChart, ColumnChart
var chart = new    google.visualization.ColumnChart(document.getElementById("chart_div"));
//         var chart = new    google.visualization.PieChart(document.getElementById("chart_div"));
//         var chart = new    google.visualization.LineChart(document.getElementById("chart_div"));
chart.draw(data,{
            title:"차트 예제",
            curveType:"function",
            width:600,
            height:400
        });
</script>
 
 
 
<div id="chart_div"><!--이곳에 차트가 들어감--></div>

 

 

 

# 차트로 뽑아낼 json데이터(sampleData.json)

위의 ajax형식에서 url에 있는 데이터를 불러온다.
url안에는 웹형식의 json을 넣어도 되고 원한다면 본인이 만들어서 저장한 후 위치를 지정해도 된다.
json형태이기 때문에 dataType은 json으로 명시하고 google객체를 이용하여 받아온
json데이터를 넣을 변수와 챠트를 지정해서 출력할 곳을 각각 지정해야한다.

 

{
"cols":[
{"id":"","label":"상품명","pattern":"","type":"string"},
{"id":"","label":"금액","pattern":"","type":"number"}
],
"rows":[
{"c":[{"v":"귤"},{"v":35000}]},
{"c":[{"v":"딸기"},{"v":88000}]},
{"c":[{"v":"레몬"},{"v":16500}]},
{"c":[{"v":"오렌지"},{"v":20000}]},
{"c":[{"v":"키위"},{"v":30000}]},
{"c":[{"v":"포도"},{"v":15000}]}
]
}

# 테스트 출력

챠트속성 지정을 어떻게 하냐에 따라서 차트의 구성이 바뀌게된다.

 

PieChart

ColumnChart

LineChart