我如何运行两个查询并在 Google 图表仪表板中显示两个带有控件的图表

Question

我在尝试使用两个查询 Google sheet.

来设置具有两个图表和两个控件包装器的 Google 图表仪表板时遇到了问题

我已经通过此处的许多示例演示了来自单一来源的多个图表，或对多个图表的多个查询但没有控制方面。

我最终尝试运行单个 Google sheet 的两个查询，每个查询根据查询从 sheet 中提取不同的数据集字符串，然后在图形中显示数据。还会有一个 filterColumn 控件包装器，它从数据 table.

中选择数据

我有以下适用于一个查询和图表的代码。当我尝试将过程加倍以便在一页中显示两者时，将出现一个或另一个图表，但不会同时出现两个。我知道这可能与查询之间的冲突有关，但我不明白。我尝试构建一个运行两个查询的函数，该函数将由 google.setOnLoadCallback 函数启动。但是，那没有用。我尝试使用其他示例作为指南来组合各个部分，但这些都不起作用。这是最接近的版本，当我连续刷新几次时，有时会加载一个图表，有时会加载另一个图表，但不会同时加载。

如果有人能指出正确的方向，我将不胜感激。

<html>    
<head>
    <title>Google visualisation demo: chart query controls</title>

    <!--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.
        // Packages for all the other charts you need will be loaded
        // automatically by the system.
        google.load('visualization', '1.1', {
            'packages': ['controls', 'linechart', 'corechart']
        });

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

        function initialize() {
            var queryString = encodeURIComponent("select B, ((5-avg(F))*.4) + ((5-avg(G))*.4) + ((5-avg(H))*.2) + ((5-avg(I))*.125) + ((5-avg(J))*.125) where C contains 'Sept 26' and E contains 'Forced' group by B");

            // Replace the data source URL on next line with your data source URL.
            var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1_DuiDpbRyegaN0zYR4iYp8ZXefO-kIV-F054e9aIcIY/gviz/tq?gid=1757506986&headers=1&tq=' + queryString);

            // Send the query with a callback function.
            query.send(drawDashboard);
        }

        function initialize2() {
            var queryString2 = encodeURIComponent("select B, ((5-avg(F))*.4) + ((5-avg(G))*.4) + ((5-avg(H))*.2) + ((5-avg(I))*.125) + ((5-avg(J))*.125) where C contains 'Sept 26' and E contains 'Unforced' group by B");

            var query2 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1_DuiDpbRyegaN0zYR4iYp8ZXefO-kIV-F054e9aIcIY/gviz/tq?gid=1757506986&headers=1&tq=' + queryString2);

            // Send the query with a callback function.
            query2.send(drawDashboard2);
        }

        function drawDashboard(response) {
            var data = response.getDataTable();
            // Everything is loaded. Assemble your dashboard...
            var namePicker = new google.visualization.ControlWrapper({
                'controlType': 'CategoryFilter',
                'containerId': 'filter_div',
                'options': {
                    'filterColumnLabel': 'Sample ID',
                    'ui': {
                        'labelStacking': 'vertical',
                        'allowTyping': false,
                        'allowMultiple': false
                    }
                }
            });
            var laptimeChart = new google.visualization.ChartWrapper({
                'chartType': 'Bar',
                'containerId': 'chart_div',
                'dataSourceUrl': 'https://docs.google.com/spreadsheets/d/1_DuiDpbRyegaN0zYR4iYp8ZXefO-kIV-F054e9aIcIY/gviz/tq?gid=1757506986&headers=1',
                'query': "select B, ((5-avg(F))*.4) + ((5-avg(G))*.4) + ((5-avg(H))*.2) + ((5-avg(I))*.125) + ((5-avg(J))*.125) where C contains 'Sept 26' and E contains 'Forced' group by B",
                'options': {
                    'width': 1600,
                    'height': 800,
                    axes: {
                        x: {
                            0: {
                                side: 'top',
                                label: 'Sample ID'
                            } // Top x-axis.
                        }
                    },
                    chart: {
                        title: 'Aging Panel Results',
                        subtitle: 'Beer force-aged for 2 weeks',
                    },
                    'legend': {
                        position: 'none'
                    },
                    'colors': ['#ed8907']
                }
            });

            var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).
            bind(namePicker, laptimeChart).
            draw(data)
        }

        function drawDashboard2(response2) {
            var data2 = response2.getDataTable();
            // Everything is loaded. Assemble your dashboard...
            var namePicker2 = new google.visualization.ControlWrapper({
                'controlType': 'CategoryFilter',
                'containerId': 'filter_div2',
                'options': {
                    'filterColumnLabel': 'Sample ID',
                    'ui': {
                        'labelStacking': 'vertical',
                        'allowTyping': false,
                        'allowMultiple': false
                    }
                }
            });
            var laptimeChart2 = new google.visualization.ChartWrapper({
                'chartType': 'Bar',
                'containerId': 'chart_div2',
                'options': {
                    'width': 1600,
                    'height': 800,
                    axes: {
                        x: {
                            0: {
                                side: 'top',
                                label: 'Sample ID'
                            } // Top x-axis.
                        }
                    },
                    chart: {
                        title: 'Aging Panel Results',
                        subtitle: 'Beer aged 2 weeks',
                    },
                    'legend': {
                        position: 'none'
                    },
                    'colors': ['Red']
                }
            });

            var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div2')).
            bind(namePicker2, laptimeChart2).
            draw(data2)
        }
    </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>

    <div id="dashboard_div2">
        <!--Divs that will hold each control and chart-->
        <div id="filter_div2"></div>
        <div id="chart_div2"></div>
    </div>

</body>

</html>

Answer 1

首先，需要使用loader.js加载库，

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

不是这个...
<script src="https://www.google.com/jsapi"></script>

根据 release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.

second,你应该每页只使用google.setOnLoadCallback一次

也可以包含在google.charts.load语句中，如下例

next, chartType不正确，需要存在于packages加载的

对于 core 图表，加载包 'corechart' 并使用 --> chartType: 'BarChart'

对于material图表，加载包：'bar' --> chartType: 'Bar'

（不建议使用material图表，几个选项都不行）

最后，因为图表包装是使用仪表板绘制的，
不需要这些选项 --> 'dataSourceUrl' 或 'query'

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    var queryString = encodeURIComponent("select B, ((5-avg(F))*.4) + ((5-avg(G))*.4) + ((5-avg(H))*.2) + ((5-avg(I))*.125) + ((5-avg(J))*.125) where C contains 'Sept 26' and E contains 'Forced' group by B");
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1_DuiDpbRyegaN0zYR4iYp8ZXefO-kIV-F054e9aIcIY/gviz/tq?gid=1757506986&headers=1&tq=' + queryString);
    query.send(drawDashboard);

    var queryString2 = encodeURIComponent("select B, ((5-avg(F))*.4) + ((5-avg(G))*.4) + ((5-avg(H))*.2) + ((5-avg(I))*.125) + ((5-avg(J))*.125) where C contains 'Sept 26' and E contains 'Unforced' group by B");
    var query2 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1_DuiDpbRyegaN0zYR4iYp8ZXefO-kIV-F054e9aIcIY/gviz/tq?gid=1757506986&headers=1&tq=' + queryString2);
    query2.send(drawDashboard2);
  },
  packages: ['controls', 'corechart']
});

function drawDashboard(response) {
  var namePicker = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'filter_div',
    options: {
      filterColumnLabel: 'Sample ID',
      ui: {
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: false
      }
    }
  });

  var laptimeChart = new google.visualization.ChartWrapper({
    chartType: 'BarChart',
    containerId: 'chart_div',
    options: {
      width: 1600,
      height: 800,
      axes: {
        x: {
          0: {
            side: 'top',
            label: 'Sample ID'
          }
        }
      },
      chart: {
        title: 'Aging Panel Results',
        subtitle: 'Beer force-aged for 2 weeks',
      },
      legend: {
        position: 'none'
      },
      colors: ['#ed8907']
    }
  });

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).
  bind(namePicker, laptimeChart).
  draw(response.getDataTable());
}

function drawDashboard2(response) {
  var namePicker = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'filter_div2',
    options: {
      filterColumnLabel: 'Sample ID',
      ui: {
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: false
      }
    }
  });

  var laptimeChart = new google.visualization.ChartWrapper({
    chartType: 'BarChart',
    containerId: 'chart_div2',
    options: {
      width: 1600,
      height: 800,
      axes: {
        x: {
          0: {
            side: 'top',
            label: 'Sample ID'
          }
        }
      },
      chart: {
        title: 'Aging Panel Results',
        subtitle: 'Beer force-aged for 2 weeks',
      },
      legend: {
        position: 'none'
      },
      colors: ['#ed8907']
    }
  });

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div2')).
  bind(namePicker, laptimeChart).
  draw(response.getDataTable());
}

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

<div id="dashboard_div">
  <div id="filter_div"></div>
  <div id="chart_div"></div>
</div>

<div id="dashboard_div2">
  <div id="filter_div2"></div>
  <div id="chart_div2"></div>
</div>

我如何运行两个查询并在 Google 图表仪表板中显示两个带有控件的图表

How do I run two queries and display two charts with controls in a Google Charts dashboard

javascript

google-visualization

google-query-language

我如何 运行 两个查询并在 Google 图表仪表板中显示两个带有控件的图表

How do I run two queries and display two charts with controls in a Google Charts dashboard

javascript

google-visualization

google-query-language

我如何运行两个查询并在 Google 图表仪表板中显示两个带有控件的图表