Comment exécuter deux requêtes et afficher deux graphiques avec des commandes dans un tableau de bord Google Charts

M. Murphy

J'ai eu du mal à configurer un tableau de bord Google Charts avec deux graphiques et deux controlwrappers en utilisant deux requêtes sur une feuille Google.

J'ai parcouru de nombreux exemples illustrant ici plusieurs graphiques provenant de sources uniques ou plusieurs requêtes pour plusieurs graphiques mais aucun aspect de contrôle.

J'essaie finalement d'exécuter deux requêtes d'une seule feuille Google, chaque requête tirant un ensemble différent de données de la feuille en fonction de la chaîne de requête, puis affichant les données dans un graphique. Il y aurait également un wrapper de contrôle filterColumn qui sélectionne les données de la table de données.

J'ai le code suivant qui fonctionne pour une requête et un graphique. Lorsque j'essaie de doubler le processus afin de pouvoir afficher les deux sur une page, l'un ou l'autre graphique apparaîtra, mais pas les deux. Je comprends que cela peut être dû à un conflit entre les requêtes, mais je ne le comprends pas. J'ai essayé de créer une fonction qui exécutait les deux requêtes qui seraient lancées par la fonction google.setOnLoadCallback. Cependant, cela n'a pas fonctionné. J'ai essayé de combiner les différentes parties en utilisant d'autres exemples comme guides, mais ceux-ci ne fonctionnent pas. C'est la version la plus proche, et lorsque je la rafraîchis plusieurs fois de suite, parfois un graphique se chargera, d'autres fois l'autre, mais jamais les deux.

Si quelqu'un peut me diriger dans la bonne direction, je l'apprécierais.

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

d'abord , besoin d'utiliser loader.jspour charger les bibliothèques,

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

pas ça ...
<script src="https://www.google.com/jsapi"></script>

selon les notes de version ...

La version de Google Charts qui reste disponible via le jsapichargeur n'est plus mise à jour de manière cohérente. Veuillez utiliser le nouveau chargeur gstatic à partir de maintenant.

deuxièmement, vous ne devez utiliser google.setOnLoadCallbackqu'une seule fois par page

il peut également être inclus dans l' google.charts.loadinstruction, comme dans l'exemple suivant

ensuite, le chartTypeest incorrect et doit exister dans le packagesfichier chargé

pour les graphiques de base , charger le package 'corechart'et utiliser ->chartType: 'BarChart'

pour les tableaux des matériaux , charger le paquet: 'bar'->chartType: 'Bar'

(ne pas recommander d'utiliser des tableaux de matériaux , plusieurs options ne fonctionnent pas)

enfin , puisque les wrappers de graphique sont dessinés à l'aide d'un tableau de bord, vous
n'avez pas besoin de ces options -> 'dataSourceUrl'ou'query'

voir l'extrait de code suivant ... 

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>

Articles connexes