La visualisation des données est devenue un élément essentiel des activités professionnelles. Qu’il s’agisse de graphiques, d’infographies, de cartes ou de tableaux de bord, tous présentent des informations de façon facile à lire. L’un des avantages des techniques modernes de création de graphiques est qu’elles ne nécessitent aucune compétence ni connaissance particulière. En réalité, ce savoir-faire n’est pas réservé aux développeurs, designers ou programmeurs. Vous pouvez même faire du Java script charts en connaissant les bases de Java et HTML5.
Bibliothèques de création de graphiques pour JavaScript
La première chose dont vous avez besoin pour créer des graphiques en JavaScript est une bibliothèque de graphiques. Celle-ci contient toutes sortes de designs et de protocoles pour créer et extraire des graphiques à des fins de visualisation de données. Certaines sont gratuites, comme D3 et Google Charts. Vous pouvez les utiliser à des fins multiples, mais elles vont de basiques à semi-avancées. Cependant, pour obtenir les meilleures fonctionnalités, il vous faudra payer. AnyChart, Highcharts et amCharts figurent parmi les plus complètes du marché.
Nous allons nous concentrer sur AnyChart dans cet article. AnyChart vous permet de documenter et de visualiser vos données de manière approfondie. Il dispose également d'une documentation API complète et prend en charge divers types de graphiques ainsi que des démonstrations dans un environnement de test de code. C'est donc une option adaptée aux débutants.
Comment créer des graphiques en JavaScript
Lors de la création de graphiques, JavaScript vous permet de saisir des valeurs et de préparer les données comme vous le souhaitez. Vous pouvez choisir n'importe quelle variable et écrire un code simple pour la visualiser dans un graphique de base. Il peut s'agir d'un graphique en ligne ou en barres, et cela implique trois étapes :
Préparer les données pour un graphique JS
Des données simples restent la meilleure approche. Si vous manipulez de grandes quantités de données, vous devrez les simplifier. La préparation des données est donc nécessaire. Autrement dit, vous devez créer la plupart des types de graphiques les plus courants. Cela inclut l'axe X puis l'axe Y. Les graphiques à barres sont toutefois encore plus simples, puisqu'il vous suffit généralement de l'axe Y et d'un index ou d'un numéro d'élément. En utilisant JavaScript avec un tableau de données, vous obtiendrez quelque chose comme ceci :
// 5 points de données = 5 catégories pour une seule série
var data = [19, 24, 30, 34, 42];
// Y correspond à ces valeurs ; X correspond aux numéros d'éléments [0,1,2,3,4,5]
Cependant, si vous utilisez JSON/XML pour transférer les données, celles-ci doivent se présenter ainsi :
[{
'x': 'Product A',
'value': 19
},{
'x': 'Product B',
'value': 24
}...]
il existe de nombreuses façons de travailler avec les logiciels de visualisation de données, que les développeurs décrivent de nombreuses fois dans les documentations. Alors, si vous êtes curieux, mieux vaut parcourir les sections pertinentes des documents de la bibliothèque de graphiques.
Vous pourriez aussi utiliser Image Charts et faire créer vos graphiques assez facilement, sans aucune complication.
Obtenir une bibliothèque de graphiques
Il est impératif de choisir la bonne bibliothèque. Si vous utilisez les diagrammes localement, vous pouvez télécharger le package binaire du diagramme. En revanche, si vous souhaitez créer des graphiques pour des applications web ou un site web, optez pour un CDN. Image Charts propose de nombreuses fonctionnalités, comme la possibilité de récupérer les fichiers depuis le serveur le plus proche du client. Au final, cela vous garantit une vitesse de chargement plus rapide et de meilleures performances pour la page.
Le code ressemblera à peu près à ceci :
<script src="//cdn.anychart.com/js/latest/anychart.min.js" type="text/javascript"></script>
Écrire un code HTML/JavaScript
La dernière étape du processus de création du graphique consiste à écrire un code simple en HTML ou en JavaScript.
Une fois la bibliothèque de données prête, vous pouvez commencer à écrire le code pour tracer le graphique.
- Tout d'abord, vous devez créer un conteneur de graphique sur la page elle-même. La meilleure façon de procéder est d'utiliser un élément <div> et de définir son ID. Voici à quoi ressemble le code :
<div id="container"></div>
- Ensuite, ajoutez les données suivantes :
var data = [
{x: 'Lecteur DVD', y: 19},
{x: 'Système home cinéma', y: 24},
{x: 'Lecteur karaoké', y: 30},
{x: 'Projecteur', y: 34},
{x: 'Récepteur TV', y: 42}
];
- Étape suivante : vous devez préciser le type de graphique que vous souhaitez créer. Il peut s'agir de différents types, comme un graphique en courbes, un graphique à barres, un graphique circulaire, etc. Le code devra inclure la fonction constructeur :
var chart = anychart.bar();
- Vous devez aussi vous assurer que le graphique est clair pour les spectateurs. Après tout, à quoi bon si vous ne rendez pas le graphique facile à lire. C'est là tout l'objectif de la visualisation, avant tout. Il vous faudra donc l'étiqueter et indiquer quelles valeurs représentent quelle quantité. Commencez par donner un titre au graphique :
chart.title('Product Sales');
- Créez ensuite une série pour y placer les valeurs de vos quantités et les étiqueter. Le code ressemblera à ceci :
chart.addSeries(data);
// ou nous pouvons spécifier un jeu de données simple directement dans la méthode :
chart.addSeries([19, 24, 30, 34, 42]);
- Le graphique doit être placé dans un conteneur afin de préciser celui que nous créons. Le code ressemblera à ceci :
chart.container('container');
- Voilà, c'est fait. Vous pouvez maintenant dessiner le graphique. Insérez ce code : « chart.draw(); »
- le résultat ressemblera à quelque chose comme un diagramme à barres horizontales, avec différentes valeurs représentées par des barres longues et courtes.
Le code complet de la séquence ressemblera à ceci :
<html>
<head>
<script
src="//cdn.anychart.com/js/latest/anychart.min.js"
type="text/javascript"
></script>
<script>
anychart.onDocumentLoad(function() {
var data = [
{ x: "Lecteur DVD", y: 19 },
{ x: "Système home cinéma", y: 24 },
{ x: "Lecteur karaoké", y: 30 },
{ x: "Projecteur", y: 34 },
{ x: "Récepteur TV", y: 42 }
];
var chart = anychart.bar();
chart.title("Product Sales");
chart.addSeries(data);
chart.container("container");
chart.draw();
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
