Angles.js
An angular.js wrapper for the Chart.js library.
Chart.js Documentation
New Update of ChartJS (Beta) allow more interaction with graph ( tooltips and png/jpg export of graphs)
ChartJS
Basic Usage
To Use, make sure to include the following .js files above your app:
< script src = " //cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js " > < / script >
< script src = " //cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.min.js " > < / script >
< script src = " angles.js " > < / script >
Next, make sure to add "angles" to your Angular app requirements:
var app = angular . module ( " anglesExample " , [ " angles " ] ) ;
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:
< canvas chart = " Line " options = " options " data = " chart " width = " 500 " height = " 300 " > < / canvas >
Charts can also be added with shorter, aliased types
< canvas barchart options = " options " data = " chart " width = " 500 " height = " 300 " > < / canvas >
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
< canvas barchart responsive = true options = " options " data = " chart " > < / canvas >
the legend attribute auto generate a legend after canvas container
< canvas barchart legend = true options = " options " data = " chart " > < / canvas >
The template for this legend is a legendTemplate in the chart options
$scope . chart = {
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 , 6 ]
} ,
{
fillColor : " 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.
Directives
linechart
For Chart.js Line Charts
< canvas linechart options = " options " data = " chart " width = " 300 " height = " 300 " > < / canvas >
OR
< canvas chart = " Line " options = " options " data = " chart " width = " 300 " height = " 300 " > < / canvas >
barchart
For Chart.js Bar Charts
< canvas barchart options = " options " data = " chart " width = " 300 " height = " 300 " > < / canvas >
OR
< canvas chart = " Bar " options = " options " data = " chart " width = " 300 " height = " 300 " > < / canvas >
radarchart
For Chart.js Radar Charts
< canvas radarchart options = " options " data = " chart " width = " 300 " height = " 300 " > < / canvas >
OR
< canvas chart = " Radar " options = " options " data = " chart " width = " 300 " height = " 300 " > < / canvas >
polarchart
For Chart.js Polar Charts
< canvas polarchart options = " options " data = " chart " width = " 300 " height = " 300 " > < / canvas >
OR
< canvas chart = " PolarArea " options = " options " data = " chart " width = " 300 " height = " 300 " > < / canvas >
piechart
For Chart.js Pie Charts
< canvas piechart options = " options " data = " chart " width = " 300 " height = " 300 " > < / canvas >
OR
< canvas charte = " Pie " options = " options " data = " chart " width = " 300 " height = " 300 " > < / canvas >
doughnutchart
For Chart.js Doughnut Charts
< canvas doughnutchart options = " options " data = " chart " width = " 300 " height = " 300 " > < / canvas >
OR
< canvas chart = " Doughnut " options = " options " data = " chart " width = " 300 " height = " 300 " > < / canvas >
Options and Data
You can provide options and data to all charts via the options and data attributes on the canvas elements.
< body ng-app = " app " >
< div ng-controller = " MainCtrl " >
< canvas donutchart options = " myChartOptions " data = " myChartData " width = " 300 " height = " 300 " > < / canvas >
</ div >
</ body >
' use strict ' ;
angular . module ( ' app ' , [ ' angles ' ] ) . controller ( ' MainCtrl ' , function ( $scope ) {
$scope . myChartData = [
{
value : 30 ,
color : " #F7464A "
} ,
{
value : 50 ,
color : " #E2EAE9 "
} ,
{
value : 100 ,
color : " #D4CCC5 "
} ,
{
value : 40 ,
color : " #949FB1 "
} ,
{
value : 120 ,
color : " #4D5360 "
}
] ;
$scope . myChartOptions = {
animation : true ,
animationSteps : 60 ,
animationEasing : " easeOutQuart " ,
showScale : true ,
scaleOverride : false ,
scaleSteps : null ,
scaleStepWidth : null ,
scaleStartValue : null ,
scaleLineColor : " rgba(0,0,0,.1) " ,
scaleLineWidth : 1 ,
scaleShowLabels : true ,
scaleLabel : " <%=value%> " ,
scaleIntegersOnly : true ,
scaleBeginAtZero : false ,
scaleFontFamily : " 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif " ,
scaleFontSize : 12 ,
scaleFontStyle : " normal " ,
scaleFontColor : " #666 " ,
responsive : false ,
showTooltips : true ,
tooltipEvents : [ " mousemove " , " touchstart " , " touchmove " ] ,
tooltipFillColor : " rgba(0,0,0,0.8) " ,
tooltipFontFamily : " 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif " ,
tooltipFontSize : 14 ,
tooltipFontStyle : " normal " ,
tooltipFontColor : " #fff " ,
tooltipTitleFontFamily : " 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif " ,
tooltipTitleFontSize : 14 ,
tooltipTitleFontStyle : " bold " ,
tooltipTitleFontColor : " #fff " ,
tooltipYPadding : 6 ,
tooltipXPadding : 6 ,
tooltipCaretSize : 8 ,
tooltipCornerRadius : 6 ,
tooltipXOffset : 10 ,
tooltipTemplate : " <%if (label){%><%=label%>: <%}%><%= value %> " ,
multiTooltipTemplate : " <%= value %> " ,
onAnimationProgress : function ( ) { } ,
onAnimationComplete : function ( ) { }
} ;
} ;