Premiers pas en JavaScript
Graphisme
librairies extérieures
cuy copyleft
  See You Why?  

 


Graphisme en JS (39.1) | | HTML5 et la balise <canvas> (39.3)

Contenu

 

 

I. Graphisme et JavaScript

voir <<< séquence précédente

 

II. Librairies extérieures

JS seul n'offre pas beaucoup de possibilités au point de vue graphisme. Cependant, on rencontrera sur le Net des pages remarquablement bien faites et écrites en JS. Nous ne donnerons que certains exemples ici. Un coup d'œil sur la source d'une page financière de Google vous en persuadera : ici, à moins que vous ne préfériez ce comparateur du prix exprimé en euros d'un litre d'essence 95 octane dans tous les pays (de 0,02 € au Vénézuela à 1,98 € en Turquie, en janvier 2013) : ici.

Bien sûr, on trouve toujours des solutions aux problèmes informatiques. Personnellement j'ai souvent utilisé d'autres logiciels, plus faciles à utiliser au point de vue graphisme (par exemple des tableurs), puis une copie d'écran, quelques retouches d'images et finalement image incorporée dans ma page...

Le but de cette page est de vous présenter quelques librairies développées afin de pouvoir tirer le meilleur parti du graphisme possible avec la programmation en JS. Pour l'instant, il n'est pas question d'en préférer un plus qu'un autre... mais il n'est pas impossible que l'on développe un didacticiel pour l'un d'eux à l'avenir.

J'y présenterai rapidement : Flot, HighCharts, gRaphael, JavaScript InfoVis Toolkit, jQuery Visualize Plugin, moochart, JS Charts, dygraphs, JSXGraph,

 

A. Flot

Flot est une librairie de JavaScript utilisant JQuery, orienté graphisme et mettant l'accent sur une utilisation simple, un look attrayant et des fonctions interactives.

Désolé, mais IE 9 ne semble pas apprécier la librairie Flot et Safari a longtemps ramé pour charger la totalité de cette page... mais le résultat est correct.

site officiel : http://www.flotcharts.org/ ; fichier ZIP téléchargeable ici ;

 

 

B. HighCharts

Highcharts est une bibliothèque de cartographie écrite en pur JavaScript, offrant des graphiques intuitifs et interactifs pour votre site web ou une application web.
Highcharts prend actuellement en compte des graphique de type ligne, spline, région ou zone, areaspline, colonne, barre, tarte, diffusion, jauges angulaires, arearange, areasplinerange, columnrange et types de graphiques polaires.

site officiel : http://highcharts.com/ ; fichier ZIP téléchargeable ici ;

 

 

C. gRaphael

Le but de gRaphaël est de vous aider à créer des graphiques superbes sur votre site web. Il est basé sur Raphaël bibliothèque graphique. Consultez les démos pour voir des graphiques statiques et interactives en action.
gRaphaël serait actuellement compatible avec Firefox 3.0 +, Safari 3.0 +, Opera 9.5 + et Internet Explorer 6.0 +

site officiel : http://g.raphaeljs.com/ ; fichiers téléchargeables ici ;

 

 

D. JavaScript InfoVis Toolkit

Flot

 

site officiel : http://philogb.github.com/jit/ ; fichier ZIP téléchargeable ici ;

 

E. jQuery Visualize Plugin

Il ya quelque temps, nous sommes arrivés avec une technique pour créer des diagrammes et des graphiques accessibles, technique qui utilise JavaScript pour racler les données d'un tableau HTML et de générer bar, ligne, surface, et des visualisations graphiques circulaires utilisant l'élément canvas HTML5. Cette technique offre un moyen simple pour générer des graphiques, mais plus important encore, car il fonde le tableau de données déjà dans la page dans un élément de tableau HTML, il est accessible aux personnes qui naviguent sur le Web avec un lecteur d'écran ou d'autres technologies d'assistance, ou avec les navigateurs qui ne prennent pas entièrement en charge JavaScript ou toile HTML5. Nous l'avons emballé comme un plugin jQuery téléchargeable appelé Visualize.

site officiel : http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/ ; fichiers téléchargeables ici ;

 

 

F. moochart

moochart est un plugin pour Mootools 1.2, qui génère des diagrammes à bulles avec les balises de type 'canvas'. Les versions futures pourraient inclure tarte, un bar et des graphiques linéaires.

Il a été développé à l'origine pour un projet de l'UE sur l' Adobe AIR plate-forme.

site officiel : http://moochart.coneri.se/ ; fichiers téléchargeables ici ;

 

 

G. JS Charts

JS Charts est un générateur de tableau basé sur JavaScript qui nécessite peu ou pas de codage. Avec les graphiques JS, tracer des cartes est une tâche simple et facile, puisque vous n'avez qu'à utiliser le script côté client (c.-à réalisée par votre navigateur). Pas de plug-ins supplémentaires ou de modules de serveurs sont nécessaires. Il suffit d'inclure nos scripts, préparez vos données cartographiques dans Array XML, JSON ou JavaScript et votre thème est prêt!
JS Graphiques vous permet de créer des graphiques dans différents modèles tels que les graphiques à barres , camemberts ou de simples graphiques linéaires.

site officiel : http://www.jscharts.com/ ;
fichiers et licences téléchargeables ici ;

 

 

H. dygraphs

dygraphs est une librairie open source JavaScript qui produit des résultats interactifs, des graphiques zoomables de séries chronologiques. Il est conçu pour afficher des ensembles de données assez denses et permettre aux utilisateurs de les explorer et de les interpréter.
Certaines des caractéristiques de dygraphs :
Séries chronologiques parcelles sans utiliser de serveur externe ou Flash
Travaux dans Internet Explorer (en utilisant excanvas)
Léger (69kb) et réactif
Affiche les valeurs sur mouseover, donc interaction facilement détectable
Prise en charge des bandes d'erreur autour de séries de données
Zoom interactif
Annotations sur le graphique affiché
Période moyenne réglable
Peut intelligemment tracer fractions
Personnalisables cliquez-par des actions
Compatible avec l'API Google Visualization
Paramètres par défaut intelligents le rendant facile à utiliser

Désolé, mais IE 9 ne semble pas apprécier la librairie Dygraphs.

site officiel : http://dygraphs.com/ ; accès aux fichiers téléchargeables ici ;

 

 

I. JSXGraph

Jsxgraph est une bibliothèque multi-navigateur pour la géométrie interactive, la fonction de traçage, la cartographie et la visualisation des données dans un navigateur Web. Il est mis en œuvre complètement en JavaScript, ne pas compter sur une autre bibliothèque, et utilise SVG, VML, ou de la toile. Jsxgraph est facile à intégrer et dispose d'un encombrement réduit : moins de 100 kilo-octets si incorporé dans une page Web. Pas de plug-ins sont nécessaires ! Un soin particulier a été pris pour optimiser les performances.

Jsxgraph prend en charge les périphériques multitouch comme l'iPad d'Apple et les appareils fonctionnant sous Android.

site officiel : http://jsxgraph.uni-bayreuth.de/wp/ ; accès aux fichiers téléchargeables ici ;

 

 

K. Bluff

Bluff est un port JavaScript de la bibliothèque graphique Gruff pour Ruby. Il est conçu pour supporter toutes les fonctionnalités de Gruff avec peu de dépendances, les seuls scripts tiers dont vous avez besoin pour l'exécuter sont une copie de JS.Class (2.6kB gzip) et une copie de excanvas Google pour soutenir la toile dans Internet Explorer. Ces deux scripts sont fournis avec le téléchargement Bluff. Bluff compressé pèse lui-même environ 11ko.

Pour tracer un graphe, vous créez un nouvel objet graphique Bluff en utilisant l'id d'un élément présent sur la toile ou la page, définissez certaines options, ajoutez les données et les étiquettes, puis donnez l'instruction de dessiner le graphique.

site officiel : http://bluff.jcoglan.com/ ; fichier ZIP téléchargeable ici ;

 

 

IX. Test relatif au graphisme

voir suite >>>

 

 


Graphisme en JS (39.1) | | HTML5 et la balise <canvas> (39.3)

 

 

Merci de votre visite à partir de :

Vous êtes sur :
https://cuy.be/cours/jvs/jvs_392_graphisme_autre.html

partager sur FaceBook...           consulter sur FaceBook...

 

copyleft
Des liens ne fonctionnent plus ?
Avez-vous des suggestions ?
des commentaires, des corrections, un encouragement... ?
Pour info : Non, il n'y a pas de version papier ou DOC, PDF, etc. de ces notes.


Envoyez-moi un E-Mail (cuy(point)w(at)skynet(point)be)

Attention (at) signifie @ et (point) signifie .

Accueil CUY = See you why?

Compteur gratuitEasyCounter     BelStat Monitored by BelStat - Your Site Counts
La 1 000 000e page a été visitée le 21 mai 2010.
La 2 000 000e page a été visitée ce 18 mars 2012, vers midi.
La 3 000 000e page a été visitée ce 7 janvier 2014 entre 18 h et 18 h 45,
La 4 000 000e page a été visitée ce 5 juin 2015 entre 15 h 49 et 15 h 52,
La 5 000 000e page a été visitée ce 29 aout 2017 après 23 h 30,
Et la 6 000 000e page visitée, trop tôt pour y penser ?
 
et, d'après BelStat, CUY est visité surtout en semaine, peu le weekend...
moins et irrégulièrement pendant les vacances :

visites sur 3 mois, de la mi octobre 2013 à la mi janvier 2014.
 
La 3 333 333e page visitée a eu lieu ce mardi 10 juin 2014, en début d'après midi...
La 3 666 666e page visitée a eu lieu ce dimanche 28 decembre 2014, vers 16 h...
Un tiers de million de pages visitées en 154 jours cela fait une moyenne de 2165 pages visitées par jour...
Deux tiers de million de pages visitées en 355 jours soit une moyenne de 1878 pages visitées par jour...
et seulement 1195 pages visitées quotidiennement pendant les vacances estivales
de la mi juin à la mi septembre 2014

Vous voulez lire quelques messages reçus ?
quelques encouragements ?
Cliquez ici


Fin septembre 2009, installation de ce compteur
qui ne compte chaque nouvel ordinateur visiteur qu'une seule fois
free counter
 
m-à-j du 22/11/2021 :

Depuis cette fin septembre 2009, parmi les 210 pays (sur 274 drapeaux connus) qui nous ont visité,
voici les 100 pays qui nous visitent le plus, 
Nos petits visiteurs, classés par date de visite, où un seul ordi nous a visité, sont :
199. Turkmenistan (TM May 10, 2017) ; 200. Lesotho (LS March 1, 2017) ;
201. Turks and Caicos Island (TC January 18, 2016
202. Cook Islands (CK September 19, 2015)  203. Faroe Islands (FO January 27, 2015
204. Virgin Islands American (VI November 12, 2014) ;
205. Belize (BZ September 29, 2014) ;206. Eswatini - Swaziland (SZ July 21, 2014) ;
207. Grenada (GD April 3, 2014) ; 208. Timor-Leste (TI March 29, 2014) ;
209. American Samoa (AS December 26, 2012) ; 210. Guyana (GY November 5, 2010).