구글차트 컨트롤러를 달고 싶습니다.

구글차트 컨트롤러를 달고 싶습니다.

QA

구글차트 컨트롤러를 달고 싶습니다.

답변 3

본문

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>
 

 

2009793974_1578648748.4558.png

이 질문에 댓글 쓰기 :

답변 3

차트는 option에 위에서 연동되고 js특정상 ajax로 호출해서 값을 동적으로 변환후 가져와야하는이슈가있어서 어느정도는 숙련도가 필요합니다.

 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
  • 질문이 없습니다.
전체 0
© SIRSOFT
현재 페이지 제일 처음으로