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:

<scriptsrc="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script><scriptsrc="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.min.js"></script><scriptsrc="angles.js"></script>

Next, make sure to add "angles" to your Angular app requirements:

varapp=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:

<canvaschart="Line" options="options" data="chart" width="500" height="300"></canvas>

Charts can also be added with shorter, aliased types

<canvasbarchartoptions="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

<canvasbarchartresponsive=trueoptions="options" data="chart"></canvas>

the legend attribute auto generate a legend after canvas container

<canvasbarchartlegend=trueoptions="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

<canvaslinechartoptions="options" data="chart" width="300" height="300"></canvas>
OR
<canvaschart="Line" options="options" data="chart" width="300" height="300"></canvas>

barchart

For Chart.js Bar Charts

<canvasbarchartoptions="options" data="chart" width="300" height="300"></canvas>
OR
<canvaschart="Bar" options="options" data="chart" width="300" height="300"></canvas>

radarchart

For Chart.js Radar Charts

<canvasradarchartoptions="options" data="chart" width="300" height="300"></canvas>
OR
<canvaschart="Radar" options="options" data="chart" width="300" height="300"></canvas>

polarchart

For Chart.js Polar Charts

<canvaspolarchartoptions="options" data="chart" width="300" height="300"></canvas>
OR
<canvaschart="PolarArea" options="options" data="chart" width="300" height="300"></canvas>

piechart

For Chart.js Pie Charts

<canvaspiechartoptions="options" data="chart" width="300" height="300"></canvas>
OR
<canvascharte="Pie" options="options" data="chart" width="300" height="300"></canvas>

doughnutchart

For Chart.js Doughnut Charts

<canvasdoughnutchartoptions="options" data="chart" width="300" height="300"></canvas>
OR
<canvaschart="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.

<bodyng-app="app"><divng-controller="MainCtrl"><canvasdonutchartoptions="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"}];//Globals$scope.myChartOptions={// Boolean - Whether to animate the chartanimation: true,// Number - Number of animation stepsanimationSteps: 60,// String - Animation easing effectanimationEasing: "easeOutQuart",// Boolean - If we should show the scale at allshowScale: true,// Boolean - If we want to override with a hard coded scalescaleOverride: false,// ** Required if scaleOverride is true **// Number - The number of steps in a hard coded scalescaleSteps: null,// Number - The value jump in the hard coded scalescaleStepWidth: null,// Number - The scale starting valuescaleStartValue: null,// String - Colour of the scale linescaleLineColor: "rgba(0,0,0,.1)",// Number - Pixel width of the scale linescaleLineWidth: 1,// Boolean - Whether to show labels on the scalescaleShowLabels: true,// Interpolated JS string - can access valuescaleLabel: "<%=value%>",// Boolean - Whether the scale should stick to integers, not floats even if drawing space is therescaleIntegersOnly: true,// Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest valuescaleBeginAtZero: false,// String - Scale label font declaration for the scale labelscaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",// Number - Scale label font size in pixelsscaleFontSize: 12,// String - Scale label font weight stylescaleFontStyle: "normal",// String - Scale label font colourscaleFontColor: "#666",// Boolean - whether or not the chart should be responsive and resize when the browser does.responsive: false,// Boolean - Determines whether to draw tooltips on the canvas or notshowTooltips: true,// Array - Array of string names to attach tooltip eventstooltipEvents: ["mousemove","touchstart","touchmove"],// String - Tooltip background colourtooltipFillColor: "rgba(0,0,0,0.8)",// String - Tooltip label font declaration for the scale labeltooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",// Number - Tooltip label font size in pixelstooltipFontSize: 14,// String - Tooltip font weight styletooltipFontStyle: "normal",// String - Tooltip label font colourtooltipFontColor: "#fff",// String - Tooltip title font declaration for the scale labeltooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",// Number - Tooltip title font size in pixelstooltipTitleFontSize: 14,// String - Tooltip title font weight styletooltipTitleFontStyle: "bold",// String - Tooltip title font colourtooltipTitleFontColor: "#fff",// Number - pixel width of padding around tooltip texttooltipYPadding: 6,// Number - pixel width of padding around tooltip texttooltipXPadding: 6,// Number - Size of the caret on the tooltiptooltipCaretSize: 8,// Number - Pixel radius of the tooltip bordertooltipCornerRadius: 6,// Number - Pixel offset from point x to tooltip edgetooltipXOffset: 10,// String - Template string for single tooltipstooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",// String - Template string for single tooltipsmultiTooltipTemplate: "<%= value %>",// Function - Will fire on animation progression.onAnimationProgress: function(){},// Function - Will fire on animation completion.onAnimationComplete: function(){}};};