구글 차트(Google Chart) 사이즈 resized Script 함수

(인터넷 브라우저)윈도우 창을 줄이거나, 늘리면, Google Chart사이즈는 변동이 없습니다.

Google Chart 내용은 HTML5/SVG객체 기반으로 되어 있기에, 자동으로 사이즈가 변경이 안된답니다.

이를 해결하기 위해서, $(window) 객체에 resize함수 처리를 추가해 줘서, 사이즈에 맞게 다시금 drawing 작업을 추가해 주면, 브라우저의 창의 사이즈가 변경되는 동시에, Google Chart도 사이즈가 변경되게 됩니다.

Google Chart 창 크기에 맞춰 사이즈 조절하기

[Chart 사이즈만 변경하기]

<script>
	// Google Chart resize
    $(window).resize(function() {
        if(this.resizeTO) clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function() {
            drawVisualization();
        }, 200);
    });
</script>

 

 

 

윈도우 사이즈를 변경 시, Javascript을 이용해서, Redrawing으로 처리하면, 이쁘게 변경이 된답니다.

//create trigger to resizeEnd event     
$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

//redraw graph when window resize is completed  
$(window).on('resizeEnd', function() {
    drawChart(data); 
});

출처: http://stackoverflow.com/questions/8950761/google-chart-redraw-scale-with-window-resize

 

[ Google Chart Resize ]

// Google Chart resize
// create trigger to resizeEnd event
$(window).resize(function() {
  if(this.resizeTO) clearTimeout(this.resizeTO);
  this.resizeTO = setTimeout(function() {
   $(this).trigger('resizeEnd');
  }, 00);
});

// redraw graph when window resize is completed
$(window).on('resizeEnd', function() {
  drawVisualization();
});