3. 1. Kit de développement
NVD3.Js(D3.Js) + Angular-nvd3-Directives
4. 1. Kit de développement / Ionic
● Framework Front-End pour le développement Mobile hybride en HTML5
● Basé sur AngularJs avec Zéro utilisation de JQuery.
● Basé sur Cordova pour la compilation d’applications en iOs, Android, …
● Se base l’accélération matérielle pour les transitions & les animations
transform: translateZ(0);
transform: translate3d(0,0,0);
perspective: 1000; backface-visibility: hidden;
v1.0.0-beta.13
5. 1. Kit de développement / Installation & configuration
cxcxc ● Installation du générateur YeoMan d’ionic
$ npm install -g generator-ionic
● Créer le dossier du projet
$ mkdir dashboard && cd $_
● Utiliser le générateur YeoMan
$ yo ionic
Suivre les instructions d’installation
$ ionic serve
● Ajouter des plates-formes mobiles
$ ionic platform add ios
$ ionic platform add android
7. 1. Kit de développement / Run Hybride Application
● Lancer l’application
o iOs
$ ionic build ios
$ ionic run ios
o Android
$ ionic build android
$ ionic run android
9. 1. Kit de développement / NVD3
● Website: nvd3.com
● Open source: Yes
● Library size (compressed+gzip): 50 KB
● Dependencies: d3.js and Aight for IE8 support - VERY cool but based on D3, no IE8 and prior.
● Graphic technology: SVG
● Supported Charts: Area, Bar, Bubble, Line, Pie, Scatter, Spline, Sparklines, Donut, Node / Edge graph, Bullet chart
● Features:
o Ability to zoom in and out of charts
o Annotations on the chart
o Combination of charts
o Data labels
o Dynamic charts
o Interactive (responds to mouse hover/click)
10. 1. Kit de développement / NVD3 vs D3
http://jsperf.com/d3-pie-vs-nvd3-pie
11. 1. Kit de développement / AngularJs-nvd3-directives
● Website: https://github.com/cmaurer/angularjs-nvd3-directives
● Open source: Yes
● Library size (compressed+gzip): 20 KB
● Dependencies: d3.js, nvd3.js and AngularJs
● Graphic technology: SVG
● Supported Charts: Area, Bar, Bubble, Line, Pie, Scatter, Spline, Sparklines, Donut, Node / Edge graph, Bullet chart
● Features:
o Ability to zoom in and out of charts
o Annotations on the chart
o Combination of charts
o Data labels
o Dynamic charts (Two-way Data binding d’AngularJs)
o Interactive (responds to mouse hover/click)
12. 1. Kit de développement / SetUp Angular-nvd3-directives
● bower install d3 --save
● bower install nvd3 --save
● bower install angularjs-nvd3-
directives --save
● Include Scripts: d3, nvd3, angularjs-nvd3-
directives and nv.d3.css