txt파일을 구글차트에 불러와서 그래프를 띄우는데는 성공했습니다.
하지만 아래 이미지처럼 그래프 밑에 컨트롤러를 달아서 선그래프를 확대 축소해서 보고 싶은데 방법을 모르겠네요.
소스에 무엇을 추가해야할지 몰라 글남깁니다.
고수님들 도와주시면 감사하겠습니다.
<script src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart () {
$.ajax({
url: 'text.txt',
type: 'get',
success: function (txt) {
var dataArray = [['data1', 'data2','data3','data4','data5']];
var txtArray = txt.split('\n');
for (var i = 6; i < txtArray.length; i++) {
var tmpData = txtArray[i].split(',');
dataArray.push([tmpData[0], parseInt(tmpData[1]), parseInt(tmpData[2]), parseInt(tmpData[3]), parseInt(tmpData[4])]);
}
var data = google.visualization.arrayToDataTable(dataArray);
var chart = new google.visualization.LineChart(document.querySelector('#Line_Controls_Chart'));
var options = {
isStacked : 'percent',
focusTarget : 'category',
height : '500',
width : '100%',
legend : 'top'
};
chart.draw(data,options);
//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);
});
//////////////////////////////////////////
}
});
dashboard.bind(control, chart);
dashboard.draw(data);
}
// google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
</script>
<div id="Line_Controls_Chart">
<!-- 라인 차트 생성할 영역 -->
<div id="lineChartArea" style="padding:0px 20px 0px 0px;" width="100%"></div>
<div id="controlsArea" style="padding:0px 20px 0px 0px;"></div>
<!-- 컨트롤바를 생성할 영역 -->
</div>

답변 3개
답변을 작성하려면 로그인이 필요합니다.