如何从电子表格创建包括饼图和范围选择过滤器的谷歌仪表板？答案

【问题标题】：How to create google dashboard including piechart and range select filter from a spreadsheet?如何从电子表格创建包括饼图和范围选择过滤器的谷歌仪表板？
【发布时间】：2015-01-09 05:21:44
【问题描述】：

有谁知道如何将仪表板绑定到 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>

【问题讨论】：

标签： google-apps-script google-sheets google-visualization

【解决方案1】：

那么，您只想将名称/时间转换为数据表吗？您必须在 google 服务器中转换数组，返回 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 );

【讨论】：