JSON 데이터 읽어서 그래프 그리기

Bootstrap 그래프 샘플을 가지고 테스트한 걸 적어둔다.

var loadJSON = './test.json';
$.getJSON(loadJSON, function(data){
    $each(data, function(i, item){
        console.log(item.name);
    });
});

사이트에 나온 실제 그래프 그려주는 예제에 위 코드를 적용하여 만들면 아래와 같다.

<script> var ctx = document.getElementById("myChart").getContext('2d'); var loadJSON = './graph.json'; // 서버에서 제공하는 데이터 $.getJSON(loadJSON, function(data){     var names = new Array();     var datas = new Array();     $.each(data, function(i,item){         names.push(item.name);         datas.push(item.data);     });     console.log(names);     console.log(datas);     var myChart = new Chart(ctx, {     type: 'bar',     data: {       labels: names, // JSON 파일을 읽어서 배열로 저장하여 처리       datasets: [{         label: '가입자수',         data: datas, // JSON 파일을 읽어서 배열로 저장하여 처리         backgroundColor: [           'rgba(255, 99, 132, 0.2)',           'rgba(54, 162, 235, 0.2)',           'rgba(255, 206, 86, 0.2)',           'rgba(75, 192, 192, 0.2)',           'rgba(153, 102, 255, 0.2)',           'rgba(153, 102, 255, 0.2)',           'rgba(255, 159, 64, 0.2)'         ],         borderColor: [           'rgba(255,99,132,1)',           'rgba(54, 162, 235, 1)',           'rgba(255, 206, 86, 1)',           'rgba(75, 192, 192, 1)',           'rgba(153, 102, 255, 1)',           'rgba(153, 102, 255, 1)',           'rgba(255, 159, 64, 1)'         ],         borderWidth: 1       }]     },     options: {       scales: {         yAxes: [{           ticks: {             beginAtZero: true           }         }]       }     }     }); }); </script>