Mettre à jour un graphique Dojo après 4 requêtes

Question

J'ai une carte construite dans la API JavaScript Esri.

Cette carte contient une couche, montrant des stations-service.

À mesure que l'étendue de la carte change, j'exécute 4 requêtes distinctes contre cette couche pour obtenir un décompte total des stations-service dans l'étendue actuelle, une requête pour chaque fournisseur de stations-service.

par exemple (Un peu simplifié)

//Shell
shellQuery.where = "brand = 'Shell"
//Execute Query, and report result to console
shellQueryTask.executeForCount(shellQuery , function(count){
console.log(count);}

//BP
même chose. Se répète pour 4 requêtes.

Les résultats de chaque requête sont des promesses dojo.deferred.

Cependant, étant donné qu'il s'agit de requêtes distinctes (doit être fait ainsi pour d'autres raisons), elles renvoient toutes leurs résultats légèrement à des moments différents.

Objectif final - inclure un graphique à barres Dojo, mis à jour par ces requêtes, pour afficher une répartition des stations-service dans l'étendue actuelle, basée sur le fournisseur.

Étant nouveau en Javascript, sans parler de Dojo, je me gratte la tête pour trouver la meilleure façon de mettre à jour un graphique Dojo. La plupart des exemples Esri que je vois portent sur l'affichage des résultats d'une seule requête, en créant un nouveau graphique à chaque fois.

Je recherche une réponse qui soit la méthode la plus élégante pour y parvenir.

Actuellement, je pense qu'il faut écrire les résultats des 4 requêtes dans un tableau de données global, puis appeler une fonction distincte pour mettre à jour le graphique Dojo. Je suis juste un peu inquiet de m'assurer que je n'appelle pas la fonction avant que les quatre requêtes aient renvoyé leurs résultats.

Answer 1

Les différés et les promesses de Dojo sont parfaits pour cela ! En particulier, le module dojo/promise/all (anciennement DeferredList).

Comme vous dites que votre fonction executeForCount renvoie des différés, vous pouvez faire quelque chose comme ceci :

shellQueryDeferred  = shellQueryTask.executeForCount(shellQuery);
texacoQueryDeferred = texacoQueryTask.executeForCount(texacoQuery);
....

// Je suppose que vous avez requis "dojo/promise/all" comme "promiseAll" ici :
promiseAll([shellQueryDeferred, texacoQueryDeferred, ...]).then(
    function(results) {
        // La variable "results" est un tableau avec les résultats
        // de chaque requête, une fois qu'elles sont toutes terminées.
    });

Quant à la mise à jour du graphique, je ne suis pas entièrement sûr de la manière la plus élégante de le faire. Une chose à garder à l'esprit est que chart.addSeries("name", [1,2,4]) peut être appelé maintes et maintes fois avec le même nom, et les données pour cette série seront simplement mises à jour. Vous devez appeler chart.render() par la suite.

Par exemple :

promiseAll([shellQueryDeferred, texacoQueryDeferred, ...]).then(
    function(results) {
        var chartNumbers = getNumbersForChartFromQueryResults(results);
        chart.addSeries("Stations-service", chartNumbers);
        chart.render();
    });

Je finis toujours par bidouiller en rédigeant une réponse, donc peut-être que cela vous aidera : http://fiddle.jshell.net/froden/SZmkJ/

Édition : Variante Dojo 1.7 :

Comme le dit Juffy, en 1.7, vous devez utiliser dojo/DeferredList. C'est presque aussi simple qu'une recherche & remplacement, mais il y a quelques subtilités. Tout d'abord, il faut l'instancier comme une classe :

//promiseAll([shellQuery, texacoQuery, bobsPetrolAndBurgersQuery])
// Je suppose que vous avez requis "dojo/DeferredList" comme "DeferredList" ici :
new DeferredList([shellQuery, texacoQuery, bobsPetrolAndBurgersQuery])
    .then(function(data) { 
        ....

Deuxièmement, le data dans la fonction de rappel est maintenant un tableau de tableaux, où le premier élément de chaque sous-tableau est un booléen de succès/échec. Vous devez donc probablement ajuster un peu les données avant de les passer au graphique. (http://fiddle.jshell.net/froden/SZmkJ/1/)