Accentsconagua

Création de graphiques Flash à partir de Google Spreadsheets

Code
Share

Avec la popularité croissante de Google Docs, on s'attend à une forte demande de connexion à des systèmes externes à des fins diverses, telles que l'échange de données, la visualisation de données, etc. Dans cet article, je vais vous montrer comment connecter Graphiques Flash (FusionCharts) pour Google Spreadsheets et tracer des données en temps réel à l'aide de JavaScript.

Avant d’explorer les aspects techniques liés à la récupération de données à partir de feuilles de calcul Google, je vais en présenter un aperçu à FusionCharts et commencer mon explication à partir du niveau racine. Cela profitera à ceux qui ont rencontré FusionCharts pour la première fois. Une version sans restriction de FusionCharts peut être téléchargée à l'adresse www.fusioncharts.com/download. FusionCharts a également une version totalement gratuite sur www.fusioncharts.com/free; mais cet article utilise beaucoup de fonctionnalités de FusionCharts v3, il est donc recommandé de télécharger FusionCharts v3.

Tout le code associé à cet article (et quelques exemples supplémentaires) est disponible en téléchargement avec cet article.

Introduction rapide à FusionCharts

FusionCharts est une solution de création de graphiques Flash qui vous aide à créer des graphiques animés et interactifs pour les pages Web. FusionCharts est essentiellement un ensemble de fichiers SWF qui s’exécutent dans Adobe Flash Player et acceptent les paramètres de données et de configuration au format XML, le rendant ainsi compatible entre scripts et plates-formes. Le XML est intuitif et peut être appris facilement à l’aide d’une documentation exhaustive en ligne, accessible à l’adresse www.fusioncharts.com/docs..

De plus, si vous n'êtes pas un inconditionnel de XML, FusionCharts est livré avec une vaste gamme d’API, ce qui facilite son implémentation avec toutes les formes de technologies de programmation Web telles que ASP, ASP.NET, PHP, Ruby on Rails, Python etc..

Exemple rapide de création d'un graphique avec FusionCharts

FusionCharts Les fichiers SWF peuvent être incorporés dans une page HTML à l’aide de la / balises ou par la classe JavaScript FusionCharts. Il est conseillé d'utiliser la classe JavaScript pour incorporer le graphique, car cela garantit son bon fonctionnement sur tous les navigateurs. La source de données XML peut être fournie au graphique sous forme de fichier externe ou directement intégrée à la page HTML..

Construisons rapidement un graphique illustrant les données présentées dans le tableau ci-dessous..

Appareil

Unités en watts

Éclairage

1200

Chauffe-eau

1800

Bureau

1500

Glacière

1200

Ascenseur

1500

Four micro-onde

1600

Télévision

1500

Machine à laver

2800

Système musical

2200

Nettoyants

600

Le code suivant constitue la source de données XML correspondant au tableau de données ci-dessus:

Assez simple et intuitif, n'est-ce pas? le élément est l'élément racine qui contient la configuration visuelle et fonctionnelle du graphique. Chaque élément représente un élément de données dans le graphique. Cette structure de données se rapporte à des graphiques à une seule série dans FusionCharts, dans lesquels vous n'avez qu'un ensemble de données. Plusieurs ensembles de données nécessitent un format XML multi-séries, qui implique un couple d'éléments XML supplémentaires.

Maintenant que le XML est prêt (nous l'avons enregistré sous le nom myXML.xml), nous devons incorporer le graphique dans une page HTML à l'aide du code suivant:

 
 Mon graphique DIV

Le code (ci-dessus) crée une DIV nommée firstChartDiv qui servira de conteneur pour le graphique. Ensuite, une instance de l'objet FusionCharts est créée à l'aide de JavaScript et les paramètres suivants y sont transmis..

  • Nom du fichier SWF à utiliser (Pie3d.swf dans ce cas)
  • Nom du graphique (firstChartId dans ce cas)
  • Hauteur du graphique en pixels
  • Largeur du graphique en pixels
    • >

La ligne de code suivante fournit le nom du fichier de source de données XML externe (myXML.xml dans ce cas). Et la dernière ligne du code JavaScript indique le nom du conteneur DIV dans lequel le graphique sera rendu. Lorsque vous utilisez la classe JavaScript pour incorporer le graphique, il est nécessaire de créer un conteneur DIV pour le graphique..

Le graphique suivant est généré par le code. L'image ci-dessous montre une version statique; le graphique réel est animé et permet une interactivité telle que le découpage de tartes, la rotation du graphique, les info-bulles, etc..

Maintenant que nous avons couvert le processus de création de graphiques à l'aide d'une source de données statique, passons au processus de rendu d'un graphique à l'aide de données obtenues à partir d'un tableur Google..

Connexion de ces graphiques à la feuille de calcul Google Documents

Les feuilles de calcul Google Documents transfèrent les données sous forme de flux JSON. Par conséquent, afin de générer des graphiques à l'aide de données obtenues à partir d'une feuille de calcul Google, il est important de convertir les flux JSON acquis au format XML, comme requis par FusionCharts..

Il existe plusieurs façons de convertir JSON en XML. Vous pouvez également écrire votre propre code pour extraire chaque élément JSON et le convertir en XML. Vous pouvez également utiliser des moteurs à base de règles tels que JsonT pour vous aider dans ce processus. Nous utiliserons JsonT pour cet article, car il nous aide à faire les choses plus facilement et plus rapidement. JsonT peut être téléchargé à partir de http://goessner.net/articles/jsont/

En utilisant JsonT, on peut facilement définir une règle pour convertir les données JSON en une chaîne du format souhaité. Voici un exemple de données JSON: 

 var coffeeSalesJSON = "Espresso": "5000", "Cappuccino": "6000", "Latte": "7000", "affogato": "4000", "Cortado": "2000", "Macchiato": "3000 "," Frappuccino ":" 6000 ";

Le code suivant convertit les données JSON (affichées ci-dessus) au format FusionCharts XML, puis crée un graphique à partir de celles-ci..

 var JSONParseRules = "self": "\ n @getData (#)"," getData ": function (x) var c =" "; pour (var i in x) c + =" \ n"; return c; var coffeeChartStrXML = jsonT (coffeeSalesJSON, JSONParseRules); var coffeeChart = new FusionCharts (" Column3D.swf "," CoffeeChartId "," 600 "," 350 "," 0 "," 0 "); coffeeChart.setDataXML (coffeeChartStrXML); coffeeChart.render ("coffeeChartDiv");

Pour que le code fonctionne, il est essentiel de lier le fichier JavaScript jsont.js à la page HTML..

Le code (ci-dessus) construit XMLstring à partir de données JSON à l'aide d'une règle, qui parcourt chaque paire clé-valeur de données JSON et traite les noms de clé en tant que catégories et les valeurs en tant que valeurs de données pour le graphique. Vous pouvez en savoir plus sur les règles JsonT à l'adresse http://goessner.net/articles/jsont/. Ensuite, nous utilisons ce XML et construisons le graphique.

Pour utiliser une feuille de calcul Google en tant que source de données dynamique pour le graphique, il est essentiel de la publier pour une consultation publique. Au moment de la publication du document pour un affichage public, Google génère une clé unique. Cette clé est utilisée pour demander des flux de données à Google. il est donc important de conserver la clé.

Veuillez noter que, pour utiliser les flux JSON de Google, il est essentiel de modifier légèrement josnt.js. J'ai apporté des modifications mineures à jsont.js afin d'éviter le conflit résultant de l'utilisation de $ par Jsont.js de $ comme pointeur d'objet et de l'utilisation de $ comme nom de propriété par le flux JSON généré par Google. J'ai modifié Jsont.js pour qu'il utilise # comme pointeur d'objet.

Pour cet exemple démonstratif, j'ai créé un tableur Google comprenant trois feuilles, chacune contenant les données de ventes annuelles pour les années 2006, 2007 et 2008. Le tableur peut être consulté via le lien suivant http://docs.google.com..

        

Le processus de création d'une feuille de calcul Google

Le code suivant vous aidera à générer un graphique tracé à l'aide de données extraites de la feuille de calcul Google:



 
Le graphique se chargera ici

Voici comment fonctionne le code:

  1. Le programme démarre en déclarant une variable nommée "feuilles" pour stocker le tableau de définitions de feuille de calcul obtenu à partir de la feuille de calcul Google spécifiée. Il déclare ensuite la variable de compteur 'sheetCount' qui permet de suivre le nombre de feuilles de calcul à partir desquelles des données ont été reçues. Ce compteur garantit que le graphique est rendu, une fois que toutes les données ont été reçues..

  2. Ensuite, l'objet 'chartConfigJSON' est déclaré pour stocker les paramètres de configuration du graphique..

  3. Le XML qui serait construit progressivement sera stocké dans un tableau nommé 'strXML'. Lorsque le processus de construction XML est enfin terminé, les éléments du tableau seront joints pour former la chaîne XML..

  4. Ensuite, la fonction initpage () placée dans le corps du code HTML est appelée lorsque l'événement onload se produit. Cette fonction appelle à son tour le getGoogleSpreadsheetData () qui demande les données de la feuille de calcul sous forme de flux JSON. La fonction getGoogleSpreadsheetData () demande les données de la feuille de calcul en envoyant la clé de feuille de calcul générée par Google. Elle spécifie également le format du flux et gère le flux une fois reçu..

    5. getGoogleSpreadsheetData ("p06JfhjnK8PwEWRkmlWiiQg", "parseSpreadsheet", "json-in-script", "feuilles de calcul")
  5. Une fois ce flux reçu, une fonction de rappel parseSpreadsheet () est lancée. Cette fonction obtient le nom de la feuille de calcul à partir de jsonsheets.feed.title. $ T, puis parcourt chaque entrée de la feuille de calcul. Chaque entrée de feuille de calcul fournit des liens de fil vers tous les types de fil disponibles (feuille de calcul / liste / cellule / gViz) dans le tableau de liens. Après avoir acquis une liste de types de flux, la fonction getGoogleSpreadsheetData () demande des flux JSON à partir de chaque feuille de calcul..
    getGoogleSpreadsheetData (feuilles [i] .link [0] .href, "parsespreadsheet", "json-in-script");


    L'élément link [0] .href contient l'URL des types de flux disponibles, qui est transmise à la fonction. Une fois le flux reçu, la fonction de rappel parsespreadsheet est appelée et les données JSON lui sont transmises..

  6. Une fois que le flux de chaque feuille de calcul est reçu, le nombre sheetCount est augmenté de 1..
  7. Les flux obtenus à partir de chaque feuille de calcul seraient considérés comme un ensemble de données pour le graphique. Par conséquent, le titre du flux est considéré comme le nom de la série pour chaque jeu de données..
    8. var seriesName = gjson.feed.title. $ t;
  8. Les paramètres de configuration du graphique sont stockés dans strXML [0]. Veuillez noter que la fonction parsespreadsheet () serait appelée plusieurs fois autant de fois que le nombre de feuilles de calcul contenues dans la feuille de calcul Google. Le code contient une condition qui empêche la répétition ultérieure de ce processus.
  9. Les catégories de graphique sont définies à l'aide du premier tableur. La liste des catégories est construite avec jsonT.
    10. règle = "self": "#", "soi[*]":""; strXML [1] = jsonT (feedEntries, rule);
  10. Enfin, jsonT est appelé à renseigner les valeurs du jeu de données:
    11.  règle = "self": "#", "soi[*]":""; strXML [2] + = jsonT (feedEntries, rule);

    Lorsque ce code est exécuté, le graphique suivant sera généré dans votre page.

Le graphique multi-séries créé à l'aide de données obtenues à partir d'un document de feuille de calcul Google

Maintenant que nous avons pu générer un graphique, allons encore plus loin et ajoutons la possibilité de l'exporter sous forme d'images ou de PDF. Cela sera très utile pour envoyer des courriers électroniques à vos collègues..

Export PDF

La dernière version de FusionCharts (v3.1) fournit une gamme complète de fonctionnalités d'exportation. Vous pouvez exporter les graphiques au format PDF, PNG ou JPEG - côté client ou les enregistrer également sur le serveur..

Dans notre exemple, comme nous n'utilisons aucun script côté serveur, nous nous en tiendrons à l'exportation côté client. Côté client, la fonctionnalité d'exportation est implémentée à l'aide de FusionCharts. Composants d'exportation côté client - nom collectif attribué à FusionChartsExportComponent.js et FCExporter.swf. FCExporter.swf est le moteur d'exportation côté client qui permet d'exporter des graphiques. Le fichier JavaScript fournit une interface entre le graphique et le fichier FCExporter.swf..

Cette classe JavaScript facilite le rendu du fichier FCExporter.swf, qui est le moteur d'exportation et sert également d'interface utilisateur graphique. Avec l'aide des API d'exportation, vous pouvez facilement personnaliser l'apparence de l'interface graphique. Les API vous permettent également de contrôler les aspects fonctionnels de l'interface graphique. Le code suivant illustre le processus: 

 
 function loadExportComponent () // initialise le composant d'exportation FusionCharts // met tous les paramètres dans les paramètres exportComponent = new FusionChartsExportObject ('exportComponentH', 'FCExporter.swf', width: '250', height: '250', fullMode: 1, saveMode: 'both', defaultExportFormat: "pdf", showAllowedTypes: 1, saveAllTitle: 'Save All', btnSaveAllTitle: 'En tant que fichier unique', defaultExportFileName: "SalesReport", exportFormat: "PDF", exportCandonler " , exportAtClient: 1); exportComponent.Render ('composantContainer');

Le code (ci-dessus) configure l'interface graphique d'exportation afin d'afficher un bouton qui déclenche le processus d'exportation. De plus, chaque graphique serait répertorié dans le panneau de l'interface graphique et l'utilisateur aurait la possibilité d'exporter tous les graphiques dans un seul fichier PDF. L’interface graphique permettra également à l’utilisateur de changer le format d’exportation par défaut de PDF à jpeg ou png.

Afin de démontrer le processus d’exportation, j’ai ajouté le code permettant de configurer l’interface graphique d’exportation au code générant un graphique basé sur les données dérivées du document de feuille de calcul Google. Cependant, j'ai apporté quelques modifications au code afin qu'il rende maintenant trois graphiques en une seule série au lieu d'un seul graphique en plusieurs séries. Chaque graphique affichera des données relatives à une feuille de calcul particulière.

Voici le code combiné:

Vous trouverez ci-dessous une description du processus d’exportation vu du côté client:

  • Les graphiques sont rendus dans le navigateur.
  • Les graphiques sont convertis en bitmap lorsque l'utilisateur clique sur le bouton "Exporter au format PDF".
  • L’interface graphique d’exportation affiche une liste des graphiques à exporter..
  • Les graphiques sont enregistrés dans un seul fichier PDF lorsque l'utilisateur clique sur le bouton "Au format PDF unique"..

    • Et avec cela, nous terminons cet article. FusionCharts offre beaucoup plus de fonctionnalités potentiellement utilisables. La création de graphiques à partir de données stockées dans des feuilles de calcul Google n'est qu'un exemple d'innovations possibles avec FusionCharts. Merci d'avoir lu!

  • Suivez-nous sur Twitter ou abonnez-vous au fil RSS NETTUTS pour plus d'articles et de sujets sur le développement Web quotidiens.


Code
×