How to create google dashboard including piechart

Does anyone know how to bind the dashboard to a range from Google Spreadsheet?

In my current code, I am assuming that the dashboard can be bound to a range from Google Spreadsheet like so, but the setDataTable function call is giving me a hard time.

Link to the spreadsheet

Select only two columns from the sheet name and time.

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

So, all you want is to transform the Name/Time to a dataTable? You'll have to transform the array in the google server, return to the HTML page then transform to dataTable, as such:

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

in the HTML page -> change the google.setOnLoadCallback(drawDashboard); to google.setOnLoadCallback(loadPlayTimes);, also change function drawDashboard() to function drawDashboard( playTimes ) to accept a parameter:

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

And create the dataTable as such:

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

How to create google dashboard including piechart

问题:

回答1:

收藏的人(0)

How to create google dashboard including piechart

问题:

回答1:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮