HTML如何使用谷歌电子表格中的数据作为仪表板的数据表?

时间:2017-06-14 19:03:00

标签: html google-sheets google-chartwrapper

我是否需要创建一个函数来查询电子表格然后将其发送到仪表板,还是可以在创建仪表板的功能中执行此操作?

以下是我曾经尝试过的失败。我尝试了其他选择,但这是我最近的选择,所以它既不是我的最好,也不是我最糟糕的选择。如何将电子表格用作仪表板和图表的数据表?

<html>

<head>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

  google.charts.load('current', {'packages':['corechart', 'controls']});
  google.charts.setOnLoadCallback(drawDashboard);

  function getData (){
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1Yjg20TA_quJXDs1ATAjoKkMgYaTSkfm3PXJAou7gf-Y/edit#gid=0');
    return query.getDataTable();
  }

  function drawDashboard() {

    var data = getData();

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

    var varSlider = new google.visualization.ControlWrapper({
        'controlType' : 'NumberRangeFilter',
        'containerId' : 'filter_div',
        'options' : {
            'filterColumnLabel' : 'random label'}
    });

    var pieChart = new google.visualization.ChartWrapper({
        'chartType' : 'PieChart',
        'containerId' : 'chart_div',
        'options' : {
            'width' : 300,
            'height' : 300,
            'pieSliceText' : 'value'
            'legend' : 'right'
        }
    });
    dashboard.bind(varSlider, PieChart);
    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="chart_div"></div>
  <div id="filter_div"></div>
</div>
</body>
</html>

0 个答案:

没有答案