Accentsconagua

Comment créer des diagrammes d'exploration avec PHP, MySQL et FusionCharts

Code
Share

Supposons que vous visualisiez un graphique à colonnes qui affiche les chiffres des ventes annuelles de votre société, chaque colonne représentant une seule année. Si vous cliquez sur une colonne, vous accédez à des données trimestrielles. Maintenant, si vous cliquez une fois de plus, vous arrivez aux chiffres de vente mensuels.

Ce que vous faites ici consiste à explorer des données annuelles, trimestrielles à mensuelles en utilisant un graphique détaillé. Les graphiques en détail vous permettent de cliquer sur des graphiques de données individuels pour obtenir plus de détails à ce sujet (un graphique de données fait référence à une colonne dans un graphique à colonnes, à des lignes dans un graphique à courbes ou à des secteurs dans un graphique à secteurs)..

Les graphiques détaillés sont très utiles dans les rapports et les tableaux de bord analytiques. Et dans ce tutoriel, je vais couvrir le processus pas à pas de la création d'un graphique à l'aide de la bibliothèque de graphiques JavaScript de FusionCharts. Nous allons récupérer les données présentes dans une base de données MySQL en utilisant PHP, puis utiliser la bibliothèque principale de FusionCharts et son wrapper de graphiques PHP pour tracer notre graphique..

Voici ce que nous faisons aujourd'hui: (vous pouvez voir la version en direct ici ou télécharger le code source en utilisant ce lien).

Il s'agit d'un histogramme 2D avec une exploration à deux niveaux. Le premier niveau contient les données de ventes annuelles pour 6 ans. Si vous cliquez sur n’importe quelle année, vous pourrez voir les données trimestrielles de cette année (deuxième niveau).

J'ai divisé le processus complet en sept étapes:

  • 1: Y compris les fichiers JavaScript et PHP wrapper
  • 2: Lancement et validation de la connexion à la base de données
  • 3: Récupération de données à l'aide d'une requête SQL
  • 4: Conversion du résultat de la requête en JSON
  • 5: Répéter les étapes -3 et 4 pour chaque niveau de forage
  • 6: Création d'une instance de graphique et fermeture d'une connexion à une base de données

1. Y compris les fichiers JavaScript et PHP Wrapper

Pour rendre les graphiques dans ce projet, nous avons besoin à la fois de la bibliothèque JS principale de FusionCharts et de son wrapper PHP:

  • Bibliothèque de graphiques JavaScript de FusionCharts - fusioncharts.js - sera inclus en utilisant HTML

    2. Lancement et validation de la connexion à la base de données

    Une fois que nous avons inclus toutes les dépendances, nous devons établir la connexion avec notre base de données pour extraire les données du graphique..

    Voici comment nous initions et validons la connexion à la base de données en PHP:

    connect_error) exit ("Il y a eu une erreur avec votre connexion:". $ dbhandle-> connect_error); ?>

    Pour établir la connexion avec la base de données MySQL, ces quatre paramètres doivent être spécifiés:

    • Adresse du serveur sur lequel la base de données est installée. Dans notre cas c'estlocalhost.
    • Nom d'utilisateur pour se connecter à la base de données. La valeur par défaut est racine.
    • Mot de passe pour ce nom d'utilisateur.
    • Nom de la base de données sous laquelle la table est créée.

    $ dbhandle établit la connexion avec la base de données. J'ai inclus des valeurs factices dans l'extrait de code ci-dessus, et vous devrez remplacer les valeurs pour $ hostdb, $ userdb, $ passdb, et $ namedb avec des valeurs réelles pour votre base de données.

    3. Récupération de données à l'aide d'une requête SQL

    Une fois la connexion avec la base de données MySQL établie, nous pouvons utiliser la requête SQL ci-dessous pour extraire les données de notre graphique:

    // Requête SQL pour le diagramme parent $ strQuery = "SELECT Year, Sales FROM annual_sales"; // Exécute la requête ou renvoie le message d'erreur $ result = $ dbhandle-> query ($ strQuery) ou exit ("Code d'erreur ($ dbhandle-> errno): $ dbhandle-> error");

    Si requête ($ strQuery) est exécuté avec succès, les données seront renseignées dans $ résultat.

    4. Conversion du résultat de la requête en JSON

    Si vous avez suivi toutes les étapes ci-dessus correctement jusqu’à présent, vous devriez avoir récupéré les données de la requête dans $ résultat variable.

    Pour former les données JSON au format correct, nous allons créer un tableau associatif. - $ arrData - et poussez tous les attributs et données de configuration du graphique comme indiqué dans le code ci-dessous:

    // si la requête renvoie une réponse valide, prépare le tableau JSON. if ($ result) // '$ arrData' contient les options et les données du graphique. $ arrData = array ("chart" => array ("caption" => "YoY Sales - KFC", "xAxisName" => "Year", // autres attributs de graphique)); // crée un tableau pour le diagramme parent $ arrData ["data"] = array (); // données push dans un tableau while ($ row = mysqli_fetch_array ($ result)) array_push ($ arrData ["data"], array ("label" => $ row ["Année"], "value" => $ row ["Sales"], "link" => "newchart-json-". $ Row ["Year"]));

    Ce code contient les données JSON du graphique parent. le lien L'attribut dans les données JSON fait référence au prochain graphique à afficher, après avoir cliqué sur un tracé de données individuel. Pour une description plus détaillée, vous pouvez visiter cette page de documentation officielle.

    5. Répéter les étapes 3 et 4 pour chaque niveau d'exploration.

    Pour accéder au niveau suivant, nous devons récupérer les données à l'aide de la variable $ resultat trimestriel de la table de base de données respective (quarterly_sales). Ceci est similaire à ce que nous avons fait à l'étape 3. Le code correspondant est présenté ci-dessous:

    $ strQuarterly = "SELECT Trimestre, Ventes, Année DE quarterly_sales WHERE 1"; $ resultQuarterly = $ dbhandle-> requête ($ strQuarterly) ou exit ("Code d'erreur ($ dbhandle-> errno): $ dbhandle-> error");

    Le tableau associatif $ arrData est ajouté les données de la carte mère pour chaque tracé de données parent, mais ici, les données se trouvent sous données liées . Le code correspondant est présenté ci-dessous avec les commentaires associés:

    // linkeddata est responsable de l'alimentation des données et des options de graphique dans les graphiques enfants. $ arrData ["linkeddata"] = array (); $ i = 0; if ($ resultQuarterly) while ($ row = mysqli_fetch_array ($ resultQuarterly)) $ year = $ row ['Year']; if (isset ($ arrData ["linkeddata")] [$ i - 1]) && $ arrData ["linkeddata"] [$ i - 1] ["id"] == $ année) array_push ($ arrData ["linkeddata "] [$ i - 1] [" diagramme lié "] [" données "], tableau (" étiquette "=> $ rangée [" Trimestre "]," valeur "=> $ rangée [" Ventes "]));  else array_push ($ arrData ["linkeddata"], array ("id" => "$ year", "linkedchart" => array ("chart" => array ("caption" => "QoQ Sales - KFC pour $ year "," xAxisName "=>" Quarter "," yAxisName "=>" Ventes "," paletteColors "=>" # D5555C "," baseFont "=>" Open Sans "," theme "=>" elegant " ), "data" => array (array ("label" => $ rangée ["Trimestre"], "valeur" => $ rangée ["Ventes"])))); $ i ++;

    Maintenant, nous avons notre tableau associatif prêt avec des données dans la variable $ arrData et enfin nous encodons le tableau dans notre format JSON en utilisant json_encode () méthode. La variable $ jsonEncodedData contient les données pour le graphique ayant une fonction d'exploration descendante.

    $ jsonEncodedData = json_encode ($ arrData);

    6. Création d'une instance de graphique et fermeture d'une connexion à une base de données

    Un HTML

    est le mieux adapté en tant que conteneur pour notre graphique et voici comment nous le déclarons:

    Superbe graphique en route!

    À l’étape suivante, nous allons créer une instance de graphique et lui transmettre le type de graphique, ses dimensions, l’ID de conteneur et d’autres détails pour le rendre. Voici le modèle pour créer une instance FusionCharts:

    // Syntaxe de l'instance - nouveau FusionCharts ("type de graphique", "identificateur de graphique", "largeur de graphique", "hauteur de graphique", "id id pour rendre le graphique", "type de données", "données réelles")

    Voici le code pour créer une instance de FusionCharts (en utilisant le modèle ci-dessus), restituer le graphique et enfin fermer la connexion à la base de données:

    // Création de l'instance de FusionCharts $ columnChart = new FusionCharts ("column2d", "myFirstChart", 600, 300, "chart-linked", "json", "$ jsonEncodedData"); // FusionCharts Render Method $ columnChart-> render (); // Méthode de rendu // Fermeture de la connexion à la base de données $ dbhandle-> close ();

    Rendre vos graphiques plus beaux

    Si vous avez téléchargé le code source de ce projet, vous devez avoir remarqué certains paramètres sous graphique tableau que nous n'avons pas discuté ci-dessus. Ces paramètres contrôlent l'aspect et la fonctionnalité d'un graphique et sont officiellement appelés attributs de graphique..

    Voici quelques explications sur quelques attributs clés que j'ai utilisés dans mon code:

    • canvasBgColor et bgColor: vous pouvez utiliser ces deux attributs pour contrôler la couleur d'arrière-plan du canevas de votre graphique et de son conteneur.
    • baseFont: vous pouvez utiliser cet attribut pour définir la famille de polices de votre graphique. Vous n'êtes pas limité aux seules polices système, mais vous êtes libre d'ajouter n'importe quelle police. Pour utiliser une police personnalisée, incluez le fichier source de cette police au format HTML et définissez-le à l'aide de baseFont attribut. Notre exemple utilise Open Sans de Google Fonts.
    • plotToolText: afficher des informations supplémentaires sur le survol est un excellent moyen d'améliorer l'expérience de visualisation des données et plotToolText entre en image. Il vous permet de personnaliser l'info-bulle du graphique. Vous pouvez utiliser HTML -
      et CSS personnalisé pour styliser votre info-bulle en utilisant cet attribut.
    • thème: cet attribut vous permet de conserver une conception cohérente dans tous vos graphiques. Vous pouvez définir les produits cosmétiques d'un graphique dans un fichier et l'inclure à l'aide de thème attribuer à avoir une conception commune pour tous vos graphiques. Vous pouvez en apprendre plus à ce sujet sur cette page de documentation du gestionnaire de thèmes..

    Il existe des centaines d'attributs que vous pouvez utiliser pour personnaliser votre graphique et il est pratiquement impossible de tout décrire dans cet article. Donc, ci-dessus, je n’en ai énuméré que quelques-unes, et pour plus d’informations, visitez la page des attributs de graphique pour les graphiques à colonnes 2D..

    Plus de ressources

    J'ai essayé de tout couvrir en détail ci-dessus, mais vous devez faire face à des défis lorsque vous essayez de le faire vous-même ou si vous souhaitez approfondir ce concept. Donc, pour vous aider dans votre cheminement, voici quelques ressources importantes:

    • Documentation: pour en savoir plus sur les graphiques d'analyse descendante et son implémentation, visitez la page officielle du centre des développeurs..
    • PHP wrapper: Si vous voulez en savoir plus sur les possibilités de l'encapsuleur FusionCharts, vous pouvez explorer leur page de graphiques PHP. Il contient de nombreux exemples en direct avec code complet.

    N'hésitez pas à poster vos questions / commentaires / suggestions dans la section commentaires ci-dessous. Toujours heureux de discuter et d'aider!

    Code
×