스프레드 시트에서 piechart 및 범위 선택 필터를 포함한 Google 대시 보드를 만드는 방법은 무엇입니까?

대시 보드를 Google 스프레드 시트의 범위에 바인딩하는 방법을 아는 사람이 있습니까? 내 현재 코드에서스프레드 시트에서 piechart 및 범위 선택 필터를 포함한 Google 대시 보드를 만드는 방법은 무엇입니까?

, 내가 대시 보드가 이렇게 같은 Google 스프레드 시트의 범위에 바인딩 될 수 있음을 가정하고 있지만, setDataTable 함수 호출은 나에게 어려움을주고있다.

Link to the spreadsheet

선택 시트 이름과 시간 만이 열입니다.

<html> 
      <head> 
      <!--Load the AJAX API--> 
      <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
      <script type="text/javascript"> 

       // Load the Visualization API and the controls package. 
       google.load('visualization', '1.0', {'packages':['controls']}); 

       // Set a callback to run when the Google Visualization API is loaded. 
       google.setOnLoadCallback(drawDashboard); 

       // Callback that creates and populates a data table, 
       // instantiates a dashboard, a range slider and a pie chart, 
       // passes in the data and draws it. 
       function drawDashboard() { 

       // Create our data table. 
       var data = google.visualization.arrayToDataTable([ 
        ['Name', 'Donuts eaten'], 
        ['Michael' , 5], 
        ['Elisa', 7], 
        ['Robert', 3], 
        ['John', 2], 
        ['Jessica', 6], 
        ['Aaron', 1], 
        ['Margareth', 8] 
       ]); 

       // Create a dashboard. 
       var dashboard = new google.visualization.Dashboard(
        document.getElementById('dashboard_div')); 

       // Create a range slider, passing some options 
       var donutRangeSlider = new google.visualization.ControlWrapper({ 
        'controlType': 'NumberRangeFilter', 
        'containerId': 'filter_div', 
        'options': { 
        'filterColumnLabel': 'Donuts eaten' 
        } 
       }); 

       // Create a pie chart, passing some options 
       var pieChart = new google.visualization.ChartWrapper({ 
        'chartType': 'PieChart', 
        'containerId': 'chart_div', 
        'options': {`enter code here` 
        'width': 300, 
        'height': 300, 
        'pieSliceText': 'value', 
        'legend': 'right' 
        } 
       }); 

       // Establish dependencies, declaring that 'filter' drives 'pieChart', 
       // so that the pie chart will only display entries that are let through 
       // given the chosen slider range. 
       dashboard.bind(donutRangeSlider, pieChart); 

       // Draw the dashboard. 
       dashboard.draw(data); 
       } 
      </script> 
      </head> 

      <body> 
      <!--Div that will hold the dashboard--> 
      <div id="dashboard_div"> 
       <!--Divs that will hold each control and chart--> 
       <div id="filter_div"></div> 
       <div id="chart_div"></div> 
      </div> 
      </body> 
     </html>

출처

2015-01-09 Abhijeet Arora

그래서 이름/시간을 dataTable로 변환 하시겠습니까? 당신은 같은 다음 데이터 테이블로 변환 HTML 페이지로 돌아가, 구글 서버에서 배열을 변환해야합니다 :

는 HTML 페이지에서

function getTimes(){ 
    var playTimes = SpreadsheetApp.openById("1csv3OQ0IrVNyNIALcpqoLewccgYEEwErsS-Tp43IZfQ").getSheetByName("players").getRange("B1:E").getValues(); 
    for(i in playTimes){ 
    playTimes[i] = [ playTimes[i].splice(0, 1)[0], playTimes[i].splice(2, 1)[0] ]; 
    } 
    return playTimes; 
}

code.gs에서

->는 변경

function loadPlayTimes(){ 
    google.script.run.withSuccessHandler(drawDashboard).getTimes(); 
}

하고 다음과 같은 데이터 테이블을 만들 : google.setOnLoadCallback(loadPlayTimes);-google.setOnLoadCallback(drawDashboard);, 또한 매개 변수를 받아 function drawDashboard(playTimes)에 function drawDashboard()을 변경

,536,

var data = google.visualization.arrayToDataTable(playTimes);

출처

2015-01-09 12:50:12 Kriggs

스프레드 시트에서 piechart 및 범위 선택 필터를 포함한 Google 대시 보드를 만드는 방법은 무엇입니까?

답변

관련 문제