[Google Chart] 구글차트 json연동 예제 (x,y축)

＋구글차트API를 json연동하여 예제＋

 

아래링크를 참고한다.

https://developers.google.com/chart/interactive/docs/gallery/linechart

선 차트  |  Charts  |  Google Developers

 

 

google chart

 

google chart 릴리즈

 

 

주의사항

최근릴리즈된 구글차트 api경우 이전에 개발된 소스로 하면 아래와 같은 오류가 발생된다.

아래 오류 발생시 current말고 버전숫자를 입력

Cannot read properties of undefined (reading 'length')

 

<!-- 최신버전 -->
google.charts.load('current', {'packages':['line', 'corechart']});

<!-- 특정버전 51 아래로 -->
google.charts.load('51', {'packages':['line', 'corechart']});

 

---

 

라인차트 (X,Y 축) 예제 - Creating Material Line Charts

아래샘플소스는 2023/4월 릴리즈된 api소스가 아닌 2021년 릴리즈된 소스로 개발되었다.

ajax의 data.chartList 데이터는  백엔드 데이터는 스프링 기준 List<VO> 또는 List<Map> 형식으로 받아오면 된다.

 

//html소스
<div id="line_chart"></div>


//스크립트소스
var global_count = 0;
const global_format_time = 'yyyy.MM.dd HH:mm';
		
google.charts.load('51', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(chartData);

function chartData(){		
    $.ajax({ 
        //.........코드작성
        url	 : ...,			
        contentType:"application/json",
        dataType:"json", 
    }).done(function(data) {
        var chartList = data.chartList;
    		
        var options = {
            title : 'Device A',
            series: {},
            legend: { position: 'top', alignment: 'start' },
            pointsVisible: true,
            pointSize: 4,
            theme: 'material',
            vAxes: {
                0: {title: '온도 °C'}
            },
            hAxis: {
                format: global_format, 
                gridlines:{
                    count:10
                }
            },
        };
	    			
        var data_table = new google.visualization.DataTable();
	    			
        data_table.addColumn('date', 'Time of Day');
        data_table.addColumn('number', "온도 °C");
	    			
        if(chartList.length > 0){
            data_table.addRows(chartList.length);
        }else{
            data_table.addRows(1);
        }
	    			
        $.each(chartList, function(i, obj) {
            var global_count = 0;
			
            //ex) chartDate : 20230102112233
            var yyyy = Number(obj.chartDate.substring(0, 4)); 
            var mm = Number(obj.chartDate.substring(4, 6))-1;
            var dd = Number(obj.chartDate.substring(6, 8));
            var hh = Number(obj.chartDate.substring(8, 10));
            var mm24 = Number(obj.chartDate.substring(10, 12));
            var ss = Number(obj.chartDate.substring(12, 14));
    			    	
            data_table.setCell(i,global_count,new Date(yyyy,mm,dd,hh,mm24,ss));
            global_count++;
		   			
             data_table.setCell(i,global_count,parseFloat(obj.returnAirTemperature));
             options['series'][global_count-1] = {targetAxisIndex: 0, color:"#4374D9"};
             global_count++;
        });
    			    
        var date_formatter = new google.visualization.DateFormat({ 
            pattern: global_format_time
        });
        date_formatter.format(data_table, 0);
    				
        var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
        chart.draw(data_table, google.charts.Line.convertOptions(options));
    			    
    }).fail(function (jqXHR, textStatus, errorThrown) { 
        console.log(errorThrown); 
    });
}

 

실행화면

google chart

 

---

 

이중Y차트예제 - Dual-Y Charts

위소스내용에서 ajax 부분만 수정하면된다.

//html소스
<div id="line_chart"></div>


//스크립트소스
var global_count = 0;
const global_format_time = 'yyyy.MM.dd HH:mm';
		
google.charts.load('51', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(chartData);

$.ajax({ 
    .....
    }).done(function(data) {
        var chartList = data.chartList;
   		   		
        var options = {
            title : 'Device A',
            series: {},
            legend: { position: 'top', alignment: 'start' },
            pointsVisible: true,
            pointSize: 4,
            theme: 'material',
            vAxes: {
                0: {title: '온도 °C'},
                1: {title: '습도 %'}
            },
            hAxis: {
                format: global_format, 
                gridlines:{
                    count:10
                }
            },
        };
	    			
        var data_table = new google.visualization.DataTable();
	    			
         data_table.addColumn('date', 'Time of Day');
         data_table.addColumn('number', "온도 °C");
         data_table.addColumn('number', "습도 %");
	    			
         if(chartList.length > 0){
             data_table.addRows(chartList.length);
         }else{
             data_table.addRows(1);
         }
	    			
         $.each(chartList, function(i, obj) {
             var global_count = 0;
             var yyyy = Number(obj.chartDate.substring(0, 4)); 
             var mm = Number(obj.chartDate.substring(4, 6))-1;
             var dd = Number(obj.chartDate.substring(6, 8));
             var hh = Number(obj.chartDate.substring(8, 10));
             var mm24 = Number(obj.chartDate.substring(10, 12));
             var ss = Number(obj.chartDate.substring(12, 14));
    			    	
             data_table.setCell(i,global_count,new Date(yyyy,mm,dd,hh,mm24,ss));
             global_count++;
		   			
             data_table.setCell(i,global_count,parseFloat(obj.temperatureSetpoint));
             options['series'][global_count-1] = {targetAxisIndex: 0, color:"#4374D9"};
             global_count++;

             data_table.setCell(i,global_count,parseFloat(obj.humidity));
             options['series'][global_count-1] = {targetAxisIndex: 1, color:"#109618"};
             global_count++;
        });
    			    
        var date_formatter = new google.visualization.DateFormat({ 
            pattern: global_format_time
        });
        date_formatter.format(data_table, 0);
    				
        var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
        chart.draw(data_table, google.charts.Line.convertOptions(options));
    			    
    }).fail(function (jqXHR, textStatus, errorThrown) { 
        console.log(errorThrown); 
    });

 

실행화면

google chart