Angular : Comment créer des graphiques dynamiques Highcharts ?

Avec ce tutoriel, je vais vous montrer comment utiliser Angular et Highcharts pour créer une simple page web qui génère un graphique. Vous pouvez utiliser cette méthode pour vos projets Angular de tableaux de bord ou tout autre applications faisant appel à des graphiques pour visualiser des données.

Dans un précédent billet, je vous avais présenter comment créer votre premier projet Angular. Nous allons utiliser la même méthode en passant par la ligne de commande. Je vous invite à consulter mon précédent billet pour vous assurer que vous avez bien les prérequis d’installer sur votre machine (npm et node).

0. Cas d’usage

Dans le cadre d’un projet permettant de présenter des indicateurs de suivi de pilotage d’activité, je cherchais à créer un tableau de bord avec des visuels permettant de suivre les évolutions de plusieurs indicateurs pour animer des instances COPRO et COPIL. J’ai testé plusieurs bibliothèques permettant de créer des graphes et mon choix s’est arrêté sur Highcharts.

Après avoir expérimenté une première version de ce tableau de bord en version HTML, CSS et JavaScript, j’ai tenté d’implémenter Highcharts avec Angular. Voici le partage des étapes que j’ai utilisé pour afficher un graphique avec Angular dans une page web.

1. Créer le projet Angular

Rendez-vous dans le dossier dans lequel vous souhaitez créer votre projet pour configurer l’environnement de développement. D’abord, nous installons l’Angular CLI pour utilise la ligne de commande :

sudo npm install -g @angular/cli

Ensuite nous créons le projet Angular appelé dans mon exemple “angular-highcharts” :

ng new angular-highcharts

Une fois le projet créé, nous entrons dans le dossier contenant le projet :

cd angular-highcharts/

Pour tester le projet, nous allons lancer le serveur avec l’option permettant de lancer le navigateur web par défaut sur votre machine pour visualiser le projet :

ng serve --open

Le serveur web local s’ouvre sur le port 4200 et bingo votre projet apparait sous forme d’une page de test par défaut :

2. Adapter le projet Angular

Dans le cadre de ce tutoriel, nous allons créer un composant permettant d’afficher le graphe mais libre à vous d’organiser votre projet différemment.

Maintenant, créons le composant que j’ai appelé “view-graph” en utilisant cette commande :

ng generate component view-graph

Le nouveau composant, view-graph, se trouve sous /src/app/ et se compose de quatre fichiers différents :

  • .CSS : Tous les CSS pour les styles doivent aller dans ce fichier.
  • .HTML : Ce fichier comprend le modèle HTML et toutes les balises HTML.
  • TS : Ce fichier comprend tout le code application, la logique métier, les appels API et la manipulation des données.
  • SPEC.TS:Tous les tests unitaires vont dans ce fichier.

Nous modifions “app component” pour appeler le nouveau composant “view-graphe”.

Pour cela nous retirons le contenu par défaut de app/app.component.html et ajoutons le nouveau composant :

<div id="main-head" style="text-align:center">
  <h1>
    {{ title }}!
  </h1>
  <app-view-graph></app-view-graph>
</div>
<router-outlet></router-outlet>

3. Intégrer Highcharts au projet Angular

Installons maintenant dans notre projet Angular le module Highcharts en lançant la commande :

npm install highcharts

Modifions view-graph.component.ts pour importer la librairie Highcharts :

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';

declare var require: any;


@Component({
  selector: 'app-view-graph',
  templateUrl: './view-graph.component.html',
  styleUrls: ['./view-graph.component.css']
})
export class ViewGraphComponent implements OnInit {
  public options: any = {
    Chart: {
      type: 'area',
      height: 700
    },
    title: {
      text: 'Evolution de la population'
    },
    credits: {
      enabled: false
    },
    xAxis: {
      categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
      tickmarkPlacement: 'on',
      title: {
          enabled: false
      }
  },
    series: [{
      name: 'Asia',
      data: [502, 635, 809, 947, 1402, 3634, 5268]
  }, {
      name: 'Europe',
      data: [163, 203, 276, 408, 547, 729, 628]
  }, {
      name: 'America',
      data: [18, 31, 54, 156, 339, 818, 1201]
  }]
  }

  constructor() { }

  ngOnInit() {
    Highcharts.chart('container', this.options);
  }

}

N’oublions pas de modifier view-graph.component.html pour ajouter une div permettant d’afficher le graphe sur la page web :

<p>view-graph works!</p>

<div id="container"></div>

Il ne reste plus qu’à visualiser le résultat dans le navigateur :

Félicitations ! Si vous avez suivi toutes les étapes de ce tutoriel, vous pouvez maintenant créé une application Angular affichant un graphique qui exploite la puissance de Highcharts. N’hésitez pas à tester d’autres type de graphiques car le choix est très vaste et vous trouverez très certainement celui qui répondra à vos besoins.

J’espère que ce projet vous aidera à mieux comprendre comment construire une application Angular et comment intégrer la bibliothèque Highcharts. N’hésitez pas à ajouter vos commentaires ou questions ci-dessous, je me ferai un plaisir d’y répondre.

 


Crédit photo :
ThisIsEngineering sur Pexels


Laisser un commentaire

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