Mise en place d’Angular-charts

angularjs-logo.png.pagespeed.ce.2SfPGmgT_b[1]

Dans le cadre d'un projet, j'ai exploré différents moyens pour intégrer des diagrammes dans une application angular. De nombreuses librairies existent et elles permettent de mettre en place de façon très simple toutes sortes de diagrammes dans votre application.  Dans cet article je vais vous présenter la librairie Angular-charts.

Angular-charts est basée sur Chart.js. Elle permet de faire, en quelques lignes, des diagrammes plutôt sympas et animés. C'est une très bonne option si on veut faire des graphes simples (type courbes, bâtons etc...). De plus, cette librairie a l'avantage d'avoir été testée avec Angular 1.2.x, 1.3.x et 1.4.x , donc peu de risque d'avoir des soucis de compatibilité.

Comment la mettre en place ?

  • Téléchargez les sources avec bower via la commande suivante :
bower install --save angular-chart.js

 

  • Incluez les sources dans votre page (ou votre index.html) en ajoutant la ligne suivante :
<script src= "bower_components/angular-chart.js/dist/angular-chart.js"></script>

 

  • Incluez le CSS dans votre page (ou votre index.html) en ajoutant la ligne suivante :
<link rel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css">

 

  • Ajoutez la dépendance "Chart.js" à votre module (ou votre app.js).

 

Comment l'utiliser ?

Prenons l'exemple d'un graphe à trois courbes.

  • Dans votre page, ajoutez la balise suivante :
<canvas id="line" class="chart chart-line" chart-data="data"
       chart-labels="labels" chart-legend="true" chart-series="series" >
</canvas>

Le type de diagramme à afficher est porté par le contenu de l'attribut class. Pour afficher un diagramme bâton au lieu d'un graphe de courbes, remplacez "chart-line" par "chart-bar".

  • "chart-labels" pointe sur le tableau contenant les différentes valeurs de l'axe des abscisses.
  • "char-legend" indique si on veut ou pas afficher la légende des courbes sous le graphe (par défaut à false).
  • "chart-data" indique le tableau contenant les données à afficher.
  • "chart-series" indique le tableau des intitulés des séries de données à afficher.

Il est possible de personnaliser d'avantage votre graphe, en paramétrant un comportement particuliers lors du clic dans le graphe ou même de changer les couleurs des courbes.

 

  • Dans le script js, définissez les valeurs de l'axe des abscisses, les données ainsi que les légendes.

Pour définir les labels (valeurs de l'axe des abscisses) ajoutez la ligne suivante :

$scope.labels=["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];

 

Pour définir les données à afficher, ajoutez la ligne suivante :

$scope.data = [
    [65, 59, 80, 81, 56, 55, 40, 23, 64, 51, 38, 26],
    [28, 48, 40, 19, 86, 27, 90, 18, 32, 59, 27, 49],
    [57, 32, 20, 41, 35, 62, 17, 11, 34, 48, 53, 10]
];

Chaque tableau de valeurs du tableau data correspond à une série de données (donc à une courbe). Il faut qu'il y ait autant de données pour chaque courbe qu'il y a de valeurs pour l'axe des abscisses sinon votre diagramme sera coupé.

Pour définir les légendes des trois courbes, ajoutez la ligne suivante :

$scope.series = ['Courbe 1', 'Courbe 2', 'Courbe 3'];

Avec ces quelques lignes, vous obtenez le graphe ci-dessous :

resultat-angular-charts

Ce blog ne comprend qu'un exemple de diagramme qu'il est possible de mettre en place, d'autres exemples sont disponibles sur le github de la librairie :

http://jtblin.github.io/angular-chart.js/

Un commentaire

  1. Bonsoir,

    pouvez vous préciser comment définir les differents options pour des barcharts par exemple ?
    changement de couleur
    valeur de l’axe Y mise à zero
    deux axes X

    merci d’avance
    David

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.