Création de graphiques à l'aide de JavaScript et PHP

Le graphique Web peut être créé en utilisant n'importe quelle bibliothèque côté client ou bibliothèque côté serveur basé sur des données statiques ou dynamiques. Si vous souhaitez créer des graphiques animés et que vous souhaitez télécharger le graphique plus rapidement, il est préférable d'utiliser une bibliothèque de graphiques côté client. De nombreuses bibliothèques côté client sont disponibles pour créer des graphiques pour les pages Web. L'une des bibliothèques populaires côté client est Toile qui peut être utilisé pour créer des graphiques Web en utilisant des données fixes ou en récupérant des données à partir de n'importe quelle base de données.

Canvasjs est utilisé avec PHP dans ce tutoriel pour créer des graphiques basés sur le Web. Cette bibliothèque prend en charge divers types de graphiques, tels que le graphique à barres, le graphique de colonne, le graphique de colonne dynamique, le graphique de ligne, le graphique à secteurs, le graphique pyramide, le graphique de beignet, le graphique à bulles, etc. Certains d'entre eux sont présentés ici en utilisant des données d'échantillons. Avant de commencer ce tutoriel, vous devez vous assurer que votre serveur Web et votre PHP sont installés correctement et fonctionnent.

Télécharger des canevasjs

Il est disponible en version gratuite et commerciale. Vous pouvez télécharger et utiliser la version gratuite de cette bibliothèque à des fins de test. Accédez à l'URL suivante et cliquez sur Télécharger lien pour télécharger la bibliothèque canvasjs. Décompressez le fichier et stockez le dossier dans le serveur Web après le téléchargement pour l'utiliser.

https: // canvasjs.com

$ ProfitData = Array (
Array ("x" => 2013, "y" => 440000),
Array ("x" => 2014, "y" => 270000),
array ("x" => 2015, "y" => 210000, "indexLabel" => "le plus bas"),
Array ("x" => 2016, "y" => 600000),
Array ("x" => 2017, "y" => 630000, "indexLabel" => "le plus haut"),
array ("x" => 2018, "y" => 560000));
?>

Exemple de graphique de colonne

Sortir:

La sortie suivante sera générée si vous exécutez le fichier à partir d'un serveur Web. «Version d'essai» et «Canvasjs.com ”Les filigranes seront affichés pour la version gratuite.

Lorsque vous cliquez sur "Plus d'options" bouton du coin supérieur droit, alors trois options seront affichées. Vous pouvez imprimer le graphique ou enregistrer le graphique sous forme de format d'image JPG ou PNG. Si vous cliquez sur "Économiser en png”Option alors la boîte de dialogue suivante apparaîtra.

Le nom du fichier d'image par défaut est Graphique.PNG. Vous pouvez retirer les filigranes de l'image en utilisant facilement n'importe quel logiciel de retouche photo.

Diagramme circulaire:

L'exemple suivant montre la popularité des différentes distributions Linux à l'aide du graphique à tarte. Écrivez le code suivant dans un fichier nommé diagramme circulaire.php et stocker le fichier en VAR / www / html / jschart dossier.

$ Popularité = Array (
Array ("OS" => "Arch Linux", "Y" => 40),
Array ("OS" => "Centos", "Y" => 25),
Array ("OS" => "Debian", "Y" => 12),
Array ("OS" => "Fedora", "Y" => 10),
Array ("OS" => "gentoo", "y" => 8),
Array ("OS" => "Lindows", "Y" => 5)
));
?>

Exemple du graphique à tarte

Sortir:

La sortie suivante s'affiche si vous exécutez le fichier à partir du serveur Web. Vous pouvez créer un fichier image du graphique par l'étape qui est affichée dans l'exemple précédent.

Tableau de colonne dynamique:

Vous pouvez créer une belle carte dynamique en utilisant cette bibliothèque. Supposons que vous souhaitiez créer un tableau en direct du marché boursier où le cours des actions augmente ou diminue en continu. Écrivez le code suivant dans un fichier nommé carte dynamique.php et stocker le fichier en VAR / www / html / jschart dossier.

$ StockData = Array (
array ("stock" => "msft", "y" => 92.67),
Array ("Stock" => "Low", "Y" => 88.89),
array ("stock" => "intc", "y" => 52.15),
Array ("Stock" => "Adi", "Y" => 91.78),
Array ("stock" => "adbe", "y" => 224.80),
Array ("Stock" => "ABBV", "Y" => 94.30),
Array ("Stock" => "AMD", "Y" => 10.27)
));
?>

Exemple de graphique dynamique

Sortir:
La sortie suivante s'affiche si vous exécutez le fichier à partir du serveur Web. Vous pouvez créer un fichier image du graphique de la même manière qui est montré dans le premier exemple.

En suivant les étapes ci-dessus, vous pouvez facilement créer des graphiques animés Web nécessaires à l'aide de cette bibliothèque JavaScript utile.