Intégration de graphique simple avec chart.js ============================================= ![category](web) ![tag](javascript) ![tag](angularjs) Il existe un module angular js permettant d'obtenir rapidement des graphiques à partir de donnée: angular-chart.js. Il est possible de créer des graphiques: - courbes - batons - camenbert - radar - ... avec des notions de temps réel Vous pouvez obtenir de nombreuses informations sur http://jtblin.github.io/angular-chart.js/ Installation ------------ ```bash bower install angular-chart.js ``` Utilisation ----------- Encore une fois pour expliciter l'utilisation d'un module nous allons mettre en place un exemple simple pour mettre en avant les éléments à mettre en place index.html ```html Test ``` Les principaux points - déclaration des js charts.js et angular-chart.js - déclaration du css angular-chart.css - déclaration d'une balise canvas avec des attributs chart ```javascript var module = angular.module("MyAppli", ['chart.js']); // add controler module.controller('AppController', function($scope) { $scope.getInit = function() { $scope.labels = ["January", "February", "March", "April", "May", "June", "July"]; $scope.series = ['Series A', 'Series B']; $scope.data = [ [65, 59, 80, 81, 56, 55, 40], [28, 48, 40, 19, 86, 27, 90] ]; }; $scope.onClick = function (points, evt) { console.log(points, evt); }; // init data $scope.getInit(); }); ``` Les principaux points - déclaration du module charts.js - déclaration des données