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

Question

I have been having trouble trying to set up a Google Charts dashboard with two charts and two controlwrappers using two queries to a Google sheet.我在尝试使用对 Google 工作表的两个查询来设置包含两个图表和两个控件包装器的 Google 图表仪表板时遇到了问题。

I have gone through many of the examples on here demonstrating multiple graphs from single sources, or multiple queries for multiple charts but no control aspect.我已经通过这里的许多示例演示了来自单一来源的多个图形，或对多个图表的多个查询，但没有控制方面。

I am ultimately trying to run two queries of a single Google sheet, each query pulling a different set of data from the sheet based on the query string, then displaying the data in a graph.我最终尝试对单个 Google 工作表运行两个查询，每个查询根据查询字符串从工作表中提取一组不同的数据，然后在图表中显示数据。 There would also be a filterColumn control wrapper that selects data from the data table.还有一个 filterColumn 控件包装器，用于从数据表中选择数据。

I have the following code which works for one query and graph.我有以下代码适用于一个查询和图形。 When I try to double up the process so that I can display both in one page, one or the other graph will appear, but not both.当我尝试将过程加倍以便我可以在一页中显示两者时，会出现一个或另一个图形，但不会同时出现。 I get that this may be something to do with a conflict between the queries, but I don't understand it.我知道这可能与查询之间的冲突有关，但我不明白。 I tried building one function that ran both queries that would be initiated by the google.setOnLoadCallback function.我尝试构建一个函数来运行由 google.setOnLoadCallback 函数启动的两个查询。 However, that didn't work.然而，这并没有奏效。 I tried to combine the various parts using others examples as guides, but those don't work.我尝试使用其他示例作为指南来组合各个部分，但这些都不起作用。 This is the closest version, and when I refresh it several times in a row sometimes one chart will load, other times the other, but never both.这是最接近的版本，当我连续刷新几次时，有时会加载一个图表，有时会加载另一个，但不会同时加载。

If someone can point me in the right direction I would appreciate it.如果有人能指出我正确的方向，我将不胜感激。

<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

first , need to use loader.js for loading the libraries,首先，需要使用loader.js来加载库，

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

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

according to the release notes ...根据发行说明...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently.通过jsapi加载器保持可用的 Google Charts 版本不再持续更新。 Please use the new gstatic loader from now on.请从现在开始使用新的 gstatic 加载器。

second, you should only use google.setOnLoadCallback once per page其次，你应该每页只使用一次google.setOnLoadCallback

it can also be included in the google.charts.load statement, as in the following example它也可以包含在google.charts.load语句中，如下例所示

next, the chartType is incorrect and needs to exist in the packages loaded接下来， chartType不正确，需要存在于加载的packages

for core charts, load package 'corechart' and use --> chartType: 'BarChart'对于核心图表，加载包'corechart'并使用 --> chartType: 'BarChart'

for material charts, load package: 'bar' --> chartType: 'Bar'对于材料图表，加载包： 'bar' --> chartType: 'Bar'

(don't recommend using material charts, several options don't work) （不推荐使用材质表，几个选项都不行）

finally , since the chart wrappers are drawn using a dashboard,最后，由于图表包装器是使用仪表板绘制的，
don't need these options --> 'dataSourceUrl' or 'query'不需要这些选项 --> 'dataSourceUrl'或'query'

see following working snippet...请参阅以下工作片段...

 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 Charts 仪表板中运行两个查询并显示两个带有控件的图表

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-10-06 21:29:09

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-10-06 21:29:09

解决方案1
1 已采纳 2016-10-06 21:29:09