An angular.js wrapper for the Chart.js library.
New Update of ChartJS (Beta) allow more interaction with graph ( tooltips and png/jpg export of graphs)
To Use, make sure to include the following .js files above your app:
Next, make sure to add "angles" to your Angular app requirements:
var app = angular;
Charts are added using a canvas element with the following syntax, which corresponds to Chart.js. The data and options attributes refer to ng-models in the controller scope. You can name these whatever you want:
Charts can also be added with shorter, aliased types
In your controller, make sure you provide the appropriate data and options per Chart.js documentation:
you can add responsive attribute to enable responsiveness of canvas
the legend attribute auto generate a legend after canvas container
The template for this legend is a legendTemplate in the chart options
$scopechart =labels : "Monday" "Tuesday" "Wednesday" "Thursday" "Friday"datasets :fillColor : "rgba(151,187,205,0)"strokeColor : "#e67e22"pointColor : "rgba(151,187,205,0)"pointStrokeColor : "#e67e22"data : 4 3 5 4 6fillColor : "rgba(151,187,205,0)"strokeColor : "#f1c40f"pointColor : "rgba(151,187,205,0)"pointStrokeColor : "#f1c40f"data : 8 3 2 5 4;
That's it. You can change the values of the chart just as you would with any other angular model.
For Chart.js Line Charts
For Chart.js Bar Charts
For Chart.js Radar Charts
For Chart.js Polar Charts
For Chart.js Pie Charts
For Chart.js Doughnut Charts
Options and Data
You can provide options and data to all charts via the options and data attributes on the canvas elements.