Camembert JavaScript en temps réel

**oweraz** · 15/03/2014, 12h30

Bonjour,

Je suis un projet actuellement en javascript / python.
Un enseignant me fournit le programme en python qui récupère les informations processus ( ram utilisé, %cpu utilisé par chaque processeur etc ... )

Mon travail étant de :
- Établir un graphique en javascript qui montrerait le %utilisé du cpu pour chaque processus ( avec une partie blanche qui désignerait le % cpu non utilisé.
- Faire en sorte que le graphique s'actualise en temps réel.

Honnêtement, je ne vois pas par où commencer étant donné que je débute en javascript.

Auriez vous des pistes/tutoriels à suivre afin de m'aider ? Je n'ai pas encore commencé et je ne sais vraiment pas par quoi commencer.

Merci d'avance

**sekaijin** · 15/03/2014, 14h24

Bonjour

Une recherche sur le net et tu trouve
http://docs-origin.sencha.com/extjs/...x/sandbox.html
un click sur charts et tu as une super demo
et une autre

et la doc qui va avec
http://docs-origin.sencha.com/extjs/...xt.chart.Chart

A+JYT

**danielhagnoul** · 15/03/2014, 20h53

Bonsoir

Sencha c'est beau, mais ce n'est pas gratuit !

Une autre piste : https://github.com/mikedewar/d3py

**sekaijin** · 15/03/2014, 21h09

sencha est gratuit

il existe une licence commercial si tu vends l'applications que tu as fait avec.
si n'est pas vendue c'est gratuit même si l'appli sert à faire du business
A+JYT

**SylvainPV** · 16/03/2014, 00h58

Il y a des centaines de librairies de graphiques en JS, choisis simplement celle qui correspond le mieux à tes besoins :
http://jster.net/category/visualization-libraries

**Watilin** · 18/03/2014, 02h15

Là je suis déçu les amis. Je sais qu'une partie d'entre vous êtes des professionnels et que vous avez acquis le réflexe de préférer l'efficace au didactique, mais n'oubliez pas que nous sommes sur un forum d'aide pour les débutants. Vous n'aidez pas Oweraz en lui disant « utilise la bibli X, ou non plutôt Y ». C'est franchement pas compliqué de dessiner un camembert avec <canvas>, il suffit d'un peu de jugeotte, savoir calculer des pourcentages, et une dose minuscule de trigo pour calculer les angles. Et bien sûr apprendre à dessiner dans un canevas.

On commence par la base. On va dire qu'on a un bout de camembert de rayon et de largeur fixés pour simplifier les choses. Déjà, il nous faut la structure HTML avec le canevas :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<DOCTYPE html>
<html lang=fr>
<head>
   <meta charset=utf-8>
   <title>Bout de camembert</title>
   <script async src="camembert.js"></script>
</head>
<body>
   <canvas id="camembert" width=600 height=450>
      Votre navigateur semble ne pas supporter &lt;canvas&gt;, peut-être devriez-vous le mettre à jour.
   </canvas>
</body>
</html>

Partons tout de suite sur de bonnes pratiques :

On précise la langue de la page, ça ne fait de mal à personne.
Une <meta> pour l'encodage. Si on met dès le début de l'UTF-8 partout, on évite de futurs arrachages de cheveux.
L'attribut de script async précise qu'on n'a pas tout de suite besoin du script. Ainsi il peut être chargé de façon asynchrone et permet au navigateur de continuer immédiatement l'interprétation du code HTML.
Un titre. Hé oui, c'est obligatoire !
Les attributs width et height du canevas sont obligatoires.
J'ai mis un identifiant (attribut id) sur le canevas, ça servira pour le script.
Le code dans la balise <canvas> n'est affiché que si le navigateur ne connaît pas cette balise. C'est une bonne chose de conseiller à ses utilisateurs de mettre à jour leur navigateur. Et mieux, de leur expliquer comment faire, mais ce n'est pas le sujet de ce topic.
En cas de doute, on peut toujours passer sa page au validateur, tout en se rappelant qu'une page invalide n'est pas forcément dramatique. Les standards peuvent être exigeants et on peut vouloir faire des compromis, le tout est de savoir ce qu'on fait.

Une fois qu'on a une base HTML saine, on passe au JavaScript. Le code se trouvera donc dans un fichier nommé camembert.js dans le même dossier d'après mon code HTML. Bien sûr, ce n'est qu'une suggestion.

Premier réflexe à avoir : comme on a lié le script de façon asynchrone (avec l'attribut async), on ne sait donc pas exactement à quel moment il sera exécuté, et on veut éviter qu'il ne se lance trop tôt. Car si la page n'est pas prête, il ne pourra pas accéder à tous les éléments. On va donc utiliser l'évènement "DOMContentLoaded" qui est lancé par l'objet document au moment où la page est prête. Pour faire ça, on utilise une fonction qui s'appelle addEventListener et qui permet de faire exécuter du code au moment où un évènement donné est « détecté ». Ça s'écrit comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
document.addEventListener("DOMContentLoaded", function() {
 
   // ... le code se trouvera ici
 
});

Le plus dur est fait. Je ne vais pas refaire un cours sur les canevas donc je me permets d'aller un peu plus vite. On récupère une référence sur l'élément <canvas> grâce à l'id qu'on a mis dessus et grâce à la fonction getElementById. Ensuite, je demande un contexte de dessin, c'est l'objet qui nous fournira toutes les fonctions de dessin :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var $canvas = document.getElementById("camembert");
var context = $canvas.getContext("2d");

Pour simplifier les choses, on peut supposer que les dimensions du canevas ne changeront pas, et utiliser des valeurs « en dur » dans le code, dans mon exemple utiliser directement le nombre 600 pour la largeur sachant qu'on a donné au canevas une largeur de 600 dans le code HTML. Mais cela risque de mener à des erreurs quand, un beau jour, on voudra changer ces dimensions, car il faudra alors penser à les changer aussi dans le code JavaScript.
Au lieu de ça, on peut utiliser les propriétés $canvas.width et $canvas.height qui nous donnent les dimensions du canevas en temps réel.

Je termine avec un principe à comprendre dans le dessin en canevas : en gros, on a un « crayon invisible » qui prépare les tracés sans rien dessiner. On construit les tracés, invisibles donc, avec des lignes droites, des arcs de cercles ou des courbes de bézier. Une fois qu'un tracé est fait, on peut le tracer réellement (le rendre visible), avec la méthode stroke(), et/ou le remplir avec fill().

Voilà un bout de code qui dessine une part de camembert qui s'adapte à la taille du canevas pour ne pas toucher les bords, et qui a un écartement de 120° :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
document.addEventListener("DOMContentLoaded", function() {
 
   var $canvas = document.getElementById("camembert");
   var context = $canvas.getContext("2d");
   var width = $canvas.width;
   var height = $canvas.height;
 
   // le rayon doit faire moins de la moitié de la plus petite dimension, j'ai choisi 1/3
   var rayon = Math.min(width, height) / 3;
 
   // on place le point d'origine au centre du canevas
   context.translate(width / 2, height / 2);
 
   // on commence le tracé
   context.beginPath();
   context.moveTo(0, 0);
   context.lineTo(rayon, 0);
 
   // la partie courbe
   // 2/3 de pi = 120°
   context.arc(0, 0, rayon, 0, Math.PI * 2/3);
 
   // on revient au point de départ du tracé
   context.closePath();
 
   // on remplit
   context.fillStyle = "orange";
   context.fill();
 
   // on trace le contour
   context.strokeStyle = "gray";
   context.lineWidth = 2;
   context.stroke();
 
});

Pour finir, un petit fiddle pour prouver qu'on peut réaliser des camemberts sans l'aide d'aucune librairie.

Camembert JavaScript en temps réel

JavaScript

Discussions similaires

Partager

Partager