如何創建谷歌儀表板，包括電子表格中的餅圖和範圍選擇過濾器？

有誰知道如何將儀表板結合，從谷歌電子表格的範圍？如何創建谷歌儀表板，包括電子表格中的餅圖和範圍選擇過濾器？

在我當前的代碼，我假設的儀表盤可以綁定到，像這樣一個範圍從谷歌電子表格，但setDataTable函數調用是給了我一個困難時期。

選擇從工作表名稱和時間只有兩列。

<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

所以，你想要的只是將名稱/時間轉換爲數據表？你必須數組轉換在谷歌服務器，返回的HTML頁面，然後轉換爲dataTable的，因爲這樣的：

在code.gs

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; 
}

在HTML頁面

- >更改google.setOnLoadCallback(drawDashboard);到google.setOnLoadCallback(loadPlayTimes);，也改變function drawDashboard()到function drawDashboard(playTimes)接受一個參數：

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

並創建數據表這樣：

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

來源

2015-01-09 12:50:12 Kriggs

如何創建谷歌儀表板，包括電子表格中的餅圖和範圍選擇過濾器？

回答

相關問題