Tabellepflege abgeschlossen, Entwicklung eingebunden, Basiswerte und CSS-Fixes

package.json

@@ -3,11 +3,12 @@
   "version": "1.1.1",
   "description": "IonicMaterialDesign: An Ionic project",
   "dependencies": {
+    "angular-chart.js": "^1.0.2",
     "gulp": "^3.5.6",
-    "gulp-sass": "^2.0.4",
     "gulp-concat": "^2.2.0",
     "gulp-minify-css": "^0.3.0",
-    "gulp-rename": "^1.2.0"
+    "gulp-rename": "^1.2.0",
+    "gulp-sass": "^2.0.4"
   },
   "devDependencies": {
     "bower": "^1.3.3",

www/css/custom_style.css

@@ -15,6 +15,21 @@ md-input-container {
 }
 
 
+.divcenter {
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+}
+
+/* Listenbackground */
+.listbackodd{
+    background-color: #F5F5F5;
+}
+
+.listbackeven{
+    background-color: #FFFFFF;
+}
+
 .image-list-thumb {
     padding: 2px 2px 2px 2px;
     height: 64px;

www/index.html

@@ -33,6 +33,8 @@
     <script src="lib/angular-messages/angular-messages.js"></script>
     <script src="lib/angular-aria/angular-aria.js"></script>
     <script src="lib/angular-material/angular-material.js"></script>
+    <script src="lib/angular-chart.js/node_modules/chart.js/dist/Chart.min.js"></script>
+    <script src="lib/angular-chart.js/dist/angular-chart.min.js"></script>
     <!-- end Angular javascript lib -->
 
     <!-- Cordova script (this will be a 404 during development) -->

www/js/app.js

@@ -39,7 +39,7 @@ window.globalVariable = {
 };// End Global variable
 
 
-angular.module('starter', ['ionic','ngIOS9UIWebViewPatch','starter.controllers', 'starter.services', 'ngMaterial', 'ngMessages', 'ngCordova'])
+angular.module('starter', ['ionic','ngIOS9UIWebViewPatch','starter.controllers', 'starter.services', 'ngMaterial', 'ngMessages', 'ngCordova','chart.js'])
     .run(function ($ionicPlatform, $cordovaSQLite, $rootScope, $ionicHistory, $state, $mdDialog, $mdBottomSheet) {
 
         //Create database table of contracts by using sqlite database.

www/lib/angular-chart.js/.codeclimate.yml

@@ -0,0 +1,10 @@
+languages:
+  Ruby: false
+  JavaScript: true
+  PHP: false
+exclude_paths:
+- "dist/*"
+- "node_modules/*"
+- "gulpfile.js"
+- "examples/*"
+- "test/fixtures/coverage.js"

www/lib/angular-chart.js/.dockerignore

@@ -0,0 +1,2 @@
+coverage/
+node_modules/

www/lib/angular-chart.js/.editorconfig

@@ -0,0 +1,18 @@
+# This file is for unifying the coding style for different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+# Tabs in JS unless otherwise specified
+[**.js]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

www/lib/angular-chart.js/.jscsrc

@@ -0,0 +1,82 @@
+{
+  "requireCurlyBraces": [
+    "try",
+    "catch",
+    "do"
+  ],
+  "requireCamelCaseOrUpperCaseIdentifiers": "ignoreProperties",
+  "requireCapitalizedConstructors": true,
+  "maximumLineLength": {
+    "value": 120,
+    "allowComments": true,
+    "allowRegex": true
+  },
+  "validateIndentation": 2,
+  "validateQuoteMarks": "'",
+
+  "disallowMultipleLineStrings": true,
+  "disallowMixedSpacesAndTabs": true,
+  "disallowTrailingWhitespace": true,
+  "disallowQuotedKeysInObjects": true,
+  "disallowSpaceAfterObjectKeys": true,
+
+  "requireSpaceAfterKeywords": [
+    "if",
+    "else",
+    "for",
+    "while",
+    "do",
+    "switch",
+    "return",
+    "try",
+    "catch",
+    "function",
+    "typeof"
+  ],
+  "requireSpaceBeforeBinaryOperators": [
+    "=", "+=", "-=", "*=", "/=", "%=", "<<=", ">>=", ">>>=",
+    "&=", "|=", "^=", "+=",
+
+    "+", "-", "*", "/", "%", "<<", ">>", ">>>", "&",
+    "|", "^", "&&", "||", "===", "==", ">=",
+    "<=", "<", ">", "!=", "!=="
+  ],
+  "requireSpaceAfterPrefixUnaryOperators": [
+    "!"
+  ],
+  "requireSpacesInConditionalExpression": true,
+  "requireSpaceBeforeBlockStatements": true,
+  "requireSpacesInForStatement": true,
+  "requireLineFeedAtFileEnd": true,
+  "requireSpacesInFunctionExpression": {
+    "beforeOpeningCurlyBrace": true,
+    "beforeOpeningRoundBrace": true
+  },
+  "requireSpacesInFunctionDeclaration": {
+    "beforeOpeningCurlyBrace": true,
+    "beforeOpeningRoundBrace": true
+  },
+  "requireDotNotation": true,
+  "disallowSpacesInsideArrayBrackets": "all",
+  "disallowSpacesInsideParentheses": true,
+
+
+  "validateJSDoc": {
+    "checkParamNames": true,
+    "requireParamTypes": true
+  },
+
+  "disallowMultipleLineBreaks": true,
+  "disallowNewlineBeforeBlockStatements": true,
+  "disallowKeywords": [ "with" ],
+
+  "excludeFiles": [
+    "node_modules/**",
+    "dist/**",
+    "coverage/**",
+    "examples/bundle.js",
+    "examples/commonjs.bundle.js",
+    "examples/smoothscroll.min.js",
+    "test/fixtures/coverage.js"
+  ]
+}

www/lib/angular-chart.js/.jshintignore

@@ -0,0 +1,9 @@
+node_modules/
+dist/
+tmp/
+examples/bundle.js
+examples/commonjs.bundle.js
+examples/smoothscroll.min.js
+coverage/
+test/fixtures/coverage.js
+

www/lib/angular-chart.js/.jshintrc

@@ -0,0 +1,24 @@
+{
+  "strict"        : true,     // true: Requires all functions run in ES5 Strict Mode
+  "undef"         : true,     // true: Require all non-global variables to be declared (prevents global leaks)
+  "unused"        : true,     // true: Require all defined variables be used
+  "noempty"       : true,     // Prohibit use of empty blocks
+  "trailing"      : true,     // Prohibit trailing whitespaces.
+  "white"         : false,    // Check against strict whitespace and indentation rules.
+  "indent"        : 2,        // {int} Number of spaces to use for indentation
+  "maxcomplexity" : 10,       // {int} Max number for cyclomatic complexity
+  "maxdepth"      : 2,        // {int} Max number for nesting blocks
+  "newcap"        : true,     // true: Require capitalization of all constructor functions e.g. `new F()`
+  "quotmark"      : "single", // Quotation mark consistency
+  "-W058"         : true,     // Missing '()' invoking a constructor
+  "browser"       : true,     // Standard browser globals e.g. `window`, `document`.
+  "predef"        : [         // Custom globals.
+    "angular",
+    "G_vmlCanvasManager",
+    "require",
+    "console",
+    "Chart",
+    "define",
+    "module"
+  ]
+}

www/lib/angular-chart.js/.node-version

@@ -0,0 +1 @@
+4.4.3

www/lib/angular-chart.js/.npmignore

@@ -0,0 +1,6 @@
+.idea/
+node_modules/
+test/fixtures/shots/
+coverage/
+examples/bundle.js
+examples/commonjs.bundle.js

www/lib/angular-chart.js/.travis.yml

@@ -0,0 +1,19 @@
+sudo: required
+services:
+- docker
+install:
+- docker build -t jtblin/angular-chart.js .
+script:
+- docker run --name angular-chart.js -it -e REPORTER=$REPORTER -e CODECLIMATE_REPO_TOKEN=$CODECLIMATE_REPO_TOKEN -e CI=$CI -e TOLERANCE=$TOLERANCE -e DELAY=$DELAY -e IMGUR_ID=$IMGUR_ID jtblin/angular-chart.js
+after_success:
+- docker start angular-chart.js
+- docker exec -it angular-chart.js npm run codeclimate
+after_script:
+- docker stop angular-chart.js ||true
+- docker rm angular-chart.js
+env:
+  global:
+    - secure: YWABlINoIkwl9RFLOW9G0lATEP3aiXXi+DS6TWfvQWWG/jkS5sn7IqWC2U67LjwQ0lDg0yevo3ZD7FyYQ5lr8AVuScAZ6P2o2dm9t/HBKGTG4u016dxbWWYVZ8MAlKT7TfjVD8iDzcWyZedsbpuyaNNp4pGr/CNcvq7TGdJLNkU=
+    - CI=1
+    - REPORTER=list
+    - TOLERANCE=0.001

www/lib/angular-chart.js/CONTRIBUTING.md

@@ -0,0 +1,9 @@
+### Contributing
+
+1. Create an issue
+1. Fork the repo
+1. Install dependencies: `npm install` and `bower install`
+1. Make your changes
+1. Install [GraphicsMagick](http://www.graphicsmagick.org/)
+1. Run linter and tests: `gulp check`
+1. Submit pull request

www/lib/angular-chart.js/Dockerfile

@@ -0,0 +1,7 @@
+FROM jtblin/debian-node-graphicsmagick:stretch-node-v4.4.7-gm-v1.3.24
+WORKDIR /src
+ADD . ./
+RUN chown -R node:node /src
+USER node
+RUN npm install
+CMD ["npm", "test"]

www/lib/angular-chart.js/ISSUE_TEMPLATE.md

@@ -0,0 +1,39 @@
+<!--
+Thanks for wanting to report an issue you've found in angular-chart.js. 
+
+Please use the template below to create your issue. Issues not following the template risk being closed 
+immediately!
+
+Plese note that issues or feature requests for Chart.js (e.g. new chart type, new axis, etc.) 
+need to be opened on Chart.js issues tracker: https://github.com/nnnick/Chart.js/issues.
+
+For questions about options, make sure you search in the Chart.js docs as all Chart.js options
+are supported via chart-options: http://www.chartjs.org/docs/
+
+For general questions about usage, please use [http://stackoverflow.com/](http://stackoverflow.com/)
+as you will be more likely to get an appropriate answer.
+ 
+Please check if the issue exists before creating a new one. 
+While opening an issue please provide a jsbin template or equivalent 
+to reproduce the issue. 
+
+-->
+
+### Overview
+
+Describe the issue. What is the issue and what did you expect?
+
+Please make sure to review and check all of these items:
+
+- [ ] Use latest version of the library
+- [ ] Make sure you've included all the dependencies e.g Chart.js, angular, etc.
+- [ ] Include a repro case, see below.
+
+
+### Step to reproduce
+
+**Ensure you add a link to a plunker, jsbin, or equivalent. Issues without repro steps may be closed immediately.** 
+
+Here is a [jsbin template for 0.x version](http://jsbin.com/cucoqe/1/edit?html,js,output) and [one for 1.x](http://jsbin.com/rodunob/edit?html,js,output) for convenience.
+
+

www/lib/angular-chart.js/LICENSE

@@ -0,0 +1,27 @@
+Copyright (c) Jerome Touffe-Blin ("Author")
+All rights reserved.
+
+The BSD License
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions
+are met:
+
+1. Redistributions of source code must retain the above copyright
+   notice, this list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright
+   notice, this list of conditions and the following disclaimer in the
+   documentation and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE AUTHOR AND CONTRIBUTORS ``AS IS'' AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL THE AUTHOR OR CONTRIBUTORS
+BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR
+BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE
+OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN
+IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

www/lib/angular-chart.js/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,15 @@
+<!-- Thanks for taking the time to submit a pull request for this project. Please ensure the following 
+     before opening a pull request as best as you can. -->
+
+### Description of change
+
+<!-- Please provide a description of the change here. Indicate which issue it's referring to. -->
+
+### Pull Request check-list
+
+- [ ] Run `gulp test` to ensure there are no linting, or style issues and all tests pass.
+- [ ] Squash your commits into a few commits only.
+- [ ] Make sure the commit message is short, concise and descriptive of the issues you're fixing.
+- [ ] Avoid mixing up multiple issues and/or features, open one pull request for each issue.
+- [ ] Have you updated the documentation and / or examples?
+- [ ] Have you included a new test?

www/lib/angular-chart.js/README.md

@@ -0,0 +1,249 @@
+# angular-chart.js
+
+[![Bower version](https://badge.fury.io/bo/angular-chart.js.svg)](http://badge.fury.io/bo/angular-chart.js)
+[![npm version](https://badge.fury.io/js/angular-chart.js.svg)](http://badge.fury.io/js/angular-chart.js)
+[![Build Status](https://travis-ci.org/jtblin/angular-chart.js.svg?branch=master)](https://travis-ci.org/jtblin/angular-chart.js)
+[![Codacy Badge](https://api.codacy.com/project/badge/grade/6aa5ba92f4984a24874e5976ee541623)](https://www.codacy.com/app/jtblin/angular-chart-js)
+[![Code Coverage](https://d3s6mut3hikguw.cloudfront.net/github/jtblin/angular-chart.js/badges/coverage.svg)](https://codeclimate.com/github/jtblin/angular-chart.js)
+[![npm](https://img.shields.io/npm/dm/angular-chart.js.svg?maxAge=2592000)](https://www.npmjs.com/package/angular-chart.js)
+
+Beautiful, reactive, responsive charts for Angular.JS using [Chart.js](http://www.chartjs.org/). 
+
+Have a look at the [demo site](http://jtblin.github.io/angular-chart.js/) to see examples with detailed markup, 
+script and options.
+
+# Installation
+
+This is the `1.x` branch which requires Chart.js 2.x version. Following semantic versioning,
+there are numerous **breaking changes** since 0.x, notably:
+
+* all options now need to use the `chart-` prefix
+* `chart-colours` is now `chart-colors` and `chart-get-colour` is now `chart-get-color`
+* chart types are in `camelCase` e.g. `line` and `polarArea`
+* legend is now a Chart.js option so the `chart-legend` attribute has been removed
+* events emitted on creation and update are now prefixed with `chart-` e.g. `chart-create`
+* `$scope.$apply` is not called anymore on mouse hover functions calls
+* obviously all Chart.js breaking changes as well in how options are set, etc.
+* disabling the `responsive` option doesn't work via global `Chart.defaults.global.responsive` anymore, 
+but must be set via standard options e.g. `ChartJsProvider.setOptions({ responsive: false });`
+* factory now returns a module name instead of a module instance
+
+### npm
+
+    npm install --save angular-chart.js
+
+### cdn
+
+    //cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js
+
+### bower
+
+Bower support has been dropped in Chart.js since version 2.2.0 but you can still use it with Bower thanks to bower-npm-resolver if needed but using npm is preferred.
+
+First, add the resolver in your .bowerrc file:
+
+    {
+      "resolvers": [
+        "bower-npm-resolver"
+      ]
+    }
+
+Then:
+
+    npm install -g bower-npm-resolver
+    bower install --save angular-chart.js
+
+### manually
+
+or copy the files from `dist/`. 
+
+Then add the sources to your code (adjust paths as needed) after 
+adding the dependencies for Angular and Chart.js first:
+
+```html
+<head>
+  ...
+<head>
+<body>
+  ...
+</body>
+  <script src="node_modules/angular/angular.min.js"></script>
+  <script src="node_modules/chart.js/Chart.min.js"></script>
+  <script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
+```
+
+# Utilisation
+
+There are 8 types of charts so 8 directives: `chart-line`, `chart-bar`, `chart-horizontal-bar`, `chart-radar`, 
+`chart-pie`, `chart-polar-area`, `chart-doughnut`, `chart-bubble`.
+
+Here are the options for all directives:
+
+- `chart-data`: series data
+- `chart-labels`: x axis labels (line, bar, horizontal bar, radar, bubble) or series labels (pie, doughnut, polar area)
+- `chart-options`: chart options (as from [Chart.js documentation](http://www.chartjs.org/docs/))
+- `chart-series`: (default: `[]`): series labels (line, bar, radar)
+- `chart-colors`: data colors (will use default colors if not specified)
+- `chart-get-color`: function that returns a color in case there are not enough (will use random colors if not specified)
+- `chart-click`: onclick event handler
+- `chart-hover`: onmousemove event handler
+- `chart-dataset-override`: override individual datasets to allow per dataset configuration e.g. y-axis, mixed type chart
+
+There is another directive `chart-base` that takes an extra attribute `chart-type` to define the type
+dynamically. 
+
+You can create mixed type chart using the `chart-dataset-override`, see 
+[bar-line example](http://jtblin.github.io/angular-chart.js/examples/dataset-override.html).
+
+See also [stacked bar example](http://jtblin.github.io/angular-chart.js/examples/stacked-bars.html).
+
+# Example
+
+## Markup
+
+```html
+<canvas class="chart chart-line" chart-data="data" chart-labels="labels" 
+	chart-series="series" chart-click="onClick"></canvas> 
+```
+
+## Javascript
+
+```javascript
+angular.module("app", ["chart.js"])
+  // Optional configuration
+  .config(['ChartJsProvider', function (ChartJsProvider) {
+    // Configure all charts
+    ChartJsProvider.setOptions({
+      chartColors: ['#FF5252', '#FF8A80'],
+      responsive: false
+    });
+    // Configure all line charts
+    ChartJsProvider.setOptions('line', {
+      showLines: false
+    });
+  }])
+  .controller("LineCtrl", ['$scope', '$timeout', function ($scope, $timeout) {
+
+  $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);
+  };
+  
+  // Simulate async data update
+  $timeout(function () {
+    $scope.data = [
+      [28, 48, 40, 19, 86, 27, 90],
+      [65, 59, 80, 81, 56, 55, 40]
+    ];
+  }, 3000);
+}]);
+```
+
+## AMD RequireJS
+
+See [a simple AMD example](examples/amd.js)
+
+## CommonJS e.g. webpack
+
+Module should work with CommonJS out of the box e.g. [browserify](http://browserify.org/) or 
+[webpack](http://webpack.github.io/), see a [webpack example](examples/webpack.commonjs.js).
+
+# Reactive
+
+angular-chart.js watch updates on data, series, labels, colors and options and will update, or destroy and recreate, 
+the chart on changes.
+
+# Events
+
+angular-chart.js listens to the following events on the `scope` and acts accordingly:
+
+* `$destroy`: call `.destroy()` on the chart
+* `$resize`: call `.resize()` on the chart
+
+angular-chart.js emits the following events on the `scope` and pass the chart as argument:
+
+* `chart-create`: when chart is created
+* `chart-update`: when chart is updated
+* `chart-destroy`: when chart is destroyed
+
+```
+$scope.$on('chart-create', function (evt, chart) {
+  console.log(chart);
+});
+```
+
+**Note**: the event can be emitted multiple times for each chart as the chart can be destroyed and
+created multiple times during angular `watch` lifecycle.
+
+angular-chart.js listens to the scope `$destroy` event and destroys the chart when it happens.
+
+# Colors
+
+There are a set of 7 default colors. Colors can be replaced using the `colors` attribute.
+If there is more data than colors, colors are generated randomly or can be provided 
+via a function through the `getColor` attribute.
+
+Hex colors are converted to Chart.js colors automatically, 
+including different shades for highlight, fill, stroke, etc.
+
+## Browser compatibility
+
+For IE8 and older browsers, you will need 
+to include [excanvas](https://code.google.com/p/explorercanvas/wiki/Instructions). 
+You will also need a [shim](https://github.com/es-shims/es5-shim) for ES5 functions.
+
+You also need to have  ```height``` and ```width``` attributes for the ```<canvas>``` tag of your chart 
+if using IE8 and older browsers. If you *do not* have these attributes, you will need a 
+[getComputedStyle shim](https://github.com/Financial-Times/polyfill-service/blob/master/polyfills/getComputedStyle/polyfill.js) 
+and the line ```document.defaultView = window;```, but there still may be errors (due to code in Chart.js).
+
+```html
+<head>
+<!--[if lt IE 9]>
+  <script src="excanvas.js"></script>
+  <script src="es5-shim.js"></script>
+<![endif]-->
+</head>
+```
+
+# Issues
+
+**Issues or feature requests for Chart.js (e.g. new chart type, new axis, etc.) need to be opened on 
+[Chart.js issues tracker](https://github.com/nnnick/Chart.js/issues)**
+
+**For general questions about usage, please use [http://stackoverflow.com/](http://stackoverflow.com/)**
+ 
+Please check if issue exists first, otherwise open issue in [github](https://github.com/jtblin/angular-chart.js/issues). 
+**Ensure you add a link to a plunker, jsbin, or equivalent.** 
+
+Here is a [jsbin template](http://jsbin.com/rodunob/edit?html,js,output) for convenience.
+
+# v0.x - Chart.js v1.x - deprecated
+
+This is the deprecated version of angular-chart.js that uses the v1.x version of Chart.js.
+If you want to use this version, please checkout the 
+[chartjs-1.x branch](https://github.com/jtblin/angular-chart.js/tree/chartjs-1.x)
+
+# Contributing
+ 
+Pull requests welcome!
+
+See [CONTRIBUTING.md](CONTRIBUTING.md).
+
+## Contributors
+
+Thank you to the [contributors](https://github.com/jtblin/angular-chart.js/graphs/contributors)!
+
+# Author
+
+Jerome Touffe-Blin, [@jtblin](https://twitter.com/jtblin), [About me](http://about.me/jtblin)
+
+# License
+
+angular-chart.js is copyright 2016 Jerome Touffe-Blin and contributors. 
+It is licensed under the BSD license. See the include LICENSE file for details.

www/lib/angular-chart.js/angular-chart.js

@@ -0,0 +1,365 @@
+(function (factory) {
+  'use strict';
+  if (typeof exports === 'object') {
+    // Node/CommonJS
+    module.exports = factory(
+      typeof angular !== 'undefined' ? angular : require('angular'),
+      typeof Chart !== 'undefined' ? Chart : require('chart.js'));
+  }  else if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define(['angular', 'chart'], factory);
+  } else {
+    // Browser globals
+    if (typeof angular === 'undefined' || typeof Chart === 'undefined')
+      throw new Error('Chart.js library needs to be included, see http://jtblin.github.io/angular-chart.js/');
+    factory(angular, Chart);
+  }
+}(function (angular, Chart) {
+  'use strict';
+
+  Chart.defaults.global.multiTooltipTemplate = '<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value %>';
+  Chart.defaults.global.tooltips.mode = 'label';
+  Chart.defaults.global.elements.line.borderWidth = 2;
+  Chart.defaults.global.elements.rectangle.borderWidth = 2;
+  Chart.defaults.global.legend.display = false;
+  Chart.defaults.global.colors = [
+    '#97BBCD', // blue
+    '#DCDCDC', // light grey
+    '#F7464A', // red
+    '#46BFBD', // green
+    '#FDB45C', // yellow
+    '#949FB1', // grey
+    '#4D5360'  // dark grey
+  ];
+
+  var useExcanvas = typeof window.G_vmlCanvasManager === 'object' &&
+    window.G_vmlCanvasManager !== null &&
+    typeof window.G_vmlCanvasManager.initElement === 'function';
+
+  if (useExcanvas) Chart.defaults.global.animation = false;
+
+  return angular.module('chart.js', [])
+    .provider('ChartJs', ChartJsProvider)
+    .factory('ChartJsFactory', ['ChartJs', '$timeout', ChartJsFactory])
+    .directive('chartBase', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory(); }])
+    .directive('chartLine', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('line'); }])
+    .directive('chartBar', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('bar'); }])
+    .directive('chartHorizontalBar', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('horizontalBar'); }])
+    .directive('chartRadar', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('radar'); }])
+    .directive('chartDoughnut', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('doughnut'); }])
+    .directive('chartPie', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('pie'); }])
+    .directive('chartPolarArea', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('polarArea'); }])
+    .directive('chartBubble', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('bubble'); }])
+    .name;
+
+  /**
+   * Wrapper for chart.js
+   * Allows configuring chart js using the provider
+   *
+   * angular.module('myModule', ['chart.js']).config(function(ChartJsProvider) {
+   *   ChartJsProvider.setOptions({ responsive: false });
+   *   ChartJsProvider.setOptions('Line', { responsive: true });
+   * })))
+   */
+  function ChartJsProvider () {
+    var options = { responsive: true };
+    var ChartJs = {
+      Chart: Chart,
+      getOptions: function (type) {
+        var typeOptions = type && options[type] || {};
+        return angular.extend({}, options, typeOptions);
+      }
+    };
+
+    /**
+     * Allow to set global options during configuration
+     */
+    this.setOptions = function (type, customOptions) {
+      // If no type was specified set option for the global object
+      if (! customOptions) {
+        customOptions = type;
+        options = angular.extend(options, customOptions);
+        return;
+      }
+      // Set options for the specific chart
+      options[type] = angular.extend(options[type] || {}, customOptions);
+    };
+
+    this.$get = function () {
+      return ChartJs;
+    };
+  }
+
+  function ChartJsFactory (ChartJs, $timeout) {
+    return function chart (type) {
+      return {
+        restrict: 'CA',
+        scope: {
+          chartGetColor: '=?',
+          chartType: '=',
+          chartData: '=?',
+          chartLabels: '=?',
+          chartOptions: '=?',
+          chartSeries: '=?',
+          chartColors: '=?',
+          chartClick: '=?',
+          chartHover: '=?',
+          chartDatasetOverride: '=?'
+        },
+        link: function (scope, elem/*, attrs */) {
+          if (useExcanvas) window.G_vmlCanvasManager.initElement(elem[0]);
+
+          // Order of setting "watch" matter
+          scope.$watch('chartData', watchData, true);
+          scope.$watch('chartSeries', watchOther, true);
+          scope.$watch('chartLabels', watchOther, true);
+          scope.$watch('chartOptions', watchOther, true);
+          scope.$watch('chartColors', watchOther, true);
+          scope.$watch('chartDatasetOverride', watchOther, true);
+          scope.$watch('chartType', watchType, false);
+
+          scope.$on('$destroy', function () {
+            destroyChart(scope);
+          });
+
+          scope.$on('$resize', function () {
+            if (scope.chart) scope.chart.resize();
+          });
+
+          function watchData (newVal, oldVal) {
+            if (! newVal || ! newVal.length || (Array.isArray(newVal[0]) && ! newVal[0].length)) {
+              destroyChart(scope);
+              return;
+            }
+            var chartType = type || scope.chartType;
+            if (! chartType) return;
+
+            if (scope.chart && canUpdateChart(newVal, oldVal))
+              return updateChart(newVal, scope);
+
+            createChart(chartType, scope, elem);
+          }
+
+          function watchOther (newVal, oldVal) {
+            if (isEmpty(newVal)) return;
+            if (angular.equals(newVal, oldVal)) return;
+            var chartType = type || scope.chartType;
+            if (! chartType) return;
+
+            // chart.update() doesn't work for series and labels
+            // so we have to re-create the chart entirely
+            createChart(chartType, scope, elem);
+          }
+
+          function watchType (newVal, oldVal) {
+            if (isEmpty(newVal)) return;
+            if (angular.equals(newVal, oldVal)) return;
+            createChart(newVal, scope, elem);
+          }
+        }
+      };
+    };
+
+    function createChart (type, scope, elem) {
+      var options = getChartOptions(type, scope);
+      if (! hasData(scope) || ! canDisplay(type, scope, elem, options)) return;
+
+      var cvs = elem[0];
+      var ctx = cvs.getContext('2d');
+
+      scope.chartGetColor = getChartColorFn(scope);
+      var data = getChartData(type, scope);
+
+      // Destroy old chart if it exists to avoid ghost charts issue
+      // https://github.com/jtblin/angular-chart.js/issues/187
+      destroyChart(scope);
+
+      scope.chart = new ChartJs.Chart(ctx, {
+        type: type,
+        data: data,
+        options: options
+      });
+      scope.$emit('chart-create', scope.chart);
+      bindEvents(cvs, scope);
+    }
+
+    function canUpdateChart (newVal, oldVal) {
+      if (newVal && oldVal && newVal.length && oldVal.length) {
+        return Array.isArray(newVal[0]) ?
+        newVal.length === oldVal.length && newVal.every(function (element, index) {
+          return element.length === oldVal[index].length; }) :
+          oldVal.reduce(sum, 0) > 0 ? newVal.length === oldVal.length : false;
+      }
+      return false;
+    }
+
+    function sum (carry, val) {
+      return carry + val;
+    }
+
+    function getEventHandler (scope, action, triggerOnlyOnChange) {
+      var lastState = null;
+      return function (evt) {
+        var atEvent = scope.chart.getElementsAtEvent || scope.chart.getPointsAtEvent;
+        if (atEvent) {
+          var activePoints = atEvent.call(scope.chart, evt);
+          if (triggerOnlyOnChange === false || angular.equals(lastState, activePoints) === false) {
+            lastState = activePoints;
+            scope[action](activePoints, evt);
+          }
+        }
+      };
+    }
+
+    function getColors (type, scope) {
+      var colors = angular.copy(scope.chartColors ||
+        ChartJs.getOptions(type).chartColors ||
+        Chart.defaults.global.colors
+      );
+      var notEnoughColors = colors.length < scope.chartData.length;
+      while (colors.length < scope.chartData.length) {
+        colors.push(scope.chartGetColor());
+      }
+      // mutate colors in this case as we don't want
+      // the colors to change on each refresh
+      if (notEnoughColors) scope.chartColors = colors;
+      return colors.map(convertColor);
+    }
+
+    function convertColor (color) {
+      if (typeof color === 'object' && color !== null) return color;
+      if (typeof color === 'string' && color[0] === '#') return getColor(hexToRgb(color.substr(1)));
+      return getRandomColor();
+    }
+
+    function getRandomColor () {
+      var color = [getRandomInt(0, 255), getRandomInt(0, 255), getRandomInt(0, 255)];
+      return getColor(color);
+    }
+
+    function getColor (color) {
+      return {
+        backgroundColor: rgba(color, 0.2),
+        pointBackgroundColor: rgba(color, 1),
+        pointHoverBackgroundColor: rgba(color, 0.8),
+        borderColor: rgba(color, 1),
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: rgba(color, 1)
+      };
+    }
+
+    function getRandomInt (min, max) {
+      return Math.floor(Math.random() * (max - min + 1)) + min;
+    }
+
+    function rgba (color, alpha) {
+      // rgba not supported by IE8
+      return useExcanvas ? 'rgb(' + color.join(',') + ')' : 'rgba(' + color.concat(alpha).join(',') + ')';
+    }
+
+    // Credit: http://stackoverflow.com/a/11508164/1190235
+    function hexToRgb (hex) {
+      var bigint = parseInt(hex, 16),
+        r = (bigint >> 16) & 255,
+        g = (bigint >> 8) & 255,
+        b = bigint & 255;
+
+      return [r, g, b];
+    }
+
+    function hasData (scope) {
+      return scope.chartData && scope.chartData.length;
+    }
+
+    function getChartColorFn (scope) {
+      return typeof scope.chartGetColor === 'function' ? scope.chartGetColor : getRandomColor;
+    }
+
+    function getChartData (type, scope) {
+      var colors = getColors(type, scope);
+      return Array.isArray(scope.chartData[0]) ?
+        getDataSets(scope.chartLabels, scope.chartData, scope.chartSeries || [], colors, scope.chartDatasetOverride) :
+        getData(scope.chartLabels, scope.chartData, colors, scope.chartDatasetOverride);
+    }
+
+    function getDataSets (labels, data, series, colors, datasetOverride) {
+      return {
+        labels: labels,
+        datasets: data.map(function (item, i) {
+          var dataset = angular.extend({}, colors[i], {
+            label: series[i],
+            data: item
+          });
+          if (datasetOverride && datasetOverride.length >= i) {
+            angular.merge(dataset, datasetOverride[i]);
+          }
+          return dataset;
+        })
+      };
+    }
+
+    function getData (labels, data, colors, datasetOverride) {
+      var dataset = {
+        labels: labels,
+        datasets: [{
+          data: data,
+          backgroundColor: colors.map(function (color) {
+            return color.pointBackgroundColor;
+          }),
+          hoverBackgroundColor: colors.map(function (color) {
+            return color.backgroundColor;
+          })
+        }]
+      };
+      if (datasetOverride) {
+        angular.merge(dataset.datasets[0], datasetOverride);
+      }
+      return dataset;
+    }
+
+    function getChartOptions (type, scope) {
+      return angular.extend({}, ChartJs.getOptions(type), scope.chartOptions);
+    }
+
+    function bindEvents (cvs, scope) {
+      cvs.onclick = scope.chartClick ? getEventHandler(scope, 'chartClick', false) : angular.noop;
+      cvs.onmousemove = scope.chartHover ? getEventHandler(scope, 'chartHover', true) : angular.noop;
+    }
+
+    function updateChart (values, scope) {
+      if (Array.isArray(scope.chartData[0])) {
+        scope.chart.data.datasets.forEach(function (dataset, i) {
+          dataset.data = values[i];
+        });
+      } else {
+        scope.chart.data.datasets[0].data = values;
+      }
+
+      scope.chart.update();
+      scope.$emit('chart-update', scope.chart);
+    }
+
+    function isEmpty (value) {
+      return ! value ||
+        (Array.isArray(value) && ! value.length) ||
+        (typeof value === 'object' && ! Object.keys(value).length);
+    }
+
+    function canDisplay (type, scope, elem, options) {
+      // TODO: check parent?
+      if (options.responsive && elem[0].clientHeight === 0) {
+        $timeout(function () {
+          createChart(type, scope, elem);
+        }, 50, false);
+        return false;
+      }
+      return true;
+    }
+
+    function destroyChart(scope) {
+      if(! scope.chart) return;
+      scope.chart.destroy();
+      scope.$emit('chart-destroy', scope.chart);
+    }
+  }
+}));

www/lib/angular-chart.js/bower.json

@@ -0,0 +1,51 @@
+{
+  "name": "angular-chart.js",
+  "version": "1.0.2",
+  "main": [
+    "./dist/angular-chart.js"
+  ],
+  "authors": [
+    "Jerome Touffe-Blin <jtblin@gmail.com>"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/jtblin/angular-chart.js.git"
+  },
+  "description": "An angular.js wrapper for Chart.js - reactive, responsive, beautiful charts.",
+  "moduleType": [
+    "globals"
+  ],
+  "keywords": [
+    "angular",
+    "angular.js",
+    "chartjs",
+    "chart",
+    "reactive",
+    "responsive",
+    "graph",
+    "bar",
+    "line",
+    "area",
+    "donut"
+  ],
+  "license": "BSD",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "examples",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "angular": "1.x",
+    "chart.js": "npm:chart.js#2.x"
+  },
+  "overrides" : {
+    "chart.js": {
+      "main": [
+        "dist/Chart.bundle.min.js"
+      ]
+    }
+  }
+}

www/lib/angular-chart.js/dist/angular-chart.js

@@ -0,0 +1,374 @@
+/*!
+ * angular-chart.js - An angular.js wrapper for Chart.js
+ * http://jtblin.github.io/angular-chart.js/
+ * Version: 1.0.2
+ *
+ * Copyright 2016 Jerome Touffe-Blin
+ * Released under the BSD-2-Clause license
+ * https://github.com/jtblin/angular-chart.js/blob/master/LICENSE
+ */
+(function (factory) {
+  'use strict';
+  if (typeof exports === 'object') {
+    // Node/CommonJS
+    module.exports = factory(
+      typeof angular !== 'undefined' ? angular : require('angular'),
+      typeof Chart !== 'undefined' ? Chart : require('chart.js'));
+  }  else if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define(['angular', 'chart'], factory);
+  } else {
+    // Browser globals
+    if (typeof angular === 'undefined' || typeof Chart === 'undefined')
+      throw new Error('Chart.js library needs to be included, see http://jtblin.github.io/angular-chart.js/');
+    factory(angular, Chart);
+  }
+}(function (angular, Chart) {
+  'use strict';
+
+  Chart.defaults.global.multiTooltipTemplate = '<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value %>';
+  Chart.defaults.global.tooltips.mode = 'label';
+  Chart.defaults.global.elements.line.borderWidth = 2;
+  Chart.defaults.global.elements.rectangle.borderWidth = 2;
+  Chart.defaults.global.legend.display = false;
+  Chart.defaults.global.colors = [
+    '#97BBCD', // blue
+    '#DCDCDC', // light grey
+    '#F7464A', // red
+    '#46BFBD', // green
+    '#FDB45C', // yellow
+    '#949FB1', // grey
+    '#4D5360'  // dark grey
+  ];
+
+  var useExcanvas = typeof window.G_vmlCanvasManager === 'object' &&
+    window.G_vmlCanvasManager !== null &&
+    typeof window.G_vmlCanvasManager.initElement === 'function';
+
+  if (useExcanvas) Chart.defaults.global.animation = false;
+
+  return angular.module('chart.js', [])
+    .provider('ChartJs', ChartJsProvider)
+    .factory('ChartJsFactory', ['ChartJs', '$timeout', ChartJsFactory])
+    .directive('chartBase', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory(); }])
+    .directive('chartLine', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('line'); }])
+    .directive('chartBar', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('bar'); }])
+    .directive('chartHorizontalBar', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('horizontalBar'); }])
+    .directive('chartRadar', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('radar'); }])
+    .directive('chartDoughnut', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('doughnut'); }])
+    .directive('chartPie', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('pie'); }])
+    .directive('chartPolarArea', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('polarArea'); }])
+    .directive('chartBubble', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('bubble'); }])
+    .name;
+
+  /**
+   * Wrapper for chart.js
+   * Allows configuring chart js using the provider
+   *
+   * angular.module('myModule', ['chart.js']).config(function(ChartJsProvider) {
+   *   ChartJsProvider.setOptions({ responsive: false });
+   *   ChartJsProvider.setOptions('Line', { responsive: true });
+   * })))
+   */
+  function ChartJsProvider () {
+    var options = { responsive: true };
+    var ChartJs = {
+      Chart: Chart,
+      getOptions: function (type) {
+        var typeOptions = type && options[type] || {};
+        return angular.extend({}, options, typeOptions);
+      }
+    };
+
+    /**
+     * Allow to set global options during configuration
+     */
+    this.setOptions = function (type, customOptions) {
+      // If no type was specified set option for the global object
+      if (! customOptions) {
+        customOptions = type;
+        options = angular.extend(options, customOptions);
+        return;
+      }
+      // Set options for the specific chart
+      options[type] = angular.extend(options[type] || {}, customOptions);
+    };
+
+    this.$get = function () {
+      return ChartJs;
+    };
+  }
+
+  function ChartJsFactory (ChartJs, $timeout) {
+    return function chart (type) {
+      return {
+        restrict: 'CA',
+        scope: {
+          chartGetColor: '=?',
+          chartType: '=',
+          chartData: '=?',
+          chartLabels: '=?',
+          chartOptions: '=?',
+          chartSeries: '=?',
+          chartColors: '=?',
+          chartClick: '=?',
+          chartHover: '=?',
+          chartDatasetOverride: '=?'
+        },
+        link: function (scope, elem/*, attrs */) {
+          if (useExcanvas) window.G_vmlCanvasManager.initElement(elem[0]);
+
+          // Order of setting "watch" matter
+          scope.$watch('chartData', watchData, true);
+          scope.$watch('chartSeries', watchOther, true);
+          scope.$watch('chartLabels', watchOther, true);
+          scope.$watch('chartOptions', watchOther, true);
+          scope.$watch('chartColors', watchOther, true);
+          scope.$watch('chartDatasetOverride', watchOther, true);
+          scope.$watch('chartType', watchType, false);
+
+          scope.$on('$destroy', function () {
+            destroyChart(scope);
+          });
+
+          scope.$on('$resize', function () {
+            if (scope.chart) scope.chart.resize();
+          });
+
+          function watchData (newVal, oldVal) {
+            if (! newVal || ! newVal.length || (Array.isArray(newVal[0]) && ! newVal[0].length)) {
+              destroyChart(scope);
+              return;
+            }
+            var chartType = type || scope.chartType;
+            if (! chartType) return;
+
+            if (scope.chart && canUpdateChart(newVal, oldVal))
+              return updateChart(newVal, scope);
+
+            createChart(chartType, scope, elem);
+          }
+
+          function watchOther (newVal, oldVal) {
+            if (isEmpty(newVal)) return;
+            if (angular.equals(newVal, oldVal)) return;
+            var chartType = type || scope.chartType;
+            if (! chartType) return;
+
+            // chart.update() doesn't work for series and labels
+            // so we have to re-create the chart entirely
+            createChart(chartType, scope, elem);
+          }
+
+          function watchType (newVal, oldVal) {
+            if (isEmpty(newVal)) return;
+            if (angular.equals(newVal, oldVal)) return;
+            createChart(newVal, scope, elem);
+          }
+        }
+      };
+    };
+
+    function createChart (type, scope, elem) {
+      var options = getChartOptions(type, scope);
+      if (! hasData(scope) || ! canDisplay(type, scope, elem, options)) return;
+
+      var cvs = elem[0];
+      var ctx = cvs.getContext('2d');
+
+      scope.chartGetColor = getChartColorFn(scope);
+      var data = getChartData(type, scope);
+
+      // Destroy old chart if it exists to avoid ghost charts issue
+      // https://github.com/jtblin/angular-chart.js/issues/187
+      destroyChart(scope);
+
+      scope.chart = new ChartJs.Chart(ctx, {
+        type: type,
+        data: data,
+        options: options
+      });
+      scope.$emit('chart-create', scope.chart);
+      bindEvents(cvs, scope);
+    }
+
+    function canUpdateChart (newVal, oldVal) {
+      if (newVal && oldVal && newVal.length && oldVal.length) {
+        return Array.isArray(newVal[0]) ?
+        newVal.length === oldVal.length && newVal.every(function (element, index) {
+          return element.length === oldVal[index].length; }) :
+          oldVal.reduce(sum, 0) > 0 ? newVal.length === oldVal.length : false;
+      }
+      return false;
+    }
+
+    function sum (carry, val) {
+      return carry + val;
+    }
+
+    function getEventHandler (scope, action, triggerOnlyOnChange) {
+      var lastState = null;
+      return function (evt) {
+        var atEvent = scope.chart.getElementsAtEvent || scope.chart.getPointsAtEvent;
+        if (atEvent) {
+          var activePoints = atEvent.call(scope.chart, evt);
+          if (triggerOnlyOnChange === false || angular.equals(lastState, activePoints) === false) {
+            lastState = activePoints;
+            scope[action](activePoints, evt);
+          }
+        }
+      };
+    }
+
+    function getColors (type, scope) {
+      var colors = angular.copy(scope.chartColors ||
+        ChartJs.getOptions(type).chartColors ||
+        Chart.defaults.global.colors
+      );
+      var notEnoughColors = colors.length < scope.chartData.length;
+      while (colors.length < scope.chartData.length) {
+        colors.push(scope.chartGetColor());
+      }
+      // mutate colors in this case as we don't want
+      // the colors to change on each refresh
+      if (notEnoughColors) scope.chartColors = colors;
+      return colors.map(convertColor);
+    }
+
+    function convertColor (color) {
+      if (typeof color === 'object' && color !== null) return color;
+      if (typeof color === 'string' && color[0] === '#') return getColor(hexToRgb(color.substr(1)));
+      return getRandomColor();
+    }
+
+    function getRandomColor () {
+      var color = [getRandomInt(0, 255), getRandomInt(0, 255), getRandomInt(0, 255)];
+      return getColor(color);
+    }
+
+    function getColor (color) {
+      return {
+        backgroundColor: rgba(color, 0.2),
+        pointBackgroundColor: rgba(color, 1),
+        pointHoverBackgroundColor: rgba(color, 0.8),
+        borderColor: rgba(color, 1),
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: rgba(color, 1)
+      };
+    }
+
+    function getRandomInt (min, max) {
+      return Math.floor(Math.random() * (max - min + 1)) + min;
+    }
+
+    function rgba (color, alpha) {
+      // rgba not supported by IE8
+      return useExcanvas ? 'rgb(' + color.join(',') + ')' : 'rgba(' + color.concat(alpha).join(',') + ')';
+    }
+
+    // Credit: http://stackoverflow.com/a/11508164/1190235
+    function hexToRgb (hex) {
+      var bigint = parseInt(hex, 16),
+        r = (bigint >> 16) & 255,
+        g = (bigint >> 8) & 255,
+        b = bigint & 255;
+
+      return [r, g, b];
+    }
+
+    function hasData (scope) {
+      return scope.chartData && scope.chartData.length;
+    }
+
+    function getChartColorFn (scope) {
+      return typeof scope.chartGetColor === 'function' ? scope.chartGetColor : getRandomColor;
+    }
+
+    function getChartData (type, scope) {
+      var colors = getColors(type, scope);
+      return Array.isArray(scope.chartData[0]) ?
+        getDataSets(scope.chartLabels, scope.chartData, scope.chartSeries || [], colors, scope.chartDatasetOverride) :
+        getData(scope.chartLabels, scope.chartData, colors, scope.chartDatasetOverride);
+    }
+
+    function getDataSets (labels, data, series, colors, datasetOverride) {
+      return {
+        labels: labels,
+        datasets: data.map(function (item, i) {
+          var dataset = angular.extend({}, colors[i], {
+            label: series[i],
+            data: item
+          });
+          if (datasetOverride && datasetOverride.length >= i) {
+            angular.merge(dataset, datasetOverride[i]);
+          }
+          return dataset;
+        })
+      };
+    }
+
+    function getData (labels, data, colors, datasetOverride) {
+      var dataset = {
+        labels: labels,
+        datasets: [{
+          data: data,
+          backgroundColor: colors.map(function (color) {
+            return color.pointBackgroundColor;
+          }),
+          hoverBackgroundColor: colors.map(function (color) {
+            return color.backgroundColor;
+          })
+        }]
+      };
+      if (datasetOverride) {
+        angular.merge(dataset.datasets[0], datasetOverride);
+      }
+      return dataset;
+    }
+
+    function getChartOptions (type, scope) {
+      return angular.extend({}, ChartJs.getOptions(type), scope.chartOptions);
+    }
+
+    function bindEvents (cvs, scope) {
+      cvs.onclick = scope.chartClick ? getEventHandler(scope, 'chartClick', false) : angular.noop;
+      cvs.onmousemove = scope.chartHover ? getEventHandler(scope, 'chartHover', true) : angular.noop;
+    }
+
+    function updateChart (values, scope) {
+      if (Array.isArray(scope.chartData[0])) {
+        scope.chart.data.datasets.forEach(function (dataset, i) {
+          dataset.data = values[i];
+        });
+      } else {
+        scope.chart.data.datasets[0].data = values;
+      }
+
+      scope.chart.update();
+      scope.$emit('chart-update', scope.chart);
+    }
+
+    function isEmpty (value) {
+      return ! value ||
+        (Array.isArray(value) && ! value.length) ||
+        (typeof value === 'object' && ! Object.keys(value).length);
+    }
+
+    function canDisplay (type, scope, elem, options) {
+      // TODO: check parent?
+      if (options.responsive && elem[0].clientHeight === 0) {
+        $timeout(function () {
+          createChart(type, scope, elem);
+        }, 50, false);
+        return false;
+      }
+      return true;
+    }
+
+    function destroyChart(scope) {
+      if(! scope.chart) return;
+      scope.chart.destroy();
+      scope.$emit('chart-destroy', scope.chart);
+    }
+  }
+}));

www/lib/angular-chart.js/examples/amd.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>AMD</title>
+  <link href="bootstrap.css" rel="stylesheet">
+</head>
+<body ng-app="examples">
+<br/>
+<div class="container">
+  <div class="row" ng-controller="RequireCtrl">
+    <div class="col-lg-6 col-sm-12">
+      <div class="panel panel-default">
+        <div class="panel-heading">AMD require.js</div>
+        <div class="panel-body">
+          <canvas class="chart chart-line" chart-data="data" chart-series="series" chart-labels="labels"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script data-main="amd" src="../node_modules/requirejs/require.js"></script>
+</body>
+</html>

www/lib/angular-chart.js/examples/amd.js

@@ -0,0 +1,32 @@
+(function () {
+  'use strict';
+
+  require.config({
+    paths: {
+      angular: '../node_modules/angular/angular.min',
+      chart: '../node_modules/chart.js/dist/Chart.min',
+      'angular-chart': '../angular-chart'
+    },
+    shim: {
+      angular: {
+        exports: 'angular'
+      },
+      'chart.js': {
+        deps: ['angular', 'chart']
+      }
+    }
+  });
+
+  define(['angular', 'angular-chart'], function (angular/*, angularChart*/) {
+    var app = angular.module('examples', ['chart.js']);
+    app.controller('RequireCtrl', ['$scope', function ($scope) {
+      $scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+      $scope.series = ['Series A', 'Series B'];
+      $scope.data = [
+        [65, 59, 80, 81, 56, 55, 40],
+        [28, 48, 40, 19, 86, 27, 90]
+      ];
+    }]);
+  });
+
+})();

www/lib/angular-chart.js/examples/app.css

@@ -0,0 +1,80 @@
+body { padding-top: 50px; }
+
+.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }
+
+#hero-bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  padding-right: 0;
+}
+
+.container-fluid {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.aspect-ratio {
+  width: 100%;
+  padding-bottom: 25%;
+  position: relative;
+}
+
+.header {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  top: 50%;
+  font-size: larger;
+  z-index: 500;
+}
+
+.panel-heading {
+  font-weight: bold;
+}
+
+.code .nav-tabs>li.active>a, .code .nav-tabs>li.active>a:hover, .code .nav-tabs>li.active>a:focus {
+  background-color: #f8f8f8;
+  border: 1px solid #ccc;
+  border-bottom-color: transparent;
+}
+
+.code pre, .code code {
+  background-color: #f8f8f8;
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.settings > a, .settings {
+  background-color: white ! important;
+}
+
+.nav-tabs > li > a {
+  border-bottom: 1px solid #ccc;
+  margin-right: 0;
+}
+
+.settings > a.active {
+  border: 1px solid transparent;
+}
+
+div.settings {
+  border: 1px solid #ccc;
+  border-top: 0;
+  padding: 9.5px;
+  margin: 0 0 10px
+}
+
+div.settings > code {
+  border-top: 1px solid #eaeaea;
+}
+
+.footer {
+  text-align: center;
+  padding: 30px 0;
+  margin-top: 70px;
+  border-top: 1px solid #e5e5e5;
+  background-color: #f5f5f5;
+}

www/lib/angular-chart.js/examples/app.js

@@ -0,0 +1,311 @@
+(function () {
+  'use strict';
+
+  var app = angular.module('examples', ['chart.js', 'ui.bootstrap']);
+
+  app.config(function (ChartJsProvider) {
+    // Configure all charts
+    ChartJsProvider.setOptions({
+      colors: ['#97BBCD', '#DCDCDC', '#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360']
+    });
+    // Configure all doughnut charts
+    ChartJsProvider.setOptions('doughnut', {
+      cutoutPercentage: 60
+    });
+    ChartJsProvider.setOptions('bubble', {
+      tooltips: { enabled: false }
+    });
+  });
+
+  app.controller('MenuCtrl', ['$scope', function ($scope) {
+    $scope.isCollapsed = true;
+    $scope.charts = ['Line', 'Bar', 'Doughnut', 'Pie', 'Polar Area', 'Radar', 'Horizontal Bar', 'Bubble', 'Base'];
+  }]);
+
+  app.controller('LineCtrl', ['$scope', function ($scope) {
+    $scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+    $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);
+    };
+    $scope.onHover = function (points) {
+      if (points.length > 0) {
+        console.log('Point', points[0].value);
+      } else {
+        console.log('No point');
+      }
+    };
+    $scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
+
+    $scope.options = {
+      scales: {
+        yAxes: [
+          {
+            id: 'y-axis-1',
+            type: 'linear',
+            display: true,
+            position: 'left'
+          },
+          {
+            id: 'y-axis-2',
+            type: 'linear',
+            display: true,
+            position: 'right'
+          }
+        ]
+      }
+    };
+  }]);
+
+  app.controller('BarCtrl', ['$scope', function ($scope) {
+    $scope.options = { legend: { display: true } };
+    $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
+    $scope.series = ['Series A', 'Series B'];
+    $scope.data = [
+      [65, 59, 80, 81, 56, 55, 40],
+      [28, 48, 40, 19, 86, 27, 90]
+    ];
+  }]);
+
+  app.controller('DoughnutCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
+    $scope.labels = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
+    $scope.data = [0, 0, 0];
+
+    $timeout(function () {
+      $scope.data = [350, 450, 100];
+    }, 500);
+  }]);
+
+  app.controller('PieCtrl', ['$scope', function ($scope) {
+    $scope.labels = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
+    $scope.data = [300, 500, 100];
+    $scope.options = { legend: { display: false } };
+  }]);
+
+  app.controller('PolarAreaCtrl', ['$scope', function ($scope) {
+    $scope.labels = ['Download Sales', 'In-Store Sales', 'Mail Sales', 'Telesales', 'Corporate Sales'];
+    $scope.data = [300, 500, 100, 40, 120];
+    $scope.options = { legend: { display: false } };
+  }]);
+
+  app.controller('BaseCtrl', ['$scope', function ($scope) {
+    $scope.labels = ['Download Sales', 'Store Sales', 'Mail Sales', 'Telesales', 'Corporate Sales'];
+    $scope.data = [300, 500, 100, 40, 120];
+    $scope.type = 'polarArea';
+
+    $scope.toggle = function () {
+      $scope.type = $scope.type === 'polarArea' ?  'pie' : 'polarArea';
+    };
+  }]);
+
+  app.controller('RadarCtrl', ['$scope', function ($scope) {
+    $scope.labels = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'];
+    $scope.options = { legend: { display: false } };
+
+    $scope.data = [
+      [65, 59, 90, 81, 56, 55, 40],
+      [28, 48, 40, 19, 96, 27, 100]
+    ];
+
+    $scope.onClick = function (points, evt) {
+      console.log(points, evt);
+    };
+  }]);
+
+  app.controller('StackedBarCtrl', ['$scope', function ($scope) {
+    $scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+    $scope.type = 'StackedBar';
+    $scope.series = ['2015', '2016'];
+    $scope.options = {
+      scales: {
+        xAxes: [{
+          stacked: true,
+        }],
+        yAxes: [{
+          stacked: true
+        }]
+      }
+    };
+
+    $scope.data = [
+      [65, 59, 90, 81, 56, 55, 40],
+      [28, 48, 40, 19, 96, 27, 100]
+    ];
+  }]);
+
+  app.controller('TabsCtrl', ['$scope', function ($scope) {
+    $scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+    $scope.active = true;
+    $scope.data = [
+      [65, 59, 90, 81, 56, 55, 40],
+      [28, 48, 40, 19, 96, 27, 100]
+    ];
+  }]);
+
+  app.controller('MixedChartCtrl', ['$scope', function ($scope) {
+    $scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];
+
+    $scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+    $scope.data = [
+      [65, -59, 80, 81, -56, 55, -40],
+      [28, 48, -40, 19, 86, 27, 90]
+    ];
+    $scope.datasetOverride = [
+      {
+        label: 'Bar chart',
+        borderWidth: 1,
+        type: 'bar'
+      },
+      {
+        label: 'Line chart',
+        borderWidth: 3,
+        hoverBackgroundColor: 'rgba(255,99,132,0.4)',
+        hoverBorderColor: 'rgba(255,99,132,1)',
+        type: 'line'
+      }
+    ];
+  }]);
+
+  app.controller('DataTablesCtrl', ['$scope', function ($scope) {
+    $scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+    $scope.data = [
+      [65, 59, 80, 81, 56, 55, 40],
+      [28, 48, 40, 19, 86, 27, 90]
+    ];
+    $scope.colors = [
+      { // grey
+        backgroundColor: 'rgba(148,159,177,0.2)',
+        pointBackgroundColor: 'rgba(148,159,177,1)',
+        pointHoverBackgroundColor: 'rgba(148,159,177,1)',
+        borderColor: 'rgba(148,159,177,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+      },
+      { // dark grey
+        backgroundColor: 'rgba(77,83,96,0.2)',
+        pointBackgroundColor: 'rgba(77,83,96,1)',
+        pointHoverBackgroundColor: 'rgba(77,83,96,1)',
+        borderColor: 'rgba(77,83,96,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(77,83,96,0.8)'
+      }
+    ];
+    $scope.options = { legend: { display: false } };
+    $scope.randomize = function () {
+      $scope.data = $scope.data.map(function (data) {
+        return data.map(function (y) {
+          y = y + Math.random() * 10 - 5;
+          return parseInt(y < 0 ? 0 : y > 100 ? 100 : y);
+        });
+      });
+    };
+  }]);
+
+  app.controller('BubbleCtrl', ['$scope', '$interval', function ($scope, $interval) {
+    $scope.options = {
+      scales: {
+        xAxes: [{
+          display: false,
+          ticks: {
+            max: 125,
+            min: -125,
+            stepSize: 10
+          }
+        }],
+        yAxes: [{
+          display: false,
+          ticks: {
+            max: 125,
+            min: -125,
+            stepSize: 10
+          }
+        }]
+      }
+    };
+
+    createChart();
+    $interval(createChart, 2000);
+
+    function createChart () {
+      $scope.data = [];
+      for (var i = 0; i < 50; i++) {
+        $scope.data.push([{
+          x: randomScalingFactor(),
+          y: randomScalingFactor(),
+          r: randomRadius()
+        }]);
+      }
+    }
+
+    function randomScalingFactor () {
+      return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
+    }
+
+    function randomRadius () {
+      return Math.abs(randomScalingFactor()) / 4;
+    }
+  }]);
+
+  app.controller('TicksCtrl', ['$scope', '$interval', function ($scope, $interval) {
+    var maximum = document.getElementById('container').clientWidth / 2 || 300;
+    $scope.data = [[]];
+    $scope.labels = [];
+    $scope.options = {
+      animation: {
+        duration: 0
+      },
+      elements: {
+        line: {
+          borderWidth: 0.5
+        },
+        point: {
+          radius: 0
+        }
+      },
+      legend: {
+        display: false
+      },
+      scales: {
+        xAxes: [{
+          display: false
+        }],
+        yAxes: [{
+          display: false
+        }],
+        gridLines: {
+          display: false
+        }
+      },
+      tooltips: {
+        enabled: false
+      }
+    };
+
+    // Update the dataset at 25FPS for a smoothly-animating chart
+    $interval(function () {
+      getLiveChartData();
+    }, 40);
+
+    function getLiveChartData () {
+      if ($scope.data[0].length) {
+        $scope.labels = $scope.labels.slice(1);
+        $scope.data[0] = $scope.data[0].slice(1);
+      }
+
+      while ($scope.data[0].length < maximum) {
+        $scope.labels.push('');
+        $scope.data[0].push(getRandomValue($scope.data[0]));
+      }
+    }
+  }]);
+
+  function getRandomValue (data) {
+    var l = data.length, previous = l ? data[l - 1] : 50;
+    var y = previous + Math.random() * 10 - 5;
+    return y < 0 ? 0 : y > 100 ? 100 : y;
+  }
+})();

www/lib/angular-chart.js/examples/bubble.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>Bubble chart</title>
+  <link href="bootstrap.css" rel="stylesheet">
+</head>
+<body ng-app="app">
+<br/>
+<div id="container" class="container">
+  <div class="row" ng-controller="BubbleCtrl">
+    <div class="col-lg-6 col-sm-12">
+      <div class="panel panel-default">
+        <div class="panel-heading">Bubble chart</div>
+        <div class="panel-body">
+          <canvas class="chart chart-bubble" chart-data="data"
+                  chart-colors="colors" chart-options="options"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="../node_modules/angular/angular.min.js"></script>
+<script src="../node_modules/chart.js/dist/Chart.min.js"></script>
+<script src="../angular-chart.js"></script>
+<script src="bubble.js"></script>
+</body>
+</html>

www/lib/angular-chart.js/examples/bubble.js

@@ -0,0 +1,55 @@
+angular.module('app', ['chart.js'])
+  .config(['ChartJsProvider', function (ChartJsProvider) {
+    'use strict';
+    ChartJsProvider.setOptions({
+      tooltips: { enabled: false }
+    });
+  }])
+  .controller('BubbleCtrl', ['$scope', '$interval', function ($scope, $interval) {
+    'use strict';
+
+    $scope.options = {
+      scales: {
+        xAxes: [{
+          display: false,
+          ticks: {
+            max: 125,
+            min: -125,
+            stepSize: 10
+          }
+        }],
+        yAxes: [{
+          display: false,
+          ticks: {
+            max: 125,
+            min: -125,
+            stepSize: 10
+          }
+        }]
+      }
+    };
+
+    createChart();
+    $interval(createChart, 2000);
+
+    function createChart () {
+      $scope.series = [];
+      $scope.data = [];
+      for (var i = 0; i < 50; i++) {
+        $scope.series.push(`Series ${i}`);
+        $scope.data.push([{
+          x: randomScalingFactor(),
+          y: randomScalingFactor(),
+          r: randomRadius()
+        }]);
+      }
+    }
+
+    function randomScalingFactor () {
+      return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
+    }
+
+    function randomRadius () {
+      return Math.abs(randomScalingFactor()) / 4;
+    }
+  }]);

www/lib/angular-chart.js/examples/charts.html

@@ -0,0 +1,701 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>Charts</title>
+  <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../node_modules/Rainbow/themes/github.css">
+  <link href="bootstrap.css" rel="stylesheet">
+  <link href="app.css" rel="stylesheet">
+  <style>
+    .chart-legend {
+      list-style-type: none;
+      margin-top: 5px;
+      text-align: center;
+    /* NOTE: Browsers automatically add 40px of padding-left to all lists, so we should offset that, otherwise the legend is off-center */
+      -webkit-padding-start: 0;
+    /* Webkit */
+      -moz-padding-start: 0;
+    /* Mozilla */
+      padding-left: 0;
+    /* IE (handles all cases, really, but we should also include the vendor-specific properties just to be safe) */
+    }
+    .chart-legend li {
+      display: inline-block;
+      white-space: nowrap;
+      position: relative;
+      margin-bottom: 4px;
+      border-radius: 5px;
+      padding: 2px 8px 2px 28px;
+      font-size: smaller;
+      cursor: default;
+    }
+    .chart-legend li span {
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 20px;
+      height: 20px;
+      border-radius: 5px;
+    }
+  </style>
+</head>
+<body ng-app="examples" id="top">
+  <div class="navbar navbar-default navbar-fixed-top">
+    <div class="container" ng-controller="MenuCtrl">
+      <div class="navbar-header">
+        <button type="button" class="navbar-toggle" ng-click="isCollapsed = !isCollapsed">
+          <span class="sr-only">Toggle navigation</span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </button>
+        <a class="navbar-brand visible-xs" href="#">Angular Charts</a>
+      </div>
+      <nav class="hidden-xs">
+        <ul class="nav navbar-nav">
+          <li>
+            <a href="#top" role="button" class="navbar-brand">
+              Angular Chart
+            </a>
+          </li>
+          <li class="dropdown">
+            <a role="button" class="dropdown-toggle" aria-haspopup="true" aria-expanded="false">
+              Directives <b class="caret"></b>
+            </a>
+            <ul class="dropdown-menu">
+              <li ng-repeat="chart in charts"><a ng-href="#{{chart | lowercase }}-chart">{{chart}}</a></li>
+            </ul>
+          </li>
+          <li><a href="#getting_started">Getting started</a></li>
+          <li><a href="#reactive">Reactive</a></li>
+          <li><a href="#mixed">Mixed type charts</a></li>
+        </ul>
+      </nav>
+      <nav class="collapse" collapse="isCollapsed" style="height: 0px;">
+        <ul class="nav navbar-nav">
+          <li><a href="#getting_started" ng-click="isCollapsed = !isCollapsed">Getting started</a></li>
+          <li><a href="#directives" ng-click="isCollapsed = !isCollapsed">Directives</a></li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+  <div class="container-fluid">
+    <div class="text-center aspect-ratio" id="container" ng-controller="TicksCtrl">
+      <canvas width='1200' height='300' id="hero-bar" class="chart chart-line" chart-data="data"
+              chart-options="options" chart-labels="labels"></canvas>
+      <div class="header">
+        <h1>
+          Angular Chart
+        </h1>
+
+        <p>Reactive, responsive, beautiful charts for <a href="http://angularjs.org">AngularJS</a> based on <a href="http://www.chartjs.org">Chart.js</a></p>
+
+        <p>
+          <a class="btn btn-default btn-lg" href="https://github.com/jtblin/angular-chart"><i class="icon-github"></i>Code on Github</a>
+          <a class="btn btn-success btn-lg" href="../dist/angular-chart.js.tar.gz" download="angular-chart.js.tar.gz">
+            <i class="fa fa-download"></i> Download <small>(1.0.2)</small>
+          </a>
+        </p>
+      </div>
+    </div>
+  </div>
+  <div class="container">
+    <section id="getting_started">
+      <div class="page-header">
+        <h1>Getting started</h1>
+      </div>
+      <h3>Dependencies</h3>
+      <p>
+        This repository contains a set of <strong>native AngularJS directives</strong> for Chart.js. The <strong>only required dependencies</strong> are:
+      </p>
+      <ul>
+        <li><a href="http://angularjs.org" target="_blank">AngularJS</a> (tested with 1.2.x, 1.3.x, 1.4.x and 1.5.x although it probably works with older versions)</li>
+        <li><a href="http://chartjs.org" target="_blank">Chart.js</a> (requires Chart.js 2.0.x).</li>
+      </ul>
+      <h3>Files to download</h3>
+      <p>
+        The easiest is to download with <strong>npm</strong>:
+        <pre>npm install angular-chart.js --save</pre>
+        Alternatively files can be <a href="https://github.com/jtblin/angular-chart.js">downloaded from Github</a> or via bower.
+        See <a href="https://github.com/jtblin/angular-chart.js">readme</a> for more information.
+      </p>
+      <p>Whichever method you choose the good news is that the overall size is very small:
+        &lt;5kb for all directives (~1kb with gzip compression!)</p>
+      <h3>Installation</h3>
+      <p>You need to include the dependencies in your page:</p>
+      <pre><code>&lt;script src="node_modules/chart.js/Chart.min.js">&lt;/script&gt;
+&lt;script src="node_modules/angular-chart.js/dist/angular-chart.min.js">&lt;/script&gt;</code></pre>
+      <p>As soon as you've got all the files downloaded and included in your page you just need to declare
+        a dependency on the <code>chart.js</code> <a href="http://docs.angularjs.org/guide/module">module</a>:<br>
+      </p><pre><code>angular.module('myModule', ['chart.js']);</code></pre>
+      <p></p>
+      <h3>CSS</h3>
+      <p></p>
+      <h3>Colors</h3>
+      <p>Series have beautiful pre-sets colors (to a maximum of 7 series, after that colors will be randomly generated).
+        They can be overwritten using <code>Chart.defaults.global.colors</code>.</p>
+      <ol class="chart-legend">
+        <li><span style="background-color: rgba(151,187,205,1)"></span>Blue</li>
+        <li><span style="background-color: rgba(220,220,220,1)"></span>Light grey</li>
+        <li><span style="background-color: rgba(247,70,74,1)"></span>Red</li>
+        <li><span style="background-color: rgba(70,191,189,1)"></span>Green</li>
+        <li><span style="background-color: rgba(253,180,92,1)"></span>Yellow</li>
+        <li><span style="background-color: rgba(148,159,177,1)"></span>Grey</li>
+        <li><span style="background-color: rgba(77,83,96,1)"></span>Dark Grey</li>
+      </ol>
+      <p>You can also use the provider : <code>ChartJsProvider</code> in a <code>.config()</code></p>
+      <p><pre><code>(function (ChartJsProvider) {
+  ChartJsProvider.setOptions({ colors : [ '#803690', '#00ADF9', '#DCDCDC', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'] });
+}); </code></pre></p>
+    </section>
+    <section id="directives">
+      <div class="page-header">
+        <h1>Directives</h1>
+      </div>
+      <div class="row">
+        <div class="col-lg-6 col-sm-12" id="line-chart" ng-controller="LineCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Line Chart</div>
+            <div class="panel-body">
+              <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels"
+                      chart-click="onClick" chart-hover="onHover" chart-series="series" chart-options="options"
+                      chart-dataset-override="datasetOverride"></canvas>
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-6 col-sm-12 code">
+          <tabset>
+            <tab heading="Settings" class="settings">
+              <div class="settings">
+                <code>.chart-line</code>
+                <ul>
+                  <li><code>chart-data</code>: series data</li>
+                  <li><code>chart-labels</code>: x axis labels</li>
+                  <li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
+                  <li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
+                  <li><code>chart-click</code> (optional): onclick event handler</li>
+                  <li><code>chart-hover</code> (optional): onmousemove event handler</li>
+                  <li><code>chart-colors</code> (default to global colors): colors for the chart</li>
+                  <li><code>chart-dataset-override</code> (optional): override datasets individually</li>
+                </ul>
+              </div>
+            </tab>
+            <tab heading="Markup">
+            <pre><code data-language="html">&lt;canvas id=&quot;line&quot; class=&quot;chart chart-line&quot; chart-data=&quot;data&quot;
+chart-labels=&quot;labels&quot; chart-series=&quot;series&quot; chart-options=&quot;options&quot;
+chart-dataset-override=&quot;datasetOverride&quot; chart-click=&quot;onClick&quot;
+&lt;/canvas&gt; </code></pre>
+            </tab>
+            <tab heading="Javascript">
+              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("LineCtrl", function ($scope) {
+
+  $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);
+  };
+  $scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
+  $scope.options = {
+    scales: {
+      yAxes: [
+        {
+          id: 'y-axis-1',
+          type: 'linear',
+          display: true,
+          position: 'left'
+        },
+        {
+          id: 'y-axis-2',
+          type: 'linear',
+          display: true,
+          position: 'right'
+        }
+      ]
+    }
+  };
+});
+              </code></pre>
+            </tab>
+          </tabset>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-6 col-sm-12 code">
+          <tabset>
+            <tab heading="Settings" class="settings">
+              <div class="settings">
+                <code>.chart-bar</code>
+                <ul>
+                  <li><code>chart-data</code>: series data</li>
+                  <li><code>chart-labels</code>: x axis labels</li>
+                  <li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
+                  <li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
+                  <li><code>chart-click</code> (optional): onclick event handler</li>
+                  <li><code>chart-hover</code> (optional): onmousemove event handler</li>
+                  <li><code>chart-colors</code> (default to global colors): colors for the chart</li>
+                  <li><code>chart-dataset-override</code> (optional): override datasets individually</li>
+                </ul>
+              </div>
+            </tab>
+            <tab heading="Markup">
+              <pre><code data-language="html">&lt;canvas id=&quot;bar&quot; class=&quot;chart chart-bar&quot;
+  chart-data=&quot;data&quot; chart-labels=&quot;labels&quot;&gt; chart-series=&quot;series&quot;
+&lt;/canvas&gt;</code></pre>
+            </tab>
+            <tab heading="Javascript">
+              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
+  $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
+  $scope.series = ['Series A', 'Series B'];
+
+  $scope.data = [
+    [65, 59, 80, 81, 56, 55, 40],
+    [28, 48, 40, 19, 86, 27, 90]
+  ];
+});
+              </code></pre>
+            </tab>
+          </tabset>
+        </div>
+        <div class="col-lg-6 col-sm-12" id="bar-chart" ng-controller="BarCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Bar Chart</div>
+            <div class="panel-body">
+              <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels"
+                      chart-series="series" chart-options="options"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-6 col-sm-12" id="doughnut-chart" ng-controller="DoughnutCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Doughnut Chart</div>
+            <div class="panel-body">
+              <canvas id="doughnut" class="chart chart-doughnut chart-xs" chart-data="data"
+                      chart-labels="labels"></canvas>
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-6 col-sm-12 code">
+          <tabset>
+            <tab heading="Settings" class="settings">
+              <div class="settings">
+                <code>.chart-doughnut</code>
+                <ul>
+                  <li><code>chart-data</code>: series data</li>
+                  <li><code>chart-labels</code>: series labels</li>
+                  <li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
+                  <li><code>chart-click</code> (optional): onclick event handler</li>
+                  <li><code>chart-hover</code> (optional): onmousemove event handler</li>
+                  <li><code>chart-colors</code> (default to global colors): colors for the chart</li>
+                  <li><code>chart-dataset-override</code> (optional): override datasets individually</li>
+                </ul>
+              </div>
+            </tab>
+            <tab heading="Markup">
+              <pre><code data-language="html">&lt;canvas id=&quot;doughnut&quot; class=&quot;chart chart-doughnut&quot;
+  chart-data=&quot;data&quot; chart-labels=&quot;labels&quot;&gt;
+&lt;/canvas&gt; </code></pre>
+            </tab>
+            <tab heading="Javascript">
+              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("DoughnutCtrl", function ($scope) {
+  $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
+  $scope.data = [300, 500, 100];
+});
+              </code></pre>
+            </tab>
+          </tabset>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-6 col-sm-12 code">
+          <tabset>
+            <tab heading="Settings" class="settings">
+              <div class="settings">
+                <code>.chart-radar</code>
+                <ul>
+                  <li><code>chart-data</code>: series data</li>
+                  <li><code>chart-labels</code>: series labels</li>
+                  <li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
+                  <li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
+                  <li><code>chart-click</code> (optional): onclick event handler</li>
+                  <li><code>chart-hover</code> (optional): onmousemove event handler</li>
+                  <li><code>chart-colors</code> (default to global colors): colors for the chart</li>
+                  <li><code>chart-dataset-override</code> (optional): override datasets individually</li>
+                </ul>
+              </div>
+            </tab>
+            <tab heading="Markup">
+              <pre><code data-language="html">&lt;canvas id=&quot;radar&quot; class=&quot;chart chart-radar&quot;
+  chart-data=&quot;data&quot; chart-options=&quot;options&quot; chart-labels=&quot;labels&quot;&gt;
+&lt;/canvas&gt; </code></pre>
+            </tab>
+            <tab heading="Javascript">
+              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("RadarCtrl", function ($scope) {
+  $scope.labels =["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"];
+
+  $scope.data = [
+    [65, 59, 90, 81, 56, 55, 40],
+    [28, 48, 40, 19, 96, 27, 100]
+  ];
+});
+              </code></pre>
+            </tab>
+          </tabset>
+        </div>
+        <div class="col-lg-6 col-sm-12" id="radar-chart" ng-controller="RadarCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Radar Chart</div>
+            <div class="panel-body">
+              <canvas id="area" class="chart chart-radar" chart-data="data"
+                      chart-labels="labels" chart-options="options" chart-click="onClick"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-6 col-sm-12" id="pie-chart" ng-controller="PieCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Pie Chart</div>
+            <div class="panel-body">
+              <canvas id="pie" class="chart chart-pie chart-xs" chart-data="data"
+                      chart-labels="labels" chart-options="options"></canvas>
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-6 col-sm-12 code">
+          <tabset>
+            <tab heading="Settings" class="settings">
+              <div class="settings">
+                <code>.chart-pie</code>
+                <ul>
+                  <li><code>chart-data</code>: series data</li>
+                  <li><code>chart-labels</code>: series labels</li>
+                  <li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
+                  <li><code>chart-click</code> (optional): onclick event handler</li>
+                  <li><code>chart-hover</code> (optional): onmousemove event handler</li>
+                  <li><code>chart-colors</code> (default to global colors): colors for the chart</li>
+                  <li><code>chart-dataset-override</code> (optional): override datasets individually</li>
+                </ul>
+              </div>
+            </tab>
+            <tab heading="Markup">
+              <pre><code data-language="html">&lt;canvas id=&quot;pie&quot; class=&quot;chart chart-pie&quot;
+  chart-data=&quot;data&quot; chart-labels=&quot;labels&quot; chart-options=&quot;options&quot;&gt;
+&lt;/canvas&gt; </code></pre>
+            </tab>
+            <tab heading="Javascript">
+              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("PieCtrl", function ($scope) {
+  $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
+  $scope.data = [300, 500, 100];
+});
+              </code></pre>
+            </tab>
+          </tabset>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-6 col-sm-12 code">
+          <tabset>
+            <tab heading="Settings" class="settings">
+              <div class="settings">
+                <code>.chart-polar-area</code>
+                <ul>
+                  <li><code>chart-data</code>: series data</li>
+                  <li><code>chart-labels</code>: series labels</li>
+                  <li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
+                  <li><code>chart-click</code> (optional): onclick event handler</li>
+                  <li><code>chart-hover</code> (optional): onmousemove event handler</li>
+                  <li><code>chart-colors</code> (default to global colors): colors for the chart</li>
+                  <li><code>chart-dataset-override</code> (optional): override datasets individually</li>
+                </ul>
+              </div>
+            </tab>
+            <tab heading="Markup">
+              <pre><code data-language="html">&lt;canvas id=&quot;polar-area&quot; class=&quot;chart chart-polar-area&quot;
+  chart-data=&quot;data&quot; chart-labels=&quot;labels&quot; chart-options=&quot;options&quot;&gt;
+&lt;/canvas&gt; </code></pre>
+            </tab>
+            <tab heading="Javascript">
+              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("PolarAreaCtrl", function ($scope) {
+  $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
+  $scope.data = [300, 500, 100, 40, 120];
+});
+              </code></pre>
+            </tab>
+          </tabset>
+        </div>
+        <div class="col-lg-6 col-sm-12" id="polar area-chart" ng-controller="PolarAreaCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Polar Area Chart</div>
+            <div class="panel-body">
+              <canvas id="polar" class="chart chart-polar-area" chart-data="data"
+                      chart-labels="labels" chart-options="options"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-6 col-sm-12" id="horizontal bar-chart" ng-controller="BarCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Horizontal Bar Chart</div>
+            <div class="panel-body">
+              <canvas id="horizontal" class="chart chart-horizontal-bar" chart-data="data"
+                      chart-labels="labels"></canvas>
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-6 col-sm-12 code">
+          <tabset>
+            <tab heading="Settings" class="settings">
+              <div class="settings">
+                <code>.chart-horizontal-bar</code>
+                <ul>
+                  <li><code>chart-data</code>: series data</li>
+                  <li><code>chart-labels</code>: x axis labels</li>
+                  <li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
+                  <li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
+                  <li><code>chart-click</code> (optional): onclick event handler</li>
+                  <li><code>chart-hover</code> (optional): onmousemove event handler</li>
+                  <li><code>chart-colors</code> (default to global colors): colors for the chart</li>
+                  <li><code>chart-dataset-override</code> (optional): override datasets individually</li>
+                </ul>
+              </div>
+            </tab>
+            <tab heading="Markup">
+              <pre><code data-language="html">&lt;canvas id=&quot;base&quot; class=&quot;chart-horizontal-bar&quot;
+  chart-data=&quot;data&quot; chart-labels=&quot;labels&quot; &gt;
+&lt;/canvas&gt; </code></pre>
+            </tab>
+            <tab heading="Javascript">
+              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BarCtrl",
+  function ($scope) {
+    $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
+    $scope.series = ['Series A', 'Series B'];
+
+    $scope.data = [
+      [65, 59, 80, 81, 56, 55, 40],
+      [28, 48, 40, 19, 86, 27, 90]
+    ];
+});
+              </code></pre>
+            </tab>
+          </tabset>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-6 col-sm-12 code">
+          <tabset>
+            <tab heading="Settings" class="settings">
+              <div class="settings">
+                <code>.chart-bubble</code>
+                <ul>
+                  <li><code>chart-data</code>: series data</li>
+                  <li><code>chart-labels</code>: x axis labels</li>
+                  <li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
+                  <li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
+                  <li><code>chart-click</code> (optional): onclick event handler</li>
+                  <li><code>chart-hover</code> (optional): onmousemove event handler</li>
+                  <li><code>chart-colors</code> (default to global colors): colors for the chart</li>
+                  <li><code>chart-dataset-override</code> (optional): override datasets individually</li>
+                </ul>
+              </div>
+            </tab>
+            <tab heading="Markup">
+              <pre><code data-language="html"><!--see examples/bubble.html for random bubbles source code-->
+&lt;canvas id=&quot;base&quot; class=&quot;chart-bubble&quot; chart-data=&quot;data&quot;
+  chart-series=&quot;series&quot; &gt;
+&lt;/canvas&gt; </code></pre>
+            </tab>
+            <tab heading="Javascript">
+              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BubbleCtrl",
+  function ($scope) {
+    // see examples/bubble.js for random bubbles source code
+    $scope.series = ['Series A', 'Series B'];
+
+    $scope.data = [
+      [{
+        x: 40,
+        y: 10,
+        r: 20
+      }],
+      [{
+        x: 10,
+        y: 40,
+        r: 50
+      }]
+    ];
+});
+              </code></pre>
+            </tab>
+          </tabset>
+        </div>
+        <div class="col-lg-6 col-sm-12" id="bubble-chart" ng-controller="BubbleCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Bubble Chart</div>
+            <div class="panel-body">
+              <canvas id="bubble" class="chart chart-bubble" chart-data="data" chart-options="options"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-6 col-sm-12" id="base-chart" ng-controller="BaseCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Dynamic Chart</div>
+            <div class="panel-body">
+              <canvas id="base" class="chart chart-base" chart-type="type" chart-data="data"
+                      chart-labels="labels"></canvas>
+            </div>
+          </div>
+          <button type="button" class="btn btn-primary pull-right" ng-click="toggle()">Toggle</button>
+        </div>
+        <div class="col-lg-6 col-sm-12 code">
+          <tabset>
+            <tab heading="Settings" class="settings">
+              <div class="settings">
+                <code>.chart-base</code>
+                <ul>
+                  <li><code>chart-type</code>: chart type e.g. Bar, PolarArea, etc. or other plugins</li>
+                  <li>other options according to chart type</li>
+                </ul>
+              </div>
+            </tab>
+            <tab heading="Markup">
+              <pre><code data-language="html">&lt;canvas id=&quot;base&quot; class=&quot;chart-base&quot; chart-type=&quot;type&quot;
+  chart-data=&quot;data&quot; chart-labels=&quot;labels&quot; &gt;
+&lt;/canvas&gt; </code></pre>
+            </tab>
+            <tab heading="Javascript">
+              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BaseCtrl",
+  function ($scope) {
+    $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
+    $scope.data = [300, 500, 100, 40, 120];
+    $scope.type = 'PolarArea';
+
+    $scope.toggle = function () {
+      $scope.type = $scope.type === 'PolarArea' ?
+        'Pie' : 'PolarArea';
+    };
+});
+              </code></pre>
+            </tab>
+          </tabset>
+        </div>
+      </div>
+    </section>
+    <section id="reactive">
+      <div class="page-header">
+        <h1>Reactive</h1>
+        <p>All charts are reactive and will update automatically when data changes.</p>
+      </div>
+      <div class="row" ng-controller="DataTablesCtrl">
+        <div class="col-lg-6 col-sm-12">
+          <div class="panel panel-default">
+            <div class="panel-heading">Reactive Chart</div>
+            <div class="panel-body">
+              <canvas id="tables" class="chart chart-line" chart-data="data" chart-options="options"
+                      chart-labels="labels" chart-colors="colors"></canvas>
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-6 col-sm-12">
+          <div class="panel panel-default">
+            <div class="panel-heading">Chart Data</div>
+            <div class="panel-body">
+              <table class="table table-responsive table-condensed table-striped">
+                <tr>
+                  <th ng-repeat="label in labels">{{label}}</th>
+                </tr>
+                <tr ng-repeat="dataSet in data">
+                  <td ng-repeat="set in dataSet track by $index"><span style="text-align: right;">{{data[$parent.$index][$index]}}</span></td>
+                </tr>
+              </table>
+              <button type="button" class="btn btn-primary pull-right" ng-click="randomize()">Randomize</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section id="mixed">
+      <div class="page-header">
+        <h1>Mixed type charts</h1>
+        <p>It is possible to combine multiple types of charts on the same canvas e.g. bar and line.</p>
+      </div>
+      <div class="row" ng-controller="MixedChartCtrl">
+        <div class="col-lg-6 col-sm-12 code">
+          <tabset>
+            <tab heading="Markup">
+              <pre><code data-language="html">&lt;canvas id=&quot;base&quot; class=&quot;chart-bar&quot;
+  chart-data=&quot;data&quot; chart-labels=&quot;labels&quot; chart-colors=&quot;colors&quot;
+  chart-dataset-override=&quot;datasetOverride&quot; &gt;
+&lt;/canvas&gt; </code></pre>
+            </tab>
+            <tab heading="Javascript">
+              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("MixedChartCtrl",
+  function ($scope) {
+    $scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];
+
+    $scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+    $scope.data = [
+      [65, -59, 80, 81, -56, 55, -40],
+      [28, 48, -40, 19, 86, 27, 90]
+    ];
+    $scope.datasetOverride = [
+      {
+        label: "Bar chart",
+        borderWidth: 1,
+        type: 'bar'
+      },
+      {
+        label: "Line chart",
+        borderWidth: 3,
+        hoverBackgroundColor: "rgba(255,99,132,0.4)",
+        hoverBorderColor: "rgba(255,99,132,1)",
+        type: 'line'
+      }
+    ];
+});
+              </code></pre>
+            </tab>
+          </tabset>
+        </div>
+        <div class="col-lg-6 col-sm-12">
+          <div class="panel panel-default">
+            <div class="panel-heading">Bar line Chart</div>
+            <div class="panel-body">
+              <canvas class="chart chart-bar" chart-data="data" chart-labels="labels"
+                      chart-colors="colors" chart-dataset-override="datasetOverride"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+  <footer class="footer">
+    <div class="container">
+      <p>Designed and built by <a href="https://github.com/jtblin" target="_blank">Jerome Touffe-Blin</a></p>
+      <p>Code licensed under <a href="https://github.com/jtblin/angular-chart.js/blob/master/LICENSE">BSD License</a>.</p>
+      <p><a href="https://github.com/jtblin/angular-chart.js/issues?state=open">Issues</a></p>
+      <p><strong>Credits</strong>: <a href="http://www.chartjs.org/">Chart.js</a> and <a href="https://angularjs.org/">AngularJS</a></p>
+    </div>
+  </footer>
+
+  <script src="../node_modules/angular/angular.min.js"></script>
+  <script src="../node_modules/chart.js/dist/Chart.min.js"></script>
+  <script src="../node_modules/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
+  <script src="../node_modules/Rainbow/js/rainbow.min.js"></script>
+  <script src="../node_modules/Rainbow/js/language/generic.js"></script>
+  <script src="../node_modules/Rainbow/js/language/html.js"></script>
+  <script src="../node_modules/Rainbow/js/language/javascript.js"></script>
+  <script src="../angular-chart.js"></script>
+  <script src="smoothscroll.min.js"></script>
+  <script src="app.js"></script>
+</body>
+</html>

www/lib/angular-chart.js/examples/charts.template.html

@@ -0,0 +1,701 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>Charts</title>
+  <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../node_modules/Rainbow/themes/github.css">
+  <link href="bootstrap.css" rel="stylesheet">
+  <link href="app.css" rel="stylesheet">
+  <style>
+    .chart-legend {
+      list-style-type: none;
+      margin-top: 5px;
+      text-align: center;
+    /* NOTE: Browsers automatically add 40px of padding-left to all lists, so we should offset that, otherwise the legend is off-center */
+      -webkit-padding-start: 0;
+    /* Webkit */
+      -moz-padding-start: 0;
+    /* Mozilla */
+      padding-left: 0;
+    /* IE (handles all cases, really, but we should also include the vendor-specific properties just to be safe) */
+    }
+    .chart-legend li {
+      display: inline-block;
+      white-space: nowrap;
+      position: relative;
+      margin-bottom: 4px;
+      border-radius: 5px;
+      padding: 2px 8px 2px 28px;
+      font-size: smaller;
+      cursor: default;
+    }
+    .chart-legend li span {
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 20px;
+      height: 20px;
+      border-radius: 5px;
+    }
+  </style>
+</head>
+<body ng-app="examples" id="top">
+  <div class="navbar navbar-default navbar-fixed-top">
+    <div class="container" ng-controller="MenuCtrl">
+      <div class="navbar-header">
+        <button type="button" class="navbar-toggle" ng-click="isCollapsed = !isCollapsed">
+          <span class="sr-only">Toggle navigation</span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </button>
+        <a class="navbar-brand visible-xs" href="#">Angular Charts</a>
+      </div>
+      <nav class="hidden-xs">
+        <ul class="nav navbar-nav">
+          <li>
+            <a href="#top" role="button" class="navbar-brand">
+              Angular Chart
+            </a>
+          </li>
+          <li class="dropdown">
+            <a role="button" class="dropdown-toggle" aria-haspopup="true" aria-expanded="false">
+              Directives <b class="caret"></b>
+            </a>
+            <ul class="dropdown-menu">
+              <li ng-repeat="chart in charts"><a ng-href="#{{chart | lowercase }}-chart">{{chart}}</a></li>
+            </ul>
+          </li>
+          <li><a href="#getting_started">Getting started</a></li>
+          <li><a href="#reactive">Reactive</a></li>
+          <li><a href="#mixed">Mixed type charts</a></li>
+        </ul>
+      </nav>
+      <nav class="collapse" collapse="isCollapsed" style="height: 0px;">
+        <ul class="nav navbar-nav">
+          <li><a href="#getting_started" ng-click="isCollapsed = !isCollapsed">Getting started</a></li>
+          <li><a href="#directives" ng-click="isCollapsed = !isCollapsed">Directives</a></li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+  <div class="container-fluid">
+    <div class="text-center aspect-ratio" id="container" ng-controller="TicksCtrl">
+      <canvas width='1200' height='300' id="hero-bar" class="chart chart-line" chart-data="data"
+              chart-options="options" chart-labels="labels"></canvas>
+      <div class="header">
+        <h1>
+          Angular Chart
+        </h1>
+
+        <p>Reactive, responsive, beautiful charts for <a href="http://angularjs.org">AngularJS</a> based on <a href="http://www.chartjs.org">Chart.js</a></p>
+
+        <p>
+          <a class="btn btn-default btn-lg" href="https://github.com/jtblin/angular-chart"><i class="icon-github"></i>Code on Github</a>
+          <a class="btn btn-success btn-lg" href="../dist/angular-chart.js.tar.gz" download="angular-chart.js.tar.gz">
+            <i class="fa fa-download"></i> Download <small>(<!-- version -->)</small>
+          </a>
+        </p>
+      </div>
+    </div>
+  </div>
+  <div class="container">
+    <section id="getting_started">
+      <div class="page-header">
+        <h1>Getting started</h1>
+      </div>
+      <h3>Dependencies</h3>
+      <p>
+        This repository contains a set of <strong>native AngularJS directives</strong> for Chart.js. The <strong>only required dependencies</strong> are:
+      </p>
+      <ul>
+        <li><a href="http://angularjs.org" target="_blank">AngularJS</a> (tested with 1.2.x, 1.3.x, 1.4.x and 1.5.x although it probably works with older versions)</li>
+        <li><a href="http://chartjs.org" target="_blank">Chart.js</a> (requires Chart.js 2.0.x).</li>
+      </ul>
+      <h3>Files to download</h3>
+      <p>
+        The easiest is to download with <strong>npm</strong>:
+        <pre>npm install angular-chart.js --save</pre>
+        Alternatively files can be <a href="https://github.com/jtblin/angular-chart.js">downloaded from Github</a> or via bower.
+        See <a href="https://github.com/jtblin/angular-chart.js">readme</a> for more information.
+      </p>
+      <p>Whichever method you choose the good news is that the overall size is very small:
+        &lt;5kb for all directives (~1kb with gzip compression!)</p>
+      <h3>Installation</h3>
+      <p>You need to include the dependencies in your page:</p>
+      <pre><code>&lt;script src="node_modules/chart.js/Chart.min.js">&lt;/script&gt;
+&lt;script src="node_modules/angular-chart.js/dist/angular-chart.min.js">&lt;/script&gt;</code></pre>
+      <p>As soon as you've got all the files downloaded and included in your page you just need to declare
+        a dependency on the <code>chart.js</code> <a href="http://docs.angularjs.org/guide/module">module</a>:<br>
+      </p><pre><code>angular.module('myModule', ['chart.js']);</code></pre>
+      <p></p>
+      <h3>CSS</h3>
+      <p></p>
+      <h3>Colors</h3>
+      <p>Series have beautiful pre-sets colors (to a maximum of 7 series, after that colors will be randomly generated).
+        They can be overwritten using <code>Chart.defaults.global.colors</code>.</p>
+      <ol class="chart-legend">
+        <li><span style="background-color: rgba(151,187,205,1)"></span>Blue</li>
+        <li><span style="background-color: rgba(220,220,220,1)"></span>Light grey</li>
+        <li><span style="background-color: rgba(247,70,74,1)"></span>Red</li>
+        <li><span style="background-color: rgba(70,191,189,1)"></span>Green</li>
+        <li><span style="background-color: rgba(253,180,92,1)"></span>Yellow</li>
+        <li><span style="background-color: rgba(148,159,177,1)"></span>Grey</li>
+        <li><span style="background-color: rgba(77,83,96,1)"></span>Dark Grey</li>
+      </ol>
+      <p>You can also use the provider : <code>ChartJsProvider</code> in a <code>.config()</code></p>
+      <p><pre><code>(function (ChartJsProvider) {
+  ChartJsProvider.setOptions({ colors : [ '#803690', '#00ADF9', '#DCDCDC', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'] });
+}); </code></pre></p>
+    </section>
+    <section id="directives">
+      <div class="page-header">
+        <h1>Directives</h1>
+      </div>
+      <div class="row">
+        <div class="col-lg-6 col-sm-12" id="line-chart" ng-controller="LineCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Line Chart</div>
+            <div class="panel-body">
+              <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels"
+                      chart-click="onClick" chart-hover="onHover" chart-series="series" chart-options="options"
+                      chart-dataset-override="datasetOverride"></canvas>
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-6 col-sm-12 code">
+          <tabset>
+            <tab heading="Settings" class="settings">
+              <div class="settings">
+                <code>.chart-line</code>
+                <ul>
+                  <li><code>chart-data</code>: series data</li>
+                  <li><code>chart-labels</code>: x axis labels</li>
+                  <li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
+                  <li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
+                  <li><code>chart-click</code> (optional): onclick event handler</li>
+                  <li><code>chart-hover</code> (optional): onmousemove event handler</li>
+                  <li><code>chart-colors</code> (default to global colors): colors for the chart</li>
+                  <li><code>chart-dataset-override</code> (optional): override datasets individually</li>
+                </ul>
+              </div>
+            </tab>
+            <tab heading="Markup">
+            <pre><code data-language="html">&lt;canvas id=&quot;line&quot; class=&quot;chart chart-line&quot; chart-data=&quot;data&quot;
+chart-labels=&quot;labels&quot; chart-series=&quot;series&quot; chart-options=&quot;options&quot;
+chart-dataset-override=&quot;datasetOverride&quot; chart-click=&quot;onClick&quot;
+&lt;/canvas&gt; </code></pre>
+            </tab>
+            <tab heading="Javascript">
+              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("LineCtrl", function ($scope) {
+
+  $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);
+  };
+  $scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
+  $scope.options = {
+    scales: {
+      yAxes: [
+        {
+          id: 'y-axis-1',
+          type: 'linear',
+          display: true,
+          position: 'left'
+        },
+        {
+          id: 'y-axis-2',
+          type: 'linear',
+          display: true,
+          position: 'right'
+        }
+      ]
+    }
+  };
+});
+              </code></pre>
+            </tab>
+          </tabset>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-6 col-sm-12 code">
+          <tabset>
+            <tab heading="Settings" class="settings">
+              <div class="settings">
+                <code>.chart-bar</code>
+                <ul>
+                  <li><code>chart-data</code>: series data</li>
+                  <li><code>chart-labels</code>: x axis labels</li>
+                  <li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
+                  <li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
+                  <li><code>chart-click</code> (optional): onclick event handler</li>
+                  <li><code>chart-hover</code> (optional): onmousemove event handler</li>
+                  <li><code>chart-colors</code> (default to global colors): colors for the chart</li>
+                  <li><code>chart-dataset-override</code> (optional): override datasets individually</li>
+                </ul>
+              </div>
+            </tab>
+            <tab heading="Markup">
+              <pre><code data-language="html">&lt;canvas id=&quot;bar&quot; class=&quot;chart chart-bar&quot;
+  chart-data=&quot;data&quot; chart-labels=&quot;labels&quot;&gt; chart-series=&quot;series&quot;
+&lt;/canvas&gt;</code></pre>
+            </tab>
+            <tab heading="Javascript">
+              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
+  $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
+  $scope.series = ['Series A', 'Series B'];
+
+  $scope.data = [
+    [65, 59, 80, 81, 56, 55, 40],
+    [28, 48, 40, 19, 86, 27, 90]
+  ];
+});
+              </code></pre>
+            </tab>
+          </tabset>
+        </div>
+        <div class="col-lg-6 col-sm-12" id="bar-chart" ng-controller="BarCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Bar Chart</div>
+            <div class="panel-body">
+              <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels"
+                      chart-series="series" chart-options="options"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-6 col-sm-12" id="doughnut-chart" ng-controller="DoughnutCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Doughnut Chart</div>
+            <div class="panel-body">
+              <canvas id="doughnut" class="chart chart-doughnut chart-xs" chart-data="data"
+                      chart-labels="labels"></canvas>
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-6 col-sm-12 code">
+          <tabset>
+            <tab heading="Settings" class="settings">
+              <div class="settings">
+                <code>.chart-doughnut</code>
+                <ul>
+                  <li><code>chart-data</code>: series data</li>
+                  <li><code>chart-labels</code>: series labels</li>
+                  <li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
+                  <li><code>chart-click</code> (optional): onclick event handler</li>
+                  <li><code>chart-hover</code> (optional): onmousemove event handler</li>
+                  <li><code>chart-colors</code> (default to global colors): colors for the chart</li>
+                  <li><code>chart-dataset-override</code> (optional): override datasets individually</li>
+                </ul>
+              </div>
+            </tab>
+            <tab heading="Markup">
+              <pre><code data-language="html">&lt;canvas id=&quot;doughnut&quot; class=&quot;chart chart-doughnut&quot;
+  chart-data=&quot;data&quot; chart-labels=&quot;labels&quot;&gt;
+&lt;/canvas&gt; </code></pre>
+            </tab>
+            <tab heading="Javascript">
+              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("DoughnutCtrl", function ($scope) {
+  $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
+  $scope.data = [300, 500, 100];
+});
+              </code></pre>
+            </tab>
+          </tabset>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-6 col-sm-12 code">
+          <tabset>
+            <tab heading="Settings" class="settings">
+              <div class="settings">
+                <code>.chart-radar</code>
+                <ul>
+                  <li><code>chart-data</code>: series data</li>
+                  <li><code>chart-labels</code>: series labels</li>
+                  <li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
+                  <li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
+                  <li><code>chart-click</code> (optional): onclick event handler</li>
+                  <li><code>chart-hover</code> (optional): onmousemove event handler</li>
+                  <li><code>chart-colors</code> (default to global colors): colors for the chart</li>
+                  <li><code>chart-dataset-override</code> (optional): override datasets individually</li>
+                </ul>
+              </div>
+            </tab>
+            <tab heading="Markup">
+              <pre><code data-language="html">&lt;canvas id=&quot;radar&quot; class=&quot;chart chart-radar&quot;
+  chart-data=&quot;data&quot; chart-options=&quot;options&quot; chart-labels=&quot;labels&quot;&gt;
+&lt;/canvas&gt; </code></pre>
+            </tab>
+            <tab heading="Javascript">
+              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("RadarCtrl", function ($scope) {
+  $scope.labels =["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"];
+
+  $scope.data = [
+    [65, 59, 90, 81, 56, 55, 40],
+    [28, 48, 40, 19, 96, 27, 100]
+  ];
+});
+              </code></pre>
+            </tab>
+          </tabset>
+        </div>
+        <div class="col-lg-6 col-sm-12" id="radar-chart" ng-controller="RadarCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Radar Chart</div>
+            <div class="panel-body">
+              <canvas id="area" class="chart chart-radar" chart-data="data"
+                      chart-labels="labels" chart-options="options" chart-click="onClick"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-6 col-sm-12" id="pie-chart" ng-controller="PieCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Pie Chart</div>
+            <div class="panel-body">
+              <canvas id="pie" class="chart chart-pie chart-xs" chart-data="data"
+                      chart-labels="labels" chart-options="options"></canvas>
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-6 col-sm-12 code">
+          <tabset>
+            <tab heading="Settings" class="settings">
+              <div class="settings">
+                <code>.chart-pie</code>
+                <ul>
+                  <li><code>chart-data</code>: series data</li>
+                  <li><code>chart-labels</code>: series labels</li>
+                  <li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
+                  <li><code>chart-click</code> (optional): onclick event handler</li>
+                  <li><code>chart-hover</code> (optional): onmousemove event handler</li>
+                  <li><code>chart-colors</code> (default to global colors): colors for the chart</li>
+                  <li><code>chart-dataset-override</code> (optional): override datasets individually</li>
+                </ul>
+              </div>
+            </tab>
+            <tab heading="Markup">
+              <pre><code data-language="html">&lt;canvas id=&quot;pie&quot; class=&quot;chart chart-pie&quot;
+  chart-data=&quot;data&quot; chart-labels=&quot;labels&quot; chart-options=&quot;options&quot;&gt;
+&lt;/canvas&gt; </code></pre>
+            </tab>
+            <tab heading="Javascript">
+              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("PieCtrl", function ($scope) {
+  $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
+  $scope.data = [300, 500, 100];
+});
+              </code></pre>
+            </tab>
+          </tabset>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-6 col-sm-12 code">
+          <tabset>
+            <tab heading="Settings" class="settings">
+              <div class="settings">
+                <code>.chart-polar-area</code>
+                <ul>
+                  <li><code>chart-data</code>: series data</li>
+                  <li><code>chart-labels</code>: series labels</li>
+                  <li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
+                  <li><code>chart-click</code> (optional): onclick event handler</li>
+                  <li><code>chart-hover</code> (optional): onmousemove event handler</li>
+                  <li><code>chart-colors</code> (default to global colors): colors for the chart</li>
+                  <li><code>chart-dataset-override</code> (optional): override datasets individually</li>
+                </ul>
+              </div>
+            </tab>
+            <tab heading="Markup">
+              <pre><code data-language="html">&lt;canvas id=&quot;polar-area&quot; class=&quot;chart chart-polar-area&quot;
+  chart-data=&quot;data&quot; chart-labels=&quot;labels&quot; chart-options=&quot;options&quot;&gt;
+&lt;/canvas&gt; </code></pre>
+            </tab>
+            <tab heading="Javascript">
+              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("PolarAreaCtrl", function ($scope) {
+  $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
+  $scope.data = [300, 500, 100, 40, 120];
+});
+              </code></pre>
+            </tab>
+          </tabset>
+        </div>
+        <div class="col-lg-6 col-sm-12" id="polar area-chart" ng-controller="PolarAreaCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Polar Area Chart</div>
+            <div class="panel-body">
+              <canvas id="polar" class="chart chart-polar-area" chart-data="data"
+                      chart-labels="labels" chart-options="options"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-6 col-sm-12" id="horizontal bar-chart" ng-controller="BarCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Horizontal Bar Chart</div>
+            <div class="panel-body">
+              <canvas id="horizontal" class="chart chart-horizontal-bar" chart-data="data"
+                      chart-labels="labels"></canvas>
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-6 col-sm-12 code">
+          <tabset>
+            <tab heading="Settings" class="settings">
+              <div class="settings">
+                <code>.chart-horizontal-bar</code>
+                <ul>
+                  <li><code>chart-data</code>: series data</li>
+                  <li><code>chart-labels</code>: x axis labels</li>
+                  <li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
+                  <li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
+                  <li><code>chart-click</code> (optional): onclick event handler</li>
+                  <li><code>chart-hover</code> (optional): onmousemove event handler</li>
+                  <li><code>chart-colors</code> (default to global colors): colors for the chart</li>
+                  <li><code>chart-dataset-override</code> (optional): override datasets individually</li>
+                </ul>
+              </div>
+            </tab>
+            <tab heading="Markup">
+              <pre><code data-language="html">&lt;canvas id=&quot;base&quot; class=&quot;chart-horizontal-bar&quot;
+  chart-data=&quot;data&quot; chart-labels=&quot;labels&quot; &gt;
+&lt;/canvas&gt; </code></pre>
+            </tab>
+            <tab heading="Javascript">
+              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BarCtrl",
+  function ($scope) {
+    $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
+    $scope.series = ['Series A', 'Series B'];
+
+    $scope.data = [
+      [65, 59, 80, 81, 56, 55, 40],
+      [28, 48, 40, 19, 86, 27, 90]
+    ];
+});
+              </code></pre>
+            </tab>
+          </tabset>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-6 col-sm-12 code">
+          <tabset>
+            <tab heading="Settings" class="settings">
+              <div class="settings">
+                <code>.chart-bubble</code>
+                <ul>
+                  <li><code>chart-data</code>: series data</li>
+                  <li><code>chart-labels</code>: x axis labels</li>
+                  <li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
+                  <li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
+                  <li><code>chart-click</code> (optional): onclick event handler</li>
+                  <li><code>chart-hover</code> (optional): onmousemove event handler</li>
+                  <li><code>chart-colors</code> (default to global colors): colors for the chart</li>
+                  <li><code>chart-dataset-override</code> (optional): override datasets individually</li>
+                </ul>
+              </div>
+            </tab>
+            <tab heading="Markup">
+              <pre><code data-language="html"><!--see examples/bubble.html for random bubbles source code-->
+&lt;canvas id=&quot;base&quot; class=&quot;chart-bubble&quot; chart-data=&quot;data&quot;
+  chart-series=&quot;series&quot; &gt;
+&lt;/canvas&gt; </code></pre>
+            </tab>
+            <tab heading="Javascript">
+              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BubbleCtrl",
+  function ($scope) {
+    // see examples/bubble.js for random bubbles source code
+    $scope.series = ['Series A', 'Series B'];
+
+    $scope.data = [
+      [{
+        x: 40,
+        y: 10,
+        r: 20
+      }],
+      [{
+        x: 10,
+        y: 40,
+        r: 50
+      }]
+    ];
+});
+              </code></pre>
+            </tab>
+          </tabset>
+        </div>
+        <div class="col-lg-6 col-sm-12" id="bubble-chart" ng-controller="BubbleCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Bubble Chart</div>
+            <div class="panel-body">
+              <canvas id="bubble" class="chart chart-bubble" chart-data="data" chart-options="options"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-6 col-sm-12" id="base-chart" ng-controller="BaseCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Dynamic Chart</div>
+            <div class="panel-body">
+              <canvas id="base" class="chart chart-base" chart-type="type" chart-data="data"
+                      chart-labels="labels"></canvas>
+            </div>
+          </div>
+          <button type="button" class="btn btn-primary pull-right" ng-click="toggle()">Toggle</button>
+        </div>
+        <div class="col-lg-6 col-sm-12 code">
+          <tabset>
+            <tab heading="Settings" class="settings">
+              <div class="settings">
+                <code>.chart-base</code>
+                <ul>
+                  <li><code>chart-type</code>: chart type e.g. Bar, PolarArea, etc. or other plugins</li>
+                  <li>other options according to chart type</li>
+                </ul>
+              </div>
+            </tab>
+            <tab heading="Markup">
+              <pre><code data-language="html">&lt;canvas id=&quot;base&quot; class=&quot;chart-base&quot; chart-type=&quot;type&quot;
+  chart-data=&quot;data&quot; chart-labels=&quot;labels&quot; &gt;
+&lt;/canvas&gt; </code></pre>
+            </tab>
+            <tab heading="Javascript">
+              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BaseCtrl",
+  function ($scope) {
+    $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
+    $scope.data = [300, 500, 100, 40, 120];
+    $scope.type = 'PolarArea';
+
+    $scope.toggle = function () {
+      $scope.type = $scope.type === 'PolarArea' ?
+        'Pie' : 'PolarArea';
+    };
+});
+              </code></pre>
+            </tab>
+          </tabset>
+        </div>
+      </div>
+    </section>
+    <section id="reactive">
+      <div class="page-header">
+        <h1>Reactive</h1>
+        <p>All charts are reactive and will update automatically when data changes.</p>
+      </div>
+      <div class="row" ng-controller="DataTablesCtrl">
+        <div class="col-lg-6 col-sm-12">
+          <div class="panel panel-default">
+            <div class="panel-heading">Reactive Chart</div>
+            <div class="panel-body">
+              <canvas id="tables" class="chart chart-line" chart-data="data" chart-options="options"
+                      chart-labels="labels" chart-colors="colors"></canvas>
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-6 col-sm-12">
+          <div class="panel panel-default">
+            <div class="panel-heading">Chart Data</div>
+            <div class="panel-body">
+              <table class="table table-responsive table-condensed table-striped">
+                <tr>
+                  <th ng-repeat="label in labels">{{label}}</th>
+                </tr>
+                <tr ng-repeat="dataSet in data">
+                  <td ng-repeat="set in dataSet track by $index"><span style="text-align: right;">{{data[$parent.$index][$index]}}</span></td>
+                </tr>
+              </table>
+              <button type="button" class="btn btn-primary pull-right" ng-click="randomize()">Randomize</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section id="mixed">
+      <div class="page-header">
+        <h1>Mixed type charts</h1>
+        <p>It is possible to combine multiple types of charts on the same canvas e.g. bar and line.</p>
+      </div>
+      <div class="row" ng-controller="MixedChartCtrl">
+        <div class="col-lg-6 col-sm-12 code">
+          <tabset>
+            <tab heading="Markup">
+              <pre><code data-language="html">&lt;canvas id=&quot;base&quot; class=&quot;chart-bar&quot;
+  chart-data=&quot;data&quot; chart-labels=&quot;labels&quot; chart-colors=&quot;colors&quot;
+  chart-dataset-override=&quot;datasetOverride&quot; &gt;
+&lt;/canvas&gt; </code></pre>
+            </tab>
+            <tab heading="Javascript">
+              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("MixedChartCtrl",
+  function ($scope) {
+    $scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];
+
+    $scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+    $scope.data = [
+      [65, -59, 80, 81, -56, 55, -40],
+      [28, 48, -40, 19, 86, 27, 90]
+    ];
+    $scope.datasetOverride = [
+      {
+        label: "Bar chart",
+        borderWidth: 1,
+        type: 'bar'
+      },
+      {
+        label: "Line chart",
+        borderWidth: 3,
+        hoverBackgroundColor: "rgba(255,99,132,0.4)",
+        hoverBorderColor: "rgba(255,99,132,1)",
+        type: 'line'
+      }
+    ];
+});
+              </code></pre>
+            </tab>
+          </tabset>
+        </div>
+        <div class="col-lg-6 col-sm-12">
+          <div class="panel panel-default">
+            <div class="panel-heading">Bar line Chart</div>
+            <div class="panel-body">
+              <canvas class="chart chart-bar" chart-data="data" chart-labels="labels"
+                      chart-colors="colors" chart-dataset-override="datasetOverride"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+  <footer class="footer">
+    <div class="container">
+      <p>Designed and built by <a href="https://github.com/jtblin" target="_blank">Jerome Touffe-Blin</a></p>
+      <p>Code licensed under <a href="https://github.com/jtblin/angular-chart.js/blob/master/LICENSE">BSD License</a>.</p>
+      <p><a href="https://github.com/jtblin/angular-chart.js/issues?state=open">Issues</a></p>
+      <p><strong>Credits</strong>: <a href="http://www.chartjs.org/">Chart.js</a> and <a href="https://angularjs.org/">AngularJS</a></p>
+    </div>
+  </footer>
+
+  <script src="../node_modules/angular/angular.min.js"></script>
+  <script src="../node_modules/chart.js/dist/Chart.min.js"></script>
+  <script src="../node_modules/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
+  <script src="../node_modules/Rainbow/js/rainbow.min.js"></script>
+  <script src="../node_modules/Rainbow/js/language/generic.js"></script>
+  <script src="../node_modules/Rainbow/js/language/html.js"></script>
+  <script src="../node_modules/Rainbow/js/language/javascript.js"></script>
+  <script src="../angular-chart.js"></script>
+  <script src="smoothscroll.min.js"></script>
+  <script src="app.js"></script>
+</body>
+</html>

www/lib/angular-chart.js/examples/commonjs.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>CommonJS</title>
+  <link href="bootstrap.css" rel="stylesheet">
+</head>
+<body ng-app="app">
+<br/>
+<div class="container">
+  <div class="row" ng-controller="CommonJSCtrl">
+    <div class="col-lg-6 col-sm-12">
+      <div class="panel panel-default">
+        <div class="panel-heading">CommonJS</div>
+        <div class="panel-body">
+          <canvas class="chart chart-line" chart-data="data" chart-series="series" chart-labels="labels"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="commonjs.bundle.js"></script>
+</body>
+</html>

www/lib/angular-chart.js/examples/commonjs.js

@@ -0,0 +1,19 @@
+(function () {
+  'use strict';
+
+  var angular = require('angular');
+
+  var app = angular.module('app', [
+    require('angular-chart')
+  ]);
+
+  app.controller('CommonJSCtrl', ['$scope', function ($scope) {
+    $scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+    $scope.series = ['Series A', 'Series B'];
+    $scope.data = [
+      [65, 59, 80, 81, 56, 55, 40],
+      [28, 48, 40, 19, 86, 27, 90]
+    ];
+  }]);
+
+})();

www/lib/angular-chart.js/examples/dataset-override.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>Charts with datasets overrides</title>
+  <link href="bootstrap.css" rel="stylesheet">
+</head>
+<body ng-app="app">
+<br/>
+<div id="container" class="container">
+  <div class="row" ng-controller="OverrideCtrl">
+    <div class="col-lg-6 col-sm-12">
+      <div class="panel panel-default">
+        <div class="panel-heading">Mixed chart</div>
+        <div class="panel-body">
+          <canvas class="chart chart-bar" chart-data="data1" chart-labels="labels1"
+                  chart-colors="colors" chart-dataset-override="datasetOverride1"></canvas>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-6 col-sm-12">
+      <div class="panel panel-default">
+        <div class="panel-heading">Doughnut dataset override</div>
+        <div class="panel-body">
+          <canvas class="chart chart-doughnut" chart-data="data2" chart-labels="labels2"
+                  chart-colors="colors" chart-dataset-override="datasetOverride2"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="../node_modules/angular/angular.min.js"></script>
+<script src="../node_modules/chart.js/dist/Chart.min.js"></script>
+<script src="../angular-chart.js"></script>
+<script src="dataset-override.js"></script>
+</body>
+</html>

www/lib/angular-chart.js/examples/dataset-override.js

@@ -0,0 +1,32 @@
+angular.module('app', ['chart.js']).controller('OverrideCtrl', ['$scope', function ($scope) {
+  'use strict';
+
+  $scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];
+
+  $scope.labels1 = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+  $scope.data1 = [
+    [65, -59, 80, 81, -56, 55, -40],
+    [28, 48, -40, 19, 86, 27, 90]
+  ];
+  $scope.datasetOverride1 = [
+    {
+      label: 'Override Series A',
+      borderWidth: 1,
+      type: 'bar'
+    },
+    {
+      label: 'Override Series B',
+      borderWidth: 3,
+      hoverBackgroundColor: 'rgba(255,99,132,0.4)',
+      hoverBorderColor: 'rgba(255,99,132,1)',
+      type: 'line'
+    }
+  ];
+
+  $scope.labels2 = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
+  $scope.data2 = [350, 450, 100];
+  $scope.datasetOverride2 = {
+    hoverBackgroundColor: ['#45b7cd', '#ff6384', '#ff8e72'],
+    hoverBorderColor: ['#45b7cd', '#ff6384', '#ff8e72']
+  };
+}]);

www/lib/angular-chart.js/examples/smoothscroll.min.js

@@ -0,0 +1 @@
+window.smoothScroll=function(){if(document.querySelectorAll===void 0||window.pageYOffset===void 0||history.pushState===void 0){return}var e=function(e){if(e.nodeName==="HTML")return-window.pageYOffset;return e.getBoundingClientRect().top+window.pageYOffset};var t=function(e){return e<.5?4*e*e*e:(e-1)*(2*e-2)*(2*e-2)+1};var n=function(e,n,r,i){if(r>i)return n;return e+(n-e)*t(r/i)};var r=function(t,r,i){r=r||500;var s=window.pageYOffset;if(typeof t==="number"){var o=parseInt(t)}else{var o=e(t)}var u=Date.now();var a=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(e){window.setTimeout(e,15)};var f=function(){var e=Date.now()-u;window.scroll(0,n(s,o,e,r));if(e>r){if(typeof i==="function"){i(t)}}else{a(f)}};f()};var i=function(e){e.preventDefault();if(location.hash!==this.hash)window.history.pushState(null,null,this.hash);r(document.getElementById(this.hash.substring(1)),500,function(e){location.replace("#"+e.id)})};document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll('a[href^="#"]'),t;for(var n=e.length;t=e[--n];){t.addEventListener("click",i,false)}});return r}()

www/lib/angular-chart.js/examples/stacked-bars.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>Stacked Bar chart</title>
+  <link href="bootstrap.css" rel="stylesheet">
+</head>
+<body ng-app="examples">
+<br/>
+<div class="container"></div>
+<div id="container" class="container">
+  <div class="row" ng-controller="StackedBarCtrl">
+    <div class="col-lg-6 col-sm-12">
+      <div class="panel panel-default">
+        <div class="panel-heading">Stacked Bar Chart</div>
+        <div class="panel-body">
+          <canvas class="chart chart-bar" chart-data="data" chart-labels="labels"
+                  chart-options="options" chart-series="series"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="../node_modules/angular/angular.js"></script>
+<script src="../node_modules/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
+<script src="../node_modules/chart.js/dist/Chart.js"></script>
+<script src="../angular-chart.js"></script>
+<script src="app.js"></script>
+</body>
+</html>

www/lib/angular-chart.js/examples/tables.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>Data tables</title>
+  <link href="bootstrap.css" rel="stylesheet">
+</head>
+<body ng-app="examples">
+<div class="container"></div>
+<div id="container" class="container">
+  <div class="row" ng-controller="DataTablesCtrl">
+    <div class="col-lg-6 col-sm-12">
+      <div class="panel panel-default">
+        <div class="panel-heading">Chart Data</div>
+        <div class="panel-body">
+          <table class="table table-responsive table-condensed">
+            <tr>
+              <th ng-repeat="label in labels">{{label}}</th>
+            </tr>
+            <tr ng-repeat="dataSet in data">
+              <td ng-repeat="set in dataSet track by $index"><span style="text-align: right;">{{data[$parent.$index][$index]}}</span></td>
+            </tr>
+          </table>
+          <input ng-click="randomize()" value="Randomize" type="button" class="pull-right"/>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-6 col-sm-12">
+      <div class="panel panel-default">
+        <div class="panel-heading">Reactive Chart</div>
+        <div class="panel-body">
+          <canvas id="tables" class="chart chart-line" chart-data="data" chart-labels="labels"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="../node_modules/angular/angular.min.js"></script>
+<script src="../node_modules/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
+<script src="../node_modules/chart.js/dist/Chart.min.js"></script>
+<script src="../angular-chart.js"></script>
+<script src="app.js"></script>
+</body>
+</html>

www/lib/angular-chart.js/examples/tabs.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>Charts in tabs</title>
+  <link href="bootstrap.css" rel="stylesheet">
+</head>
+<body ng-app="examples">
+<br/>
+<div id="container" class="container">
+  <div class="row" ng-controller="TabsCtrl">
+    <tabset>
+      <tab heading="First tab" active="active">
+        <div class="panel-body">
+          <canvas class="chart chart-line" chart-data="data" chart-labels="labels"></canvas>
+        </div>
+      </tab>
+      <tab heading="Second tab">
+        <div class="panel-body">
+          <canvas class="chart chart-bar" chart-data="data" chart-labels="labels"></canvas>
+        </div>
+      </tab>
+    </tabset>
+  </div>
+</div>
+
+<script src="../node_modules/angular/angular.js"></script>
+<script src="../node_modules/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
+<script src="../node_modules/chart.js/dist/Chart.min.js"></script>
+<script src="../angular-chart.js"></script>
+<script src="app.js"></script>
+</body>
+</html>

www/lib/angular-chart.js/examples/ticks.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>Realtime ticks</title>
+  <link href="bootstrap.css" rel="stylesheet">
+</head>
+<body ng-app="examples">
+<div class="container"></div>
+<div id="container" class="container">
+  <div class="row">
+    <div class="col-lg-8 col-sm-12" ng-controller="TicksCtrl">
+      <div class="panel panel-default">
+        <div class="panel-heading">Ticks Chart</div>
+        <div class="panel-body">
+          <canvas id="ticks" class="chart chart-line" chart-data="data"
+                  chart-options="options" chart-labels="labels"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="../node_modules/angular/angular.min.js"></script>
+<script src="../node_modules/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
+<script src="../node_modules/chart.js/dist/Chart.min.js"></script>
+<script src="../angular-chart.js"></script>
+<script src="app.js"></script>
+</body>
+</html>

www/lib/angular-chart.js/examples/webpack.commonjs.js

@@ -0,0 +1,18 @@
+(function () {
+  'use strict';
+
+  // install with npm: npm i --save angular-chart.js
+  // build with `npm bin`/webpack --config examples/webpack.commonjs.js --display-modules --progress
+  module.exports = {
+    entry: './examples/commonjs.js',
+    output: {
+      filename: './examples/commonjs.bundle.js'
+    },
+    resolve: {
+      alias: {
+        'angular-chart': '../angular-chart.js' // not required when you install with npm
+      }
+    }
+  };
+
+})();

www/lib/angular-chart.js/examples/webpack.config.js

@@ -0,0 +1,12 @@
+// install with npm: npm i --save angular-chart.js
+module.exports = {
+  entry: './amd.js',
+  output: {
+    filename: './bundle.js'
+  },
+  resolve: {
+    alias: {
+      'angular-chart': '../angular-chart.js' // should not be required if you installed with npm
+    }
+  }
+};

www/lib/angular-chart.js/examples/xy.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>Charts with { x, y }</title>
+  <link href="bootstrap.css" rel="stylesheet">
+</head>
+<body ng-app="app">
+<br/>
+<div id="container" class="container">
+  <div class="row" ng-controller="LineCtrl">
+    <div class="col-lg-6 col-sm-12">
+      <div class="panel panel-default">
+        <div class="panel-heading">x y</div>
+        <div class="panel-body">
+          <canvas class="chart chart-line" chart-data="data" chart-series="series" chart-options="options"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="../node_modules/angular/angular.js"></script>
+<script src="../node_modules/chart.js/dist/Chart.min.js"></script>
+<script src="../angular-chart.js"></script>
+<script src="xy.js"></script>
+</body>
+</html>

www/lib/angular-chart.js/examples/xy.js

@@ -0,0 +1,18 @@
+angular.module('app', ['chart.js']).controller('LineCtrl', ['$scope', function ($scope) {
+  'use strict';
+
+  $scope.series = ['Series A', 'Series B'];
+  $scope.data = [
+    [ {x: 0, y: 10}, {x: 0, y: 1}, {x: 1, y: 6}, {x: 4, y: 2} ],
+    [ {x: 0, y: 2}, {x: 5, y: 7}, {x: 4, y: 2}, {x: 2, y: 9} ]
+  ];
+  $scope.options = {
+    scales: {
+      xAxes: [{
+        type: 'linear',
+        position: 'bottom'
+      }]
+    }
+  };
+}]);
+

www/lib/angular-chart.js/gulpfile.js

@@ -0,0 +1,170 @@
+(function () {
+  'use strict';
+
+  var bumper = require('gulp-bump');
+  var fs = require('fs');
+  var git = require('gulp-git');
+  var gulp = require('gulp');
+  var gzip = require('gulp-gzip');
+  var header = require('gulp-header');
+  var istanbul = require('gulp-istanbul');
+  var istanbulReport = require('gulp-istanbul-report');
+  var jshint = require('gulp-jshint');
+  var jscs = require('gulp-jscs');
+  var mocha = require('gulp-spawn-mocha');
+  var mochaPhantomJS = require('gulp-mocha-phantomjs');
+  var path = require('path');
+  var pkg = require('./package.json');
+  var rename = require('gulp-rename');
+  var rimraf = require('gulp-rimraf');
+  var sequence = require('gulp-sequence');
+  var shell = require('gulp-shell');
+  var sourcemaps = require('gulp-sourcemaps');
+  var stylish = require('jshint-stylish');
+  var tar = require('gulp-tar');
+  var uglify = require('gulp-uglify');
+
+  var banner = ['/*!',
+    ' * <%= pkg.name %> - <%= pkg.description %>',
+    ' * <%= pkg.homepage %>',
+    ' * Version: <%= version %>',
+    ' *',
+    ' * Copyright 2016 Jerome Touffe-Blin',
+    ' * Released under the <%= pkg.license %> license',
+    ' * https://github.com/jtblin/angular-chart.js/blob/master/LICENSE',
+    ' */',
+    ''
+  ].join('\n');
+
+  gulp.task('clean', function () {
+    return gulp.src('./dist/*', { read: false })
+      .pipe(rimraf());
+  });
+
+  gulp.task('lint', function () {
+    return gulp.src('**/*.js')
+      .pipe(jshint())
+      .pipe(jshint.reporter(stylish));
+  });
+
+  gulp.task('style', function () {
+    return gulp.src('**/*.js')
+      .pipe(jscs());
+  });
+
+  gulp.task('cover', function () {
+    return gulp.src('angular-chart.js')
+      .pipe(istanbul({ coverageVariable: '__coverage__' }))
+      .pipe(rename('coverage.js'))
+      .pipe(gulp.dest('test/fixtures'));
+  });
+
+  gulp.task('unit', function () {
+    return gulp.src('test/index.html', { read: false })
+      .pipe(mochaPhantomJS({
+        phantomjs: {
+          hooks: 'mocha-phantomjs-istanbul',
+          coverageFile: 'coverage/coverage.json'
+        },
+        reporter: process.env.REPORTER || 'spec'
+    }));
+  });
+
+  gulp.task('integration', function () {
+    return gulp.src(path.join('test', 'test.integration.js'), { read: false })
+      .pipe(mocha({ reporter: 'list', timeout: 20000, require: 'test/support/setup.js' }));
+  });
+
+  gulp.task('report', function () {
+    return gulp.src('coverage/coverage.json')
+      .pipe(istanbulReport({ reporters: ['lcov'] }));
+  });
+
+  gulp.task('bump-patch', bump('patch'));
+  gulp.task('bump-minor', bump('minor'));
+  gulp.task('bump-major', bump('major'));
+
+  gulp.task('bower', function () {
+    return gulp.src('./angular-chart.js')
+      .pipe(header(banner, { pkg : pkg, version: version() } ))
+      .pipe(gulp.dest('./dist'));
+  });
+
+  gulp.task('js', ['lint', 'style', 'bower'], function () {
+    return gulp.src('./angular-chart.js')
+      .pipe(header(banner, { pkg : pkg, version: version() } ))
+      .pipe(rename('angular-chart.min.js'))
+      .pipe(sourcemaps.init())
+      .pipe(uglify({ preserveComments: 'license' }))
+      .pipe(sourcemaps.write('./'))
+      .pipe(gulp.dest('./dist'));
+  });
+
+  gulp.task('build', function () {
+    return gulp.src(['dist/*', '!./dist/*.tar.gz'])
+      .pipe(tar('angular-chart.js.tar'))
+      .pipe(gzip({ gzipOptions: { level: 9 } }))
+      .pipe(gulp.dest('dist/'));
+  });
+
+  gulp.task('update', function (cb) {
+    fs.readFile('./examples/charts.template.html', 'utf8', function (err, file) {
+      if (err) return cb(err);
+      file = file.replace('<!-- version -->', version());
+      fs.writeFile('./examples/charts.html', file, cb);
+    });
+  });
+
+  gulp.task('git-commit', function () {
+    var v = version();
+    gulp.src(['./dist/*', './package.json', './bower.json', './examples/charts.html', './test/fixtures/coverage.js'])
+      .pipe(git.add())
+      .pipe(git.commit(v))
+    ;
+  });
+
+  gulp.task('git-push', function (cb) {
+    var v = version();
+    git.push('origin', 'master', function (err) {
+      if (err) return cb(err);
+      git.tag(v, v, function (err) {
+        if (err) return cb(err);
+        git.push('origin', 'master', {args: '--tags' }, cb);
+      });
+    });
+  });
+
+  gulp.task('npm', shell.task([
+    'npm publish'
+  ]));
+
+  gulp.task('watch', function () {
+    gulp.watch('./*.js', ['js']);
+    return true;
+  });
+
+  gulp.task('docker-test', shell.task([
+    'npm run docker-test'
+  ]));
+
+  function bump (level) {
+    return function () {
+      return gulp.src(['./package.json', './bower.json'])
+        .pipe(bumper({type: level}))
+        .pipe(gulp.dest('./'));
+    };
+  }
+
+  function version () {
+    return JSON.parse(fs.readFileSync('package.json', 'utf8')).version;
+  }
+
+  gulp.task('default', sequence('docker-test', 'assets'));
+  gulp.task('assets', sequence('clean', 'js', 'build'));
+  gulp.task('test', sequence('cover', 'unit', 'integration', 'report'));
+  gulp.task('check', sequence(['lint', 'style'], 'test'));
+  gulp.task('deploy-patch', sequence('docker-test', 'bump-patch', 'assets', 'update', 'git-commit', 'git-push', 'npm'));
+  gulp.task('deploy-minor', sequence('docker-test', 'bump-minor', 'assets', 'update', 'git-commit', 'git-push', 'npm'));
+  gulp.task('deploy-major', sequence('docker-test', 'bump-patch', 'assets', 'update', 'git-commit', 'git-push', 'npm'));
+
+})();

www/lib/angular-chart.js/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "angular-chart.js",
+  "version": "1.0.2",
+  "description": "An angular.js wrapper for Chart.js",
+  "homepage": "http://jtblin.github.io/angular-chart.js/",
+  "main": "dist/angular-chart.js",
+  "directories": {
+    "example": "examples"
+  },
+  "scripts": {
+    "codeclimate": "./node_modules/codeclimate-test-reporter/bin/codeclimate.js < coverage/lcov.info",
+    "docker": "npm run docker-build && npm run docker-test",
+    "docker-build": "docker build -t angular-chart.js .",
+    "docker-test": "docker run --rm -i -v $(pwd)/coverage/:/src/coverage/ -v $(pwd)/test/:/src/test/ -v $(pwd)/angular-chart.js:/src/angular-chart.js angular-chart.js",
+    "test": "gulp check"
+  },
+  "author": {
+    "name": "Jerome Touffe-Blin",
+    "email": "jtblin@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/jtblin/angular-chart.js.git"
+  },
+  "license": "BSD-2-Clause",
+  "devDependencies": {
+    "Rainbow": "git+https://github.com/ccampbell/rainbow.git",
+    "angular-bootstrap": "^0.12.2",
+    "angular-mocks": "^1.5.7",
+    "chai": "^3.4.1",
+    "chai-string": "^1.2.0",
+    "codeclimate-test-reporter": "^0.3.1",
+    "cp": "^0.2.0",
+    "font-awesome": "^4.6.3",
+    "gm": "^1.22.0",
+    "gulp": "^3.9.0",
+    "gulp-bump": "^2.1.0",
+    "gulp-git": "^1.7.1",
+    "gulp-gzip": "^1.2.0",
+    "gulp-header": "^1.8.3",
+    "gulp-istanbul": "^1.0.0",
+    "gulp-istanbul-report": "^0.0.1",
+    "gulp-jscs": "^3.0.2",
+    "gulp-jshint": "^2.0.0",
+    "gulp-mocha-phantomjs": "^0.11.0",
+    "gulp-rename": "^1.2.0",
+    "gulp-rimraf": "^0.2.0",
+    "gulp-sequence": "^0.4.1",
+    "gulp-shell": "^0.5.1",
+    "gulp-sourcemaps": "^1.0.0",
+    "gulp-spawn-mocha": "^2.0.1",
+    "gulp-tar": "^1.9.0",
+    "gulp-uglify": "^1.5.3",
+    "imgur-node-api": "^0.1.0",
+    "jshint": "^2.9.1",
+    "jshint-stylish": "^2.0.1",
+    "mkdirp": "^0.5.0",
+    "mocha": "^2.1.0",
+    "mocha-phantomjs-istanbul": "^0.0.2",
+    "requirejs": "^2.2.0",
+    "sinon": "^1.12.2",
+    "sinon-chai": "^2.7.0",
+    "testatic": "^0.1.0",
+    "tmp-sync": "^1.1.0",
+    "webpack": "^1.13.1",
+    "webshot": "^0.18.0"
+  },
+  "dependencies": {
+    "angular": "1.x",
+    "chart.js": "2.x"
+  },
+  "gitHead": "56bcafb0979d6f61ec0fe2a770a74697a38bc3fe",
+  "bugs": {
+    "url": "https://github.com/jtblin/angular-chart.js/issues"
+  },
+  "_id": "angular-chart.js@1.0.2",
+  "_shasum": "0b76d45f83fc01474662bc78414a0669ec01d1c8",
+  "_from": "angular-chart.js@latest",
+  "_npmVersion": "3.9.5",
+  "_nodeVersion": "6.2.2",
+  "_npmUser": {
+    "name": "jtblin",
+    "email": "jtblin@gmail.com"
+  },
+  "maintainers": [
+    {
+      "name": "jtblin",
+      "email": "jtblin@gmail.com"
+    }
+  ],
+  "dist": {
+    "shasum": "0b76d45f83fc01474662bc78414a0669ec01d1c8",
+    "tarball": "https://registry.npmjs.org/angular-chart.js/-/angular-chart.js-1.0.2.tgz"
+  },
+  "_npmOperationalInternal": {
+    "host": "packages-12-west.internal.npmjs.com",
+    "tmp": "tmp/angular-chart.js-1.0.2.tgz_1471598008930_0.7436023156624287"
+  },
+  "_resolved": "https://registry.npmjs.org/angular-chart.js/-/angular-chart.js-1.0.2.tgz"
+}

www/lib/angular-chart.js/test/fixtures/29-tabs.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>Charts in tabs</title>
+  <link href="../../examples/bootstrap.css" rel="stylesheet">
+</head>
+<body ng-app="examples">
+<br/>
+<div id="container" class="container">
+  <div class="row" ng-controller="TabsCtrl">
+    <tabset>
+      <tab heading="First tab" active="active">
+        <div class="panel-body">
+          <canvas class="chart chart-line" chart-data="data" chart-labels="labels"></canvas>
+        </div>
+      </tab>
+      <tab heading="Second tab">
+        <div class="panel-body">
+          <canvas class="chart chart-bar" chart-data="data" chart-labels="labels"></canvas>
+        </div>
+      </tab>
+    </tabset>
+  </div>
+</div>
+
+<script src="../../node_modules/angular/angular.js"></script>
+<script src="../../node_modules/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
+<script src="../../node_modules/chart.js/dist/Chart.min.js"></script>
+<script src="../../angular-chart.js"></script>
+<script src="29-tabs.js"></script>
+</body>
+</html>

www/lib/angular-chart.js/test/fixtures/29-tabs.js

@@ -0,0 +1,18 @@
+(function () {
+  'use strict';
+
+  var app = angular.module('examples', ['chart.js', 'ui.bootstrap']);
+  Chart.defaults.global.legend = {
+    display: false
+  };
+
+  app.controller('TabsCtrl', function ($scope) {
+    $scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+    $scope.active = true;
+    $scope.data = [
+      [65, 59, 90, 81, 56, 55, 40],
+      [28, 48, 40, 19, 96, 27, 100]
+    ];
+  });
+
+})();

www/lib/angular-chart.js/test/fixtures/51-pie-update-colours.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>Pie update colors</title>
+  <link href="../../examples/bootstrap.css" rel="stylesheet">
+</head>
+<body ng-app="pie" id="top">
+  <div class="container">
+    <section id="charts">
+      <div class="page-header">
+        <h1>Charts</h1>
+      </div>
+      <div class="row">
+        <div class="col-lg-4 col-sm-12" ng-controller="PieCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Pie Chart</div>
+            <div class="panel-body">
+              <canvas class="chart chart-pie" chart-data="data" chart-labels="labels" chart-colors="colors"></canvas>
+            </div>
+            <p align="center"><a href="https://github.com/jtblin/angular-chart.js/issues/51">
+              https://github.com/jtblin/angular-chart.js/issues/51
+            </a></p>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <script src="../../node_modules/angular/angular.min.js"></script>
+  <script src="../../node_modules/chart.js/dist/Chart.min.js"></script>
+  <script src="../../angular-chart.js"></script>
+  <script src="51-pie-update-colours.js"></script>
+</body>
+</html>

www/lib/angular-chart.js/test/fixtures/51-pie-update-colours.js

@@ -0,0 +1,34 @@
+(function () {
+  'use strict';
+
+  var app = angular.module('pie', ['chart.js']);
+  Chart.defaults.global.legend = {
+    display: false
+  };
+
+  app.controller('PieCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
+    $scope.labels = ['Series A', 'Series B'];
+    $scope.data = [65, 59];
+    $scope.colors = [{ // red
+      backgroundColor: 'rgba(247,70,74,0.2)',
+      borderColor: 'rgba(247,70,74,1)',
+      pointBackgroundColor: 'rgba(247,70,74,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgba(247,70,74,0.8)'
+    },
+      { // green
+        backgroundColor: 'rgba(70,191,189,0.2)',
+        borderColor: 'rgba(70,191,189,1)',
+        pointBackgroundColor: 'rgba(70,191,189,1)',
+        pointBorderColor: '#fff',
+        pointHoverBackgroundColor: '#fff',
+        pointHoverBorderColor: 'rgba(70,191,189,0.8)'
+      }];
+
+    $timeout(function () {
+      $scope.data = [49, 65];
+    }, 0);
+  }]);
+
+})();

www/lib/angular-chart.js/test/fixtures/54-not-enough-colours.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>Not enough colors</title>
+  <link href="../../examples/bootstrap.css" rel="stylesheet">
+</head>
+<body ng-app="pie" id="top">
+  <div class="container">
+    <section id="charts">
+      <div class="page-header">
+        <h1>Charts</h1>
+      </div>
+      <div class="row">
+        <div class="col-lg-4 col-sm-12" ng-controller="PieCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Pie Chart</div>
+            <div class="panel-body">
+              <canvas class="chart chart-pie" chart-data="data" chart-labels="labels"
+                      chart-colors="colors" chart-get-color="chartGetColor"></canvas>
+            </div>
+            <p align="center"><a href="https://github.com/jtblin/angular-chart.js/issues/51">
+              https://github.com/jtblin/angular-chart.js/issues/54
+            </a></p>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <script src="../../node_modules/angular/angular.min.js"></script>
+  <script src="../../node_modules/chart.js/dist/Chart.min.js"></script>
+  <script src="../../angular-chart.js"></script>
+  <script src="54-not-enough-colours.js"></script>
+</body>
+</html>

www/lib/angular-chart.js/test/fixtures/54-not-enough-colours.js

@@ -0,0 +1,36 @@
+(function () {
+  'use strict';
+
+  var app = angular.module('pie', ['chart.js']);
+  Chart.defaults.global.legend = {
+    display: false
+  };
+
+  app.controller('PieCtrl', ['$scope', function ($scope) {
+    var cnt = 0;
+    $scope.colors = [];
+    $scope.labels = ['Series A', 'Series B'];
+    $scope.chartGetColor = function () {
+      return ++cnt % 2 > 0 ?
+      { // red
+        backgroundColor: 'rgba(247,70,74,0.2)',
+        borderColor: 'rgba(247,70,74,1)',
+        pointBackgroundColor: 'rgba(247,70,74,1)',
+        pointBorderColor: '#fff',
+        pointHoverBackgroundColor: '#fff',
+        pointHoverBorderColor: 'rgba(247,70,74,0.8)'
+      }
+        :
+      { // green
+        backgroundColor: 'rgba(70,191,189,0.2)',
+        borderColor: 'rgba(70,191,189,1)',
+        pointBackgroundColor: 'rgba(70,191,189,1)',
+        pointBorderColor: '#fff',
+        pointHoverBackgroundColor: '#fff',
+        pointHoverBorderColor: 'rgba(70,191,189,0.8)'
+      };
+    };
+    $scope.data = [49, 65];
+  }]);
+
+})();

www/lib/angular-chart.js/test/fixtures/57-hex-colours.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>Hex colors</title>
+  <link href="../../examples/bootstrap.css" rel="stylesheet">
+</head>
+<body ng-app="pie" id="top">
+  <div class="container">
+    <section id="charts">
+      <div class="page-header">
+        <h1>Charts</h1>
+      </div>
+      <div class="row">
+        <div class="col-lg-4 col-sm-12" ng-controller="PieCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Pie Chart</div>
+            <div class="panel-body">
+              <canvas class="chart chart-pie" chart-data="data" chart-labels="labels" chart-colors="colors"></canvas>
+            </div>
+            <p align="center"><a href="https://github.com/jtblin/angular-chart.js/issues/51">
+              https://github.com/jtblin/angular-chart.js/issues/57
+            </a></p>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <script src="../../node_modules/angular/angular.min.js"></script>
+  <script src="../../node_modules/chart.js/dist/Chart.min.js"></script>
+  <script src="../../angular-chart.js"></script>
+  <script src="57-hex-colours.js"></script>
+</body>
+</html>

www/lib/angular-chart.js/test/fixtures/57-hex-colours.js

@@ -0,0 +1,15 @@
+(function () {
+  'use strict';
+
+  var app = angular.module('pie', ['chart.js']);
+  Chart.defaults.global.legend = {
+    display: false
+  };
+
+  app.controller('PieCtrl', ['$scope', function ($scope) {
+    $scope.labels = ['Series A', 'Series B'];
+    $scope.colors = ['#9AFEFF', '#D1D0CE'];
+    $scope.data = [49, 65];
+  }]);
+
+})();

www/lib/angular-chart.js/test/fixtures/bubble.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>Bubble chart</title>
+  <link href="../../examples/bootstrap.css" rel="stylesheet">
+</head>
+<body ng-app="app">
+<br/>
+<div id="container" class="container">
+  <div class="row" ng-controller="BubbleCtrl">
+    <div class="col-lg-6 col-sm-12">
+      <div class="panel panel-default">
+        <div class="panel-heading">Bubble chart</div>
+        <div class="panel-body">
+          <canvas class="chart chart-bubble" chart-data="data"
+                  chart-colors="colors" chart-options="options"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="../../node_modules/angular/angular.min.js"></script>
+<script src="../../node_modules/chart.js/dist/Chart.min.js"></script>
+<script src="../../angular-chart.js"></script>
+<script src="bubble.js"></script>
+</body>
+</html>

www/lib/angular-chart.js/test/fixtures/bubble.js

@@ -0,0 +1,787 @@
+angular.module('app', ['chart.js'])
+  .config(['ChartJsProvider', function (ChartJsProvider) {
+    'use strict';
+    ChartJsProvider.setOptions({
+      tooltips: { enabled: false }
+    });
+  }])
+  .controller('BubbleCtrl', ['$scope',function ($scope) {
+    'use strict';
+
+    $scope.colors = [
+      {
+        backgroundColor: 'rgba(151,187,205,0.2)',
+        pointBackgroundColor: 'rgba(151,187,205,1)',
+        pointHoverBackgroundColor: 'rgba(151,187,205,0.8)',
+        borderColor: 'rgba(151,187,205,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(151,187,205,1)'
+      },
+      {
+        backgroundColor: 'rgba(220,220,220,0.2)',
+        pointBackgroundColor: 'rgba(220,220,220,1)',
+        pointHoverBackgroundColor: 'rgba(220,220,220,0.8)',
+        borderColor: 'rgba(220,220,220,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(220,220,220,1)'
+      },
+      {
+        backgroundColor: 'rgba(247,70,74,0.2)',
+        pointBackgroundColor: 'rgba(247,70,74,1)',
+        pointHoverBackgroundColor: 'rgba(247,70,74,0.8)',
+        borderColor: 'rgba(247,70,74,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(247,70,74,1)'
+      },
+      {
+        backgroundColor: 'rgba(70,191,189,0.2)',
+        pointBackgroundColor: 'rgba(70,191,189,1)',
+        pointHoverBackgroundColor: 'rgba(70,191,189,0.8)',
+        borderColor: 'rgba(70,191,189,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(70,191,189,1)'
+      },
+      {
+        backgroundColor: 'rgba(253,180,92,0.2)',
+        pointBackgroundColor: 'rgba(253,180,92,1)',
+        pointHoverBackgroundColor: 'rgba(253,180,92,0.8)',
+        borderColor: 'rgba(253,180,92,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(253,180,92,1)'
+      },
+      {
+        backgroundColor: 'rgba(148,159,177,0.2)',
+        pointBackgroundColor: 'rgba(148,159,177,1)',
+        pointHoverBackgroundColor: 'rgba(148,159,177,0.8)',
+        borderColor: 'rgba(148,159,177,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(148,159,177,1)'
+      },
+      {
+        backgroundColor: 'rgba(77,83,96,0.2)',
+        pointBackgroundColor: 'rgba(77,83,96,1)',
+        pointHoverBackgroundColor: 'rgba(77,83,96,0.8)',
+        borderColor: 'rgba(77,83,96,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(77,83,96,1)'
+      },
+      {
+        backgroundColor: 'rgba(151,57,74,0.2)',
+        pointBackgroundColor: 'rgba(151,57,74,1)',
+        pointHoverBackgroundColor: 'rgba(151,57,74,0.8)',
+        borderColor: 'rgba(151,57,74,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(151,57,74,1)'
+      },
+      {
+        backgroundColor: 'rgba(198,232,17,0.2)',
+        pointBackgroundColor: 'rgba(198,232,17,1)',
+        pointHoverBackgroundColor: 'rgba(198,232,17,0.8)',
+        borderColor: 'rgba(198,232,17,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(198,232,17,1)'
+      },
+      {
+        backgroundColor: 'rgba(39,249,229,0.2)',
+        pointBackgroundColor: 'rgba(39,249,229,1)',
+        pointHoverBackgroundColor: 'rgba(39,249,229,0.8)',
+        borderColor: 'rgba(39,249,229,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(39,249,229,1)'
+      },
+      {
+        backgroundColor: 'rgba(98,128,233,0.2)',
+        pointBackgroundColor: 'rgba(98,128,233,1)',
+        pointHoverBackgroundColor: 'rgba(98,128,233,0.8)',
+        borderColor: 'rgba(98,128,233,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(98,128,233,1)'
+      },
+      {
+        backgroundColor: 'rgba(195,99,4,0.2)',
+        pointBackgroundColor: 'rgba(195,99,4,1)',
+        pointHoverBackgroundColor: 'rgba(195,99,4,0.8)',
+        borderColor: 'rgba(195,99,4,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(195,99,4,1)'
+      },
+      {
+        backgroundColor: 'rgba(81,204,249,0.2)',
+        pointBackgroundColor: 'rgba(81,204,249,1)',
+        pointHoverBackgroundColor: 'rgba(81,204,249,0.8)',
+        borderColor: 'rgba(81,204,249,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(81,204,249,1)'
+      },
+      {
+        backgroundColor: 'rgba(159,197,163,0.2)',
+        pointBackgroundColor: 'rgba(159,197,163,1)',
+        pointHoverBackgroundColor: 'rgba(159,197,163,0.8)',
+        borderColor: 'rgba(159,197,163,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(159,197,163,1)'
+      },
+      {
+        backgroundColor: 'rgba(122,68,60,0.2)',
+        pointBackgroundColor: 'rgba(122,68,60,1)',
+        pointHoverBackgroundColor: 'rgba(122,68,60,0.8)',
+        borderColor: 'rgba(122,68,60,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(122,68,60,1)'
+      },
+      {
+        backgroundColor: 'rgba(183,199,142,0.2)',
+        pointBackgroundColor: 'rgba(183,199,142,1)',
+        pointHoverBackgroundColor: 'rgba(183,199,142,0.8)',
+        borderColor: 'rgba(183,199,142,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(183,199,142,1)'
+      },
+      {
+        backgroundColor: 'rgba(33,125,4,0.2)',
+        pointBackgroundColor: 'rgba(33,125,4,1)',
+        pointHoverBackgroundColor: 'rgba(33,125,4,0.8)',
+        borderColor: 'rgba(33,125,4,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(33,125,4,1)'
+      },
+      {
+        backgroundColor: 'rgba(100,33,169,0.2)',
+        pointBackgroundColor: 'rgba(100,33,169,1)',
+        pointHoverBackgroundColor: 'rgba(100,33,169,0.8)',
+        borderColor: 'rgba(100,33,169,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(100,33,169,1)'
+      },
+      {
+        backgroundColor: 'rgba(10,128,69,0.2)',
+        pointBackgroundColor: 'rgba(10,128,69,1)',
+        pointHoverBackgroundColor: 'rgba(10,128,69,0.8)',
+        borderColor: 'rgba(10,128,69,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(10,128,69,1)'
+      },
+      {
+        backgroundColor: 'rgba(55,144,44,0.2)',
+        pointBackgroundColor: 'rgba(55,144,44,1)',
+        pointHoverBackgroundColor: 'rgba(55,144,44,0.8)',
+        borderColor: 'rgba(55,144,44,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(55,144,44,1)'
+      },
+      {
+        backgroundColor: 'rgba(111,248,27,0.2)',
+        pointBackgroundColor: 'rgba(111,248,27,1)',
+        pointHoverBackgroundColor: 'rgba(111,248,27,0.8)',
+        borderColor: 'rgba(111,248,27,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(111,248,27,1)'
+      },
+      {
+        backgroundColor: 'rgba(241,104,154,0.2)',
+        pointBackgroundColor: 'rgba(241,104,154,1)',
+        pointHoverBackgroundColor: 'rgba(241,104,154,0.8)',
+        borderColor: 'rgba(241,104,154,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(241,104,154,1)'
+      },
+      {
+        backgroundColor: 'rgba(158,253,143,0.2)',
+        pointBackgroundColor: 'rgba(158,253,143,1)',
+        pointHoverBackgroundColor: 'rgba(158,253,143,0.8)',
+        borderColor: 'rgba(158,253,143,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(158,253,143,1)'
+      },
+      {
+        backgroundColor: 'rgba(186,25,134,0.2)',
+        pointBackgroundColor: 'rgba(186,25,134,1)',
+        pointHoverBackgroundColor: 'rgba(186,25,134,0.8)',
+        borderColor: 'rgba(186,25,134,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(186,25,134,1)'
+      },
+      {
+        backgroundColor: 'rgba(81,34,77,0.2)',
+        pointBackgroundColor: 'rgba(81,34,77,1)',
+        pointHoverBackgroundColor: 'rgba(81,34,77,0.8)',
+        borderColor: 'rgba(81,34,77,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(81,34,77,1)'
+      },
+      {
+        backgroundColor: 'rgba(254,6,184,0.2)',
+        pointBackgroundColor: 'rgba(254,6,184,1)',
+        pointHoverBackgroundColor: 'rgba(254,6,184,0.8)',
+        borderColor: 'rgba(254,6,184,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(254,6,184,1)'
+      },
+      {
+        backgroundColor: 'rgba(4,230,203,0.2)',
+        pointBackgroundColor: 'rgba(4,230,203,1)',
+        pointHoverBackgroundColor: 'rgba(4,230,203,0.8)',
+        borderColor: 'rgba(4,230,203,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(4,230,203,1)'
+      },
+      {
+        backgroundColor: 'rgba(204,31,79,0.2)',
+        pointBackgroundColor: 'rgba(204,31,79,1)',
+        pointHoverBackgroundColor: 'rgba(204,31,79,0.8)',
+        borderColor: 'rgba(204,31,79,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(204,31,79,1)'
+      },
+      {
+        backgroundColor: 'rgba(95,152,82,0.2)',
+        pointBackgroundColor: 'rgba(95,152,82,1)',
+        pointHoverBackgroundColor: 'rgba(95,152,82,0.8)',
+        borderColor: 'rgba(95,152,82,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(95,152,82,1)'
+      },
+      {
+        backgroundColor: 'rgba(120,249,206,0.2)',
+        pointBackgroundColor: 'rgba(120,249,206,1)',
+        pointHoverBackgroundColor: 'rgba(120,249,206,0.8)',
+        borderColor: 'rgba(120,249,206,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(120,249,206,1)'
+      },
+      {
+        backgroundColor: 'rgba(229,137,70,0.2)',
+        pointBackgroundColor: 'rgba(229,137,70,1)',
+        pointHoverBackgroundColor: 'rgba(229,137,70,0.8)',
+        borderColor: 'rgba(229,137,70,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(229,137,70,1)'
+      },
+      {
+        backgroundColor: 'rgba(54,98,166,0.2)',
+        pointBackgroundColor: 'rgba(54,98,166,1)',
+        pointHoverBackgroundColor: 'rgba(54,98,166,0.8)',
+        borderColor: 'rgba(54,98,166,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(54,98,166,1)'
+      },
+      {
+        backgroundColor: 'rgba(22,81,208,0.2)',
+        pointBackgroundColor: 'rgba(22,81,208,1)',
+        pointHoverBackgroundColor: 'rgba(22,81,208,0.8)',
+        borderColor: 'rgba(22,81,208,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(22,81,208,1)'
+      },
+      {
+        backgroundColor: 'rgba(139,248,40,0.2)',
+        pointBackgroundColor: 'rgba(139,248,40,1)',
+        pointHoverBackgroundColor: 'rgba(139,248,40,0.8)',
+        borderColor: 'rgba(139,248,40,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(139,248,40,1)'
+      },
+      {
+        backgroundColor: 'rgba(139,221,190,0.2)',
+        pointBackgroundColor: 'rgba(139,221,190,1)',
+        pointHoverBackgroundColor: 'rgba(139,221,190,0.8)',
+        borderColor: 'rgba(139,221,190,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(139,221,190,1)'
+      },
+      {
+        backgroundColor: 'rgba(230,218,251,0.2)',
+        pointBackgroundColor: 'rgba(230,218,251,1)',
+        pointHoverBackgroundColor: 'rgba(230,218,251,0.8)',
+        borderColor: 'rgba(230,218,251,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(230,218,251,1)'
+      },
+      {
+        backgroundColor: 'rgba(245,21,15,0.2)',
+        pointBackgroundColor: 'rgba(245,21,15,1)',
+        pointHoverBackgroundColor: 'rgba(245,21,15,0.8)',
+        borderColor: 'rgba(245,21,15,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(245,21,15,1)'
+      },
+      {
+        backgroundColor: 'rgba(36,166,81,0.2)',
+        pointBackgroundColor: 'rgba(36,166,81,1)',
+        pointHoverBackgroundColor: 'rgba(36,166,81,0.8)',
+        borderColor: 'rgba(36,166,81,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(36,166,81,1)'
+      },
+      {
+        backgroundColor: 'rgba(177,41,153,0.2)',
+        pointBackgroundColor: 'rgba(177,41,153,1)',
+        pointHoverBackgroundColor: 'rgba(177,41,153,0.8)',
+        borderColor: 'rgba(177,41,153,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(177,41,153,1)'
+      },
+      {
+        backgroundColor: 'rgba(44,173,178,0.2)',
+        pointBackgroundColor: 'rgba(44,173,178,1)',
+        pointHoverBackgroundColor: 'rgba(44,173,178,0.8)',
+        borderColor: 'rgba(44,173,178,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(44,173,178,1)'
+      },
+      {
+        backgroundColor: 'rgba(134,50,197,0.2)',
+        pointBackgroundColor: 'rgba(134,50,197,1)',
+        pointHoverBackgroundColor: 'rgba(134,50,197,0.8)',
+        borderColor: 'rgba(134,50,197,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(134,50,197,1)'
+      },
+      {
+        backgroundColor: 'rgba(176,188,149,0.2)',
+        pointBackgroundColor: 'rgba(176,188,149,1)',
+        pointHoverBackgroundColor: 'rgba(176,188,149,0.8)',
+        borderColor: 'rgba(176,188,149,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(176,188,149,1)'
+      },
+      {
+        backgroundColor: 'rgba(92,9,164,0.2)',
+        pointBackgroundColor: 'rgba(92,9,164,1)',
+        pointHoverBackgroundColor: 'rgba(92,9,164,0.8)',
+        borderColor: 'rgba(92,9,164,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(92,9,164,1)'
+      },
+      {
+        backgroundColor: 'rgba(184,93,102,0.2)',
+        pointBackgroundColor: 'rgba(184,93,102,1)',
+        pointHoverBackgroundColor: 'rgba(184,93,102,0.8)',
+        borderColor: 'rgba(184,93,102,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(184,93,102,1)'
+      },
+      {
+        backgroundColor: 'rgba(1,235,91,0.2)',
+        pointBackgroundColor: 'rgba(1,235,91,1)',
+        pointHoverBackgroundColor: 'rgba(1,235,91,0.8)',
+        borderColor: 'rgba(1,235,91,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(1,235,91,1)'
+      },
+      {
+        backgroundColor: 'rgba(148,100,155,0.2)',
+        pointBackgroundColor: 'rgba(148,100,155,1)',
+        pointHoverBackgroundColor: 'rgba(148,100,155,0.8)',
+        borderColor: 'rgba(148,100,155,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(148,100,155,1)'
+      },
+      {
+        backgroundColor: 'rgba(17,253,128,0.2)',
+        pointBackgroundColor: 'rgba(17,253,128,1)',
+        pointHoverBackgroundColor: 'rgba(17,253,128,0.8)',
+        borderColor: 'rgba(17,253,128,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(17,253,128,1)'
+      },
+      {
+        backgroundColor: 'rgba(107,59,91,0.2)',
+        pointBackgroundColor: 'rgba(107,59,91,1)',
+        pointHoverBackgroundColor: 'rgba(107,59,91,0.8)',
+        borderColor: 'rgba(107,59,91,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(107,59,91,1)'
+      },
+      {
+        backgroundColor: 'rgba(105,111,203,0.2)',
+        pointBackgroundColor: 'rgba(105,111,203,1)',
+        pointHoverBackgroundColor: 'rgba(105,111,203,0.8)',
+        borderColor: 'rgba(105,111,203,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(105,111,203,1)'
+      },
+      {
+        backgroundColor: 'rgba(86,123,134,0.2)',
+        pointBackgroundColor: 'rgba(86,123,134,1)',
+        pointHoverBackgroundColor: 'rgba(86,123,134,0.8)',
+        borderColor: 'rgba(86,123,134,1)',
+        pointBorderColor: '#fff',
+        pointHoverBorderColor: 'rgba(86,123,134,1)'
+      }
+    ];
+
+    $scope.options = {
+      scales: {
+        xAxes: [{
+          display: false,
+          ticks: {
+            max: 125,
+            min: -125,
+            stepSize: 10
+          }
+        }],
+        yAxes: [{
+          display: false,
+          ticks: {
+            max: 125,
+            min: -125,
+            stepSize: 10
+          }
+        }]
+      }
+    };
+
+    $scope.data = [
+      [
+        {
+          x: -8,
+          y: -72,
+          r: 20.5
+        }
+      ],
+      [
+        {
+          x: -14,
+          y: -32,
+          r: 14.25
+        }
+      ],
+      [
+        {
+          x: 0,
+          y: 86,
+          r: 15
+        }
+      ],
+      [
+        {
+          x: -13,
+          y: 58,
+          r: 7.75
+        }
+      ],
+      [
+        {
+          x: 22,
+          y: -60,
+          r: 9.25
+        }
+      ],
+      [
+        {
+          x: 84,
+          y: -25,
+          r: 15.25
+        }
+      ],
+      [
+        {
+          x: 14,
+          y: 85,
+          r: 23.25
+        }
+      ],
+      [
+        {
+          x: -2,
+          y: 37,
+          r: 10.75
+        }
+      ],
+      [
+        {
+          x: -40,
+          y: 69,
+          r: 0.75
+        }
+      ],
+      [
+        {
+          x: -62,
+          y: -46,
+          r: 19.5
+        }
+      ],
+      [
+        {
+          x: 4,
+          y: -1,
+          r: 0.25
+        }
+      ],
+      [
+        {
+          x: -34,
+          y: 67,
+          r: 17.5
+        }
+      ],
+      [
+        {
+          x: -21,
+          y: -88,
+          r: 16.25
+        }
+      ],
+      [
+        {
+          x: 90,
+          y: 80,
+          r: 24.75
+        }
+      ],
+      [
+        {
+          x: 7,
+          y: 93,
+          r: 20.75
+        }
+      ],
+      [
+        {
+          x: 48,
+          y: 39,
+          r: 7.75
+        }
+      ],
+      [
+        {
+          x: 99,
+          y: -20,
+          r: 2.75
+        }
+      ],
+      [
+        {
+          x: -48,
+          y: 52,
+          r: 4.5
+        }
+      ],
+      [
+        {
+          x: -57,
+          y: -39,
+          r: 21
+        }
+      ],
+      [
+        {
+          x: 31,
+          y: -58,
+          r: 3.25
+        }
+      ],
+      [
+        {
+          x: 96,
+          y: 62,
+          r: 10.25
+        }
+      ],
+      [
+        {
+          x: 58,
+          y: -54,
+          r: 19.5
+        }
+      ],
+      [
+        {
+          x: 8,
+          y: 73,
+          r: 12
+        }
+      ],
+      [
+        {
+          x: 67,
+          y: 97,
+          r: 8.5
+        }
+      ],
+      [
+        {
+          x: -47,
+          y: -57,
+          r: 25
+        }
+      ],
+      [
+        {
+          x: 0,
+          y: -97,
+          r: 23.5
+        }
+      ],
+      [
+        {
+          x: -55,
+          y: -27,
+          r: 2
+        }
+      ],
+      [
+        {
+          x: 68,
+          y: 9,
+          r: 12.25
+        }
+      ],
+      [
+        {
+          x: -5,
+          y: 63,
+          r: 20.75
+        }
+      ],
+      [
+        {
+          x: 80,
+          y: 31,
+          r: 18.75
+        }
+      ],
+      [
+        {
+          x: 47,
+          y: -21,
+          r: 2.5
+        }
+      ],
+      [
+        {
+          x: -72,
+          y: 94,
+          r: 1.25
+        }
+      ],
+      [
+        {
+          x: 11,
+          y: -90,
+          r: 5.25
+        }
+      ],
+      [
+        {
+          x: 45,
+          y: -20,
+          r: 3.5
+        }
+      ],
+      [
+        {
+          x: 99,
+          y: 42,
+          r: 8.5
+        }
+      ],
+      [
+        {
+          x: -8,
+          y: -65,
+          r: 11
+        }
+      ],
+      [
+        {
+          x: -30,
+          y: -68,
+          r: 19
+        }
+      ],
+      [
+        {
+          x: -56,
+          y: 19,
+          r: 1
+        }
+      ],
+      [
+        {
+          x: -22,
+          y: 46,
+          r: 9
+        }
+      ],
+      [
+        {
+          x: 8,
+          y: 25,
+          r: 1
+        }
+      ],
+      [
+        {
+          x: -36,
+          y: -64,
+          r: 0.5
+        }
+      ],
+      [
+        {
+          x: 13,
+          y: -6,
+          r: 23.5
+        }
+      ],
+      [
+        {
+          x: 41,
+          y: 45,
+          r: 3.75
+        }
+      ],
+      [
+        {
+          x: -84,
+          y: 39,
+          r: 10.25
+        }
+      ],
+      [
+        {
+          x: 27,
+          y: -96,
+          r: 23.5
+        }
+      ],
+      [
+        {
+          x: -14,
+          y: -83,
+          r: 25
+        }
+      ],
+      [
+        {
+          x: -89,
+          y: -78,
+          r: 1
+        }
+      ],
+      [
+        {
+          x: -43,
+          y: -6,
+          r: 2.5
+        }
+      ],
+      [
+        {
+          x: 3,
+          y: 71,
+          r: 0
+        }
+      ],
+      [
+        {
+          x: 11,
+          y: 53,
+          r: 4.25
+        }
+      ]
+    ];
+  }]);

www/lib/angular-chart.js/test/fixtures/charts.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>Charts</title>
+  <link href="../../examples/bootstrap.css" rel="stylesheet">
+</head>
+<body ng-app="charts" id="top">
+  <div class="container">
+    <section id="charts">
+      <div class="page-header">
+        <h1>Charts</h1>
+      </div>
+      <div class="row">
+        <div class="col-lg-4 col-sm-12" id="line-chart" ng-controller="LineCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Line Chart</div>
+            <div class="panel-body">
+              <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-series="series"></canvas>
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-4 col-sm-12" id="bar-chart" ng-controller="BarCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Bar Chart</div>
+            <div class="panel-body">
+              <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels"
+                      chart-series="series" chart-options="options"></canvas>
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-4 col-sm-12" id="doughnut-chart" ng-controller="DoughnutCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Doughnut Chart</div>
+            <div class="panel-body">
+              <canvas id="doughnut" class="chart chart-doughnut" chart-data="data" chart-labels="labels"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-4 col-sm-12" id="radar-chart" ng-controller="RadarCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Radar Chart</div>
+            <div class="panel-body">
+              <canvas id="area" class="chart chart-radar" chart-data="data" chart-labels="labels"></canvas>
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-4 col-sm-12" id="pie-chart" ng-controller="PieCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Pie Chart</div>
+            <div class="panel-body">
+              <canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels"></canvas>
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-4 col-sm-12" id="polar area-chart" ng-controller="PolarAreaCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Polar Area Chart</div>
+            <div class="panel-body">
+              <canvas id="polar" class="chart chart-polar-area" chart-data="data" chart-labels="labels"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+      </div>
+    </section>
+  </div>
+
+  <script src="../../node_modules/angular/angular.min.js"></script>
+  <script src="../../node_modules/chart.js/dist/Chart.min.js"></script>
+  <script src="../../angular-chart.js"></script>
+  <script src="charts.js"></script>
+</body>
+</html>

www/lib/angular-chart.js/test/fixtures/charts.js

@@ -0,0 +1,68 @@
+(function () {
+  'use strict';
+
+  var app = angular.module('charts', ['chart.js']);
+  Chart.defaults.global.legend = {
+    display: false
+  };
+
+  app.controller('LineCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
+    $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]
+    ];
+    $timeout(function () {
+      $scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+      $scope.data = [
+        [28, 48, 40, 19, 86, 27, 90],
+        [65, 59, 80, 81, 56, 55, 40]
+      ];
+      $scope.series = ['Series C', 'Series D'];
+    }, 0);
+  }]);
+
+  app.controller('BarCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
+    $scope.options = { scaleShowVerticalLines: false };
+    $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
+    $scope.series = ['Series A', 'Series B'];
+    $scope.data = [
+      [65, 59, 80, 81, 56, 55, 40],
+      [28, 48, 40, 19, 86, 27, 90]
+    ];
+    $timeout(function () {
+      $scope.options = { scaleShowVerticalLines: true };
+    }, 0);
+  }]);
+
+  app.controller('DoughnutCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
+    $scope.labels = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
+    $scope.data = [0, 0, 0];
+    // TODO: investigate why chart was not showing up without this hack
+    $timeout(function () {
+      $scope.data = [350, 450, 100];
+    }, 0);
+  }]);
+
+  app.controller('PieCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
+    $scope.labels = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
+    $scope.data = [0, 0, 0];
+    $timeout(function () {
+      $scope.data = [350, 450, 100];
+    }, 0);
+  }]);
+
+  app.controller('PolarAreaCtrl', function ($scope) {
+    $scope.labels = ['Download Sales', 'In-Store Sales', 'Mail Sales', 'Telesales', 'Corporate Sales'];
+    $scope.data = [300, 500, 100, 40, 120];
+  });
+
+  app.controller('RadarCtrl', function ($scope) {
+    $scope.labels = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'];
+    $scope.data = [
+      [65, 59, 90, 81, 56, 55, 40],
+      [28, 48, 40, 19, 96, 27, 100]
+    ];
+  });
+})();

www/lib/angular-chart.js/test/fixtures/configure-line-chart.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>Pie update colors</title>
+  <link href="../../examples/bootstrap.css" rel="stylesheet">
+</head>
+<body ng-app="line" id="top">
+  <div class="container">
+    <section id="charts">
+      <div class="page-header">
+        <h1>Charts</h1>
+      </div>
+      <div class="row">
+        <div class="col-lg-4 col-sm-12" ng-controller="LineCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Line Chart</div>
+            <div class="panel-body">
+              <canvas class="chart chart-line" chart-options="options" chart-data="data"
+                      chart-labels="labels" chart-colors="colors"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <script src="../../node_modules/angular/angular.min.js"></script>
+  <script src="../../node_modules/chart.js/dist/Chart.min.js"></script>
+  <script src="../../angular-chart.js"></script>
+  <script src="configure-line-chart.js"></script>
+</body>
+</html>

www/lib/angular-chart.js/test/fixtures/configure-line-chart.js

@@ -0,0 +1,33 @@
+(function () {
+  'use strict';
+
+  var app = angular.module('line', ['chart.js']);
+
+  app.config(function (ChartJsProvider) {
+    // Configure all charts
+    ChartJsProvider.setOptions({
+      chartColors: ['#FF5252', '#FF8A80']
+    });
+    // Configure all line charts
+    ChartJsProvider.setOptions('line', {
+      showLines: false
+    });
+  });
+
+  app.controller('LineCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
+    $scope.labels = ['Series A', 'Series B'];
+    $scope.data = [[15, 23], [59, 80]];
+
+    // Configure only this instance
+    $scope.options = {
+      legend: {
+        display: false
+      }
+    };
+
+    $timeout(function () {
+      $scope.data = [[15, 23], [59, 80]];
+    }, 0);
+  }]);
+
+})();

www/lib/angular-chart.js/test/fixtures/custom-directive.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>Pie update colors</title>
+  <link href="../../examples/bootstrap.css" rel="stylesheet">
+</head>
+<body ng-app="pie" id="top">
+  <div class="container">
+    <section id="charts">
+      <div class="page-header">
+        <h1>Charts</h1>
+      </div>
+      <div class="row">
+        <div class="col-lg-4 col-sm-12" ng-controller="PieCtrl">
+          <div class="panel panel-default">
+            <div class="panel-heading">Pie Chart</div>
+            <div class="panel-body">
+              <canvas class="chart my-special-pie" chart-data="data" chart-labels="labels" chart-colors="colors"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <script src="../../node_modules/angular/angular.min.js"></script>
+  <script src="../../node_modules/chart.js/dist/Chart.min.js"></script>
+  <script src="../../angular-chart.js"></script>
+  <script src="custom-directive.js"></script>
+</body>
+</html>

www/lib/angular-chart.js/test/fixtures/custom-directive.js

@@ -0,0 +1,20 @@
+(function () {
+  'use strict';
+
+  var app = angular.module('pie', ['chart.js']);
+  Chart.defaults.global.legend = {
+    display: false
+  };
+
+  app.directive('mySpecialPie', function (ChartJsFactory) { return new ChartJsFactory('pie'); });
+
+  app.controller('PieCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
+    $scope.labels = ['Series A', 'Series B'];
+    $scope.data = [5, 59];
+
+    $timeout(function () {
+      $scope.data = [5, 65];
+    }, 0);
+  }]);
+
+})();

www/lib/angular-chart.js/test/fixtures/dataset-override.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>Charts with datasets overrides</title>
+  <link href="../../examples/bootstrap.css" rel="stylesheet">
+</head>
+<body ng-app="app">
+<br/>
+<div id="container" class="container">
+  <div class="page-header">
+    <h1>Dataset overrides</h1>
+  </div>
+  <div class="row" ng-controller="OverrideCtrl">
+    <div class="col-lg-6 col-sm-12">
+      <div class="panel panel-default">
+        <div class="panel-heading">Mixed chart</div>
+        <div class="panel-body">
+          <canvas class="chart chart-bar" chart-data="data1" chart-labels="labels1"
+                  chart-colors="colors" chart-dataset-override="datasetOverride1"></canvas>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-6 col-sm-12">
+      <div class="panel panel-default">
+        <div class="panel-heading">Doughnut dataset override</div>
+        <div class="panel-body">
+          <canvas class="chart chart-doughnut" chart-data="data2" chart-labels="labels2"
+                  chart-colors="colors" chart-dataset-override="datasetOverride2"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="../../node_modules/angular/angular.min.js"></script>
+<script src="../../node_modules/chart.js/dist/Chart.min.js"></script>
+<script src="../../angular-chart.js"></script>
+<script src="dataset-override.js"></script>
+</body>
+</html>

www/lib/angular-chart.js/test/fixtures/dataset-override.js

@@ -0,0 +1,32 @@
+angular.module('app', ['chart.js']).controller('OverrideCtrl', ['$scope', function ($scope) {
+  'use strict';
+
+  $scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];
+
+  $scope.labels1 = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+  $scope.data1 = [
+    [65, -59, 80, 81, -56, 55, -40],
+    [28, 48, -40, 19, 86, 27, 90]
+  ];
+  $scope.datasetOverride1 = [
+    {
+      label: 'Override Series A',
+      borderWidth: 1,
+      type: 'bar'
+    },
+    {
+      label: 'Override Series B',
+      borderWidth: 3,
+      hoverBackgroundColor: 'rgba(255,99,132,0.4)',
+      hoverBorderColor: 'rgba(255,99,132,1)',
+      type: 'line'
+    }
+  ];
+
+  $scope.labels2 = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
+  $scope.data2 = [350, 450, 100];
+  $scope.datasetOverride2 = {
+    hoverBackgroundColor: ['#45b7cd', '#ff6384', '#ff8e72'],
+    hoverBorderColor: ['#45b7cd', '#ff6384', '#ff8e72']
+  };
+}]);

www/lib/angular-chart.js/test/fixtures/horizontal-bar-chart.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>Horizontal Bar Chart</title>
+  <link href="../../examples/bootstrap.css" rel="stylesheet">
+</head>
+<body ng-app="horizontal" id="top">
+<div class="container">
+  <section id="charts">
+    <div class="page-header">
+      <h1>Horizontal Bar Chart</h1>
+    </div>
+    <div class="row">
+      <div class="col-lg-6 col-sm-12" ng-controller="HorizontalBarCtrl">
+        <div class="panel panel-default">
+          <div class="panel-heading">Horizontal Bar Chart</div>
+          <div class="panel-body">
+            <canvas class="chart chart-horizontal-bar " chart-options="options" chart-data="data"
+                    chart-labels="labels" chart-colors="colors"></canvas>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</div>
+
+<script src="../../node_modules/angular/angular.min.js"></script>
+<script src="../../node_modules/chart.js/dist/Chart.min.js"></script>
+<script src="../../angular-chart.js"></script>
+<script src="horizontal-bar-chart.js"></script>
+</body>
+</html>

www/lib/angular-chart.js/test/fixtures/horizontal-bar-chart.js

@@ -0,0 +1,18 @@
+(function () {
+  'use strict';
+
+  var app = angular.module('horizontal', ['chart.js']);
+  Chart.defaults.global.legend = {
+    display: false
+  };
+
+  app.controller('HorizontalBarCtrl', function ($scope) {
+    $scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+    $scope.active = true;
+    $scope.data = [
+      [65, 59, 90, 81, 56, 55, 40],
+      [28, 48, 40, 19, 96, 27, 100]
+    ];
+  });
+
+})();

www/lib/angular-chart.js/test/index.html

@@ -0,0 +1,31 @@
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Mocha Tests</title>
+  <link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
+</head>
+<body ng-app="chart.js">
+<div id="mocha"></div>
+<script src="../node_modules/angular/angular.min.js"></script>
+<script src="../node_modules/chart.js/dist/Chart.min.js"></script>
+<script src="../angular-chart.js"></script>
+<script src="../node_modules/mocha/mocha.js"></script>
+<script src="../node_modules/chai/chai.js"></script>
+<script src="../node_modules/chai-string/chai-string.js"></script>
+<script src="../node_modules/sinon/pkg/sinon.js"></script>
+<script src="../node_modules/sinon-chai/lib/sinon-chai.js"></script>
+<script>mocha.setup('bdd')</script>
+<script src="../node_modules/angular-mocks/angular-mocks.js"></script>
+<script src="../test/fixtures/coverage.js"></script>
+<script src="../test/test.unit.js"></script>
+<script>
+  var expect = chai.expect;
+  mocha.checkLeaks();
+  mocha.globals(['angular', 'Chart', 'angular', 'chai', 'expect', 'sinon', 'sinonChai', '__coverage__']);
+  if (window.mochaPhantomJS)
+    mochaPhantomJS.run();
+  else
+    mocha.run();
+</script>
+</body>
+</html>

www/lib/angular-chart.js/test/mocha.opts

@@ -0,0 +1,4 @@
+--slow 20
+--growl
+--reporter spec
+--require test/support/setup

www/lib/angular-chart.js/test/support/setup.js

@@ -0,0 +1,11 @@
+/*jshint node:true*/
+(function () {
+  'use strict';
+
+  var chai = require('chai');
+  global.chai = chai;
+  global.should = chai.should();
+  global.expect = chai.expect;
+  global.assert = chai.assert;
+
+})();

www/lib/angular-chart.js/test/test.integration.js

@@ -0,0 +1,75 @@
+/*jshint node:true*/
+/*jshint mocha:true*/
+/*global assert:true*/
+describe('integration', function () {
+  'use strict';
+
+  var port = 8045; /* teststatic default port 8080 may be occupied on many systems */
+  var webshot = require('webshot'),
+      path = require('path'),
+      gm = require('gm'),
+      tmp = require('tmp-sync'),
+      mkdirp = require('mkdirp').sync,
+      cp = require('cp').sync,
+      imgur = require('imgur-node-api'),
+      server = require('testatic')('./', port),
+      WEBSHOT_OPTIONS = { renderDelay: process.env.DELAY || 2500, windowSize: { width: 1366, height: 768 }},
+      WEBSHOT_FAILED_DIR = path.join('test', 'fixtures', 'shots') + path.sep,
+      dir;
+
+  beforeEach(function () {
+    dir = tmp.in() + path.sep;
+  });
+
+  afterEach(function () {
+    tmp.clean();
+  });
+
+  after(function () {
+    server.close();
+  });
+
+  mkdirp(WEBSHOT_FAILED_DIR);
+
+  [
+    'bubble',
+    'dataset-override',
+    'horizontal-bar-chart',
+    '29-tabs',
+    '57-hex-colours',
+    '54-not-enough-colours',
+    '51-pie-update-colours',
+    'configure-line-chart',
+    'custom-directive',
+    'charts'
+  ].forEach(function (name) {
+    it('compares screenshots for: ' + name, function (done) {
+      var image = dir + name + '.png',
+          url = 'http://localhost:' + port + '/test/fixtures/' + name + '.html',
+          expected = path.join('test', 'fixtures', name + '.png');
+
+      webshot(url, image, WEBSHOT_OPTIONS, function (err) {
+        if (err) return done(err);
+        gm.compare(expected, image, process.env.TOLERANCE || 0.00001, function (err, isEqual) {
+          if (err) return done(err);
+          if (! isEqual) {
+            var failed = WEBSHOT_FAILED_DIR + name + '-failed.png',
+                msg = 'Expected screenshots to be similar. Screenshot saved to ' + failed;
+            cp(image, failed);
+            if (process.env.CI && process.env.IMGUR_ID) {
+              imgur.setClientID(process.env.IMGUR_ID);
+              imgur.upload(image, function (err, res) {
+                if (err) return done(err);
+                assert.fail(isEqual, true, msg + ', uploaded to ' + res.data.link);
+              });
+            } else {
+              assert.fail(isEqual, true, msg);
+            }
+            return;
+          }
+          done();
+        });
+      });
+    });
+  });
+});

www/lib/angular-chart.js/test/test.unit.js

@@ -0,0 +1,408 @@
+/*jshint mocha:true*/
+/*global module:true*/
+/*global inject:true*/
+/*global expect:true*/
+/*global sinon:true*/
+
+describe('Unit testing', function () {
+  'use strict';
+
+  var $compile, scope, sandbox, ChartJs, ChartJsProvider;
+
+  beforeEach(module('chart.js', function (_ChartJsProvider_) {
+    ChartJsProvider = _ChartJsProvider_;
+    ChartJsProvider.setOptions({ env: 'test', responsive: false });
+  }));
+
+  beforeEach(inject(function (_$compile_, _$rootScope_, _ChartJs_) {
+    // The injector unwraps the underscores (_) from around the parameter names when matching
+    $compile = _$compile_;
+    scope = _$rootScope_;
+    ChartJs = _ChartJs_;
+    sandbox = sinon.sandbox.create();
+  }));
+
+  afterEach(function () {
+    sandbox.restore();
+  });
+
+  describe('base', function () {
+    describe('chart types', function () {
+      ['line', 'bar', 'horizontalBar', 'radar', 'pie', 'doughnut', 'polarArea', 'bubble'].forEach(function (type) {
+        it('creates a ' + type + ' chart using the directive', function () {
+          var markup = '<canvas class="chart chart-' +
+            (type === 'polarArea' ? 'polar-area' : type === 'horizontalBar' ? 'horizontal-bar' : type) +
+              '" chart-data="data" chart-labels="labels"></canvas>';
+
+          if (['line', 'bar', 'horizontalBar', 'radar'].indexOf(type) > - 1) {
+            scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+            scope.data = [
+              [65, 59, 80, 81, 56, 55, 40],
+              [28, 48, 40, 19, 86, 27, 90]
+            ];
+          } else {
+            scope.labels = ['Downloads', 'In store', 'Mail orders'];
+            scope.data = [300, 500, 100];
+          }
+
+          var spyChart = sandbox.spy(ChartJs, 'Chart');
+
+          scope.$on('chart-create', function (evt, chart) {
+            expect(chart).to.be.an.instanceOf(Chart.Controller);
+          });
+
+          $compile(markup)(scope);
+          scope.$digest();
+
+          expect(spyChart).to.have.been.calledWithNew;
+          expect(spyChart).to.have.been.calledWithExactly(
+            sinon.match.any,
+            sinon.match({ type: type, data: sinon.match.object, options: sinon.match.object })
+          );
+        });
+
+        it('creates a ' + type + ' chart using the "chart-type" attribute', function () {
+          var markup = '<div style="width: 250px; height:120px">' +
+            '<canvas class="chart chart-base" chart-data="data" chart-labels="labels" ' +
+            'chart-type="type"></canvas></div>';
+
+          scope.type = type;
+
+          if (['line', 'bar', 'horizontalBar', 'radar'].indexOf(type) > - 1) {
+            scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+            scope.data = [
+              [65, 59, 80, 81, 56, 55, 40],
+              [28, 48, 40, 19, 86, 27, 90]
+            ];
+          } else {
+            scope.labels = ['Downloads', 'In store', 'Mail orders'];
+            scope.data = [300, 500, 100];
+          }
+
+          var spyChart = sandbox.spy(ChartJs, 'Chart');
+
+          scope.$on('chart-create', function (evt, chart) {
+            expect(chart).to.be.an.instanceOf(Chart.Controller);
+          });
+
+          $compile(markup)(scope);
+          scope.$digest();
+
+          expect(spyChart).to.have.been.calledWithNew;
+          expect(spyChart).to.have.been.calledWithExactly(
+            sinon.match.any,
+            sinon.match({ type: type, data: sinon.match.object, options: sinon.match.object })
+          );
+        });
+      });
+    });
+
+    describe('dataset override', function () {
+      it('overrides the datasets for complex charts', function () {
+        var datasets;
+        var markup = '<canvas class="chart chart-bar" chart-data="data" chart-labels="labels" ' +
+          'chart-dataset-override="datasetOverride"></canvas>';
+
+        scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+        scope.data = [
+          [65, -59, 80, 81, -56, 55, -40],
+          [28, 48, -40, 19, 86, 27, 90]
+        ];
+        scope.datasetOverride = [
+          {
+            label: 'Bar chart',
+            borderWidth: 1,
+            type: 'bar'
+          },
+          {
+            label: 'Line chart',
+            borderWidth: 3,
+            type: 'line'
+          }
+        ];
+
+        scope.$on('chart-create', function (evt, chart) {
+          datasets = chart.chart.config.data.datasets;
+        });
+
+        $compile(markup)(scope);
+        scope.$digest();
+
+        expect(datasets[0].label).to.equal('Bar chart');
+        expect(datasets[1].label).to.equal('Line chart');
+        expect(datasets[0].borderWidth).to.equal(1);
+        expect(datasets[1].borderWidth).to.equal(3);
+        expect(datasets[0].type).to.equal('bar');
+        expect(datasets[1].type).to.equal('line');
+      });
+
+      it('overrides the dataset for simple charts', function () {
+        var datasets;
+        var markup = '<canvas class="chart chart-doughnut" chart-data="data" chart-labels="labels" ' +
+          'chart-colors="colors" chart-dataset-override="datasetOverride"></canvas>';
+
+        scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];
+        scope.labels = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
+        scope.data = [350, 450, 100];
+        scope.datasetOverride = {
+          hoverBackgroundColor: ['#45b7cd', '#ff6384', '#ff8e72'],
+          hoverBorderColor: ['#45b7cd', '#ff6384', '#ff8e72']
+        };
+
+        scope.$on('chart-create', function (evt, chart) {
+          datasets = chart.chart.config.data.datasets;
+        });
+
+        $compile(markup)(scope);
+        scope.$digest();
+
+        expect(datasets[0].hoverBackgroundColor).to.deep.equal(['#45b7cd', '#ff6384', '#ff8e72']);
+        expect(datasets[0].hoverBorderColor).to.deep.equal(['#45b7cd', '#ff6384', '#ff8e72']);
+      });
+    });
+  });
+
+  describe('lifecycle', function () {
+    it('watches the attributes of the chart', function () {
+      var markup = '<div style="width: 250px; height:120px">' +
+        '<canvas class="chart chart-line" chart-data="data" chart-labels="labels" chart-type="type"></canvas></div>';
+
+      scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+      scope.data = [
+        [65, 59, 80, 81, 56, 55, 40],
+        [28, 48, 40, 19, 86, 27, 90]
+      ];
+
+      var spy = sandbox.spy(scope, '$watch');
+      $compile(markup)(scope);
+
+      // cannot get a hold of the child scope as it isn't created yet
+      // so cannot be more precise on expectations
+      expect(spy.calledThrice).to.be.true;
+    });
+
+    it('creates the chart only once', function () {
+      var markup = '<div style="width: 250px; height:120px">' +
+        '<canvas class="chart chart-line" chart-data="data" chart-labels="labels" ' +
+        'chart-series="series"></canvas></div>';
+      var count = 0;
+
+      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.$on('chart-create', function () {
+        count++;
+      });
+
+      $compile(markup)(scope);
+      scope.$digest();
+
+      expect(count).to.equal(1);
+    });
+
+    it('updates the chart', function () {
+      var markup = '<div style="width: 250px; height:120px">' +
+        '<canvas class="chart chart-line" chart-data="data" chart-labels="labels" ' +
+        'chart-series="series"></canvas></div>';
+      var count = 0;
+
+      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.$on('chart-update', function () {
+        count++;
+      });
+
+      $compile(markup)(scope);
+      scope.$digest();
+
+      scope.data = [
+        [28, 48, 40, 19, 86, 27, 90],
+        [65, 59, 80, 81, 56, 55, 40]
+      ];
+      scope.$digest();
+
+      expect(count).to.equal(1);
+    });
+
+    it('destroy the chart if all data is removed', function () {
+      var markup = '<div style="width: 250px; height:120px">' +
+        '<canvas class="chart chart-line" chart-data="data" chart-labels="labels"></canvas></div>';
+      var countCreate = 0, countUpdate = 0, countDestroy = 0;
+
+      scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+      scope.data = [
+        [65, 59, 80, 81, 56, 55, 40],
+        [28, 48, 40, 19, 86, 27, 90]
+      ];
+
+      scope.$on('chart-create', function () {
+        countCreate++;
+      });
+
+      scope.$on('chart-update', function () {
+        countUpdate++;
+      });
+
+      scope.$on('chart-destroy', function() {
+        countDestroy++;
+      });
+
+      $compile(markup)(scope);
+      scope.$digest();
+
+      scope.data = [];
+      scope.$digest();
+
+      expect(countCreate).to.equal(1);
+      expect(countUpdate).to.equal(0);
+      expect(countDestroy).to.equal(1);
+    });
+
+    it('re-create the chart if data added or removed', function () {
+      var markup = '<div style="width: 250px; height:120px">' +
+        '<canvas class="chart chart-line" chart-data="data" chart-labels="labels" ' +
+        'chart-series="series"></canvas></div>';
+      var countCreate = 0, countUpdate = 0, countDestroy = 0;
+
+      scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+      scope.data = [
+        [65, 59, 80, 81, 56, 55, 40],
+        [28, 48, 40, 19, 86, 27, 90]
+      ];
+
+      scope.$on('chart-create', function () {
+        countCreate++;
+      });
+
+      scope.$on('chart-update', function () {
+        countUpdate++;
+      });
+
+      scope.$on('chart-destroy', function() {
+        countDestroy++;
+      });
+
+      $compile(markup)(scope);
+      scope.$digest();
+
+      scope.data = [
+        [28, 48, 40, 19, 86, 27, 90],
+        [65, 59, 80, 81, 56, 55, 40],
+        [65, 59, 80, 81, 56, 55, 40]
+      ];
+      scope.$digest();
+
+      expect(countCreate).to.equal(2);
+      expect(countUpdate).to.equal(0);
+      expect(countDestroy).to.equal(1);
+    });
+
+    it('should allow to set a configuration', function () {
+      ChartJsProvider.setOptions({responsive: false});
+      expect(ChartJs.getOptions().responsive).to.equal(false);
+      expect(ChartJs.getOptions('Line').responsive).to.equal(false);
+      ChartJsProvider.setOptions({responsive: true});
+      expect(ChartJs.getOptions().responsive).to.equal(true);
+      expect(ChartJs.getOptions('Line').responsive).to.equal(true);
+    });
+
+    it('should allow to set a configuration for a chart type', function () {
+      ChartJsProvider.setOptions('Line', {responsive: false});
+      expect(ChartJs.getOptions('Line').responsive).to.equal(false);
+      ChartJsProvider.setOptions('Line', {responsive: true});
+      expect(ChartJs.getOptions('Line').responsive).to.equal(true);
+    });
+
+    ['labels', 'colors', 'series', 'options'].forEach(function (attr) {
+      it('re-creates the chart on ' + attr + ' changes', function () {
+        var markup = '<div style="width: 250px; height:120px">' +
+          '<canvas class="chart chart-line" chart-data="data" chart-labels="labels" chart-series="series" ' +
+            'chart-colors="colors" chart-options="options"></canvas></div>';
+        var count = 0;
+
+        scope.options = { scaleShowVerticalLines: false };
+        scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+        scope.series = ['Series A', 'Series B'];
+        scope.colors = ['#45b7cd', '#ff6384'];
+        scope.data = [
+          [65, 59, 80, 81, 56, 55, 40],
+          [28, 48, 40, 19, 86, 27, 90]
+        ];
+        scope.$on('chart-create', function () {
+          count++;
+        });
+
+        $compile(markup)(scope);
+        scope.$digest();
+
+        switch (attr) {
+          case 'labels':
+            scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+            break;
+          case 'colors':
+            scope.colors = ['#ff6384', '#ff8e72'];
+            break;
+          case 'series':
+            scope.series = ['Series C', 'Series D'];
+            break;
+          case 'options':
+            scope.options = { scaleShowVerticalLines: true };
+            break;
+        }
+        scope.$digest();
+
+        expect(count).to.equal(2);
+      });
+    });
+
+    ['labels', 'colors', 'series', 'options'].forEach(function (attr) {
+      it('does not re-create the chart on ' + attr + ' not changed', function () {
+        var markup = '<div style="width: 250px; height:120px">' +
+          '<canvas class="chart chart-line" chart-data="data" chart-labels="labels" chart-series="series" ' +
+            'chart-colors="colors" chart-options="options"></canvas></div>';
+        var count = 0;
+
+        scope.options = { scaleShowVerticalLines: false };
+        scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+        scope.series = ['Series A', 'Series B'];
+        scope.colors = ['#45b7cd', '#ff6384'];
+        scope.data = [
+          [65, 59, 80, 81, 56, 55, 40],
+          [28, 48, 40, 19, 86, 27, 90]
+        ];
+        scope.$on('chart-create', function () {
+          count++;
+        });
+
+        $compile(markup)(scope);
+        scope.$digest();
+
+        switch (attr) {
+          case 'labels':
+            scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+            break;
+          case 'colors':
+            scope.colors = ['#45b7cd', '#ff6384'];
+            break;
+          case 'series':
+            scope.series = ['Series A', 'Series B'];
+            break;
+          case 'options':
+            scope.options = { scaleShowVerticalLines: false };
+            break;
+        }
+        scope.$digest();
+
+        expect(count).to.equal(1);
+      });
+    });
+  });
+});

www/lib/angular-chart.js/tmp/Dockerfile-alpine

@@ -0,0 +1,15 @@
+#FROM rafakato/alpine-graphicsmagick
+RUN apk add --update --no-cache \
+	build-base \
+	python \
+	git \
+	nodejs \
+	curl \
+	ca-certificates
+WORKDIR /src
+ADD . ./
+RUN adduser -S node
+RUN chown -R node /src
+USER node
+RUN npm install && npm install bower && ./node_modules/bower/bin/bower install
+CMD ["npm", "test"]

www/lib/angular-chart.js/tmp/gradient.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>Charts in tabs</title>
+  <link rel="stylesheet" href="../dist/angular-chart.css">
+  <link href="../examples/bootstrap.css" rel="stylesheet">
+</head>
+<body ng-app="gradient">
+<br/>
+<div id="container" class="container">
+  <div class="row" ng-controller="LineCtrl">
+    <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="true"
+            chart-series="series" chart-colours="colours">
+    </canvas>
+  </div>
+</div>
+
+<script src="../node_modules/angular/angular.js"></script>
+<script src="../node_modules/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
+<script src="../node_modules/chart.js/Chart.js"></script>
+<script src="../angular-chart.js"></script>
+<script src="gradient.js"></script>
+</body>
+</html>
+

www/lib/angular-chart.js/tmp/gradient.js

@@ -0,0 +1,29 @@
+angular.module('gradient', ['chart.js']).controller('LineCtrl', function ($scope) {
+
+  $scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+  $scope.series = ['Series A'];
+
+  $scope.data = [
+    [1164445, 3444359, 3444380, 444481, 566556, 552255, 466440]
+  ];
+
+  var ctx = document.getElementById('line').getContext('2d');
+
+  var gradient = ctx.createLinearGradient(0, 0, 0, 400);
+  gradient.addColorStop(0, 'rgba(243, 103, 101,0.5)');
+  gradient.addColorStop(1, 'rgba(0, 89, 179,0.5)');
+
+  $scope.colours = [{
+    fillColor : gradient, // Put the gradient here as a fill color
+    strokeColor : 'rgba(151,187,205,1)',
+    pointColor : '#fff',
+    pointStrokeColor : '#fff',
+    pointHighlightFill: '#fff',
+    pointHighlightStroke: 'rgba(151,187,205,1)'
+  }];
+
+  $scope.$on('create', function (evt, chart) {
+
+  })
+
+});

www/templates/pokemonliste/html/pokemon-detail.html

@@ -40,15 +40,13 @@
                         <div class="col-66 itemfontsize">Fluchtchance:</div>
                         <div class="col-33 itemfontsize">{{pokemon.pokemonfluchtchance}}%</div>
                     </div>
-                    <div class="row">
+                    <div class="row" ng-if="pokemon.pokemoneidistanz > 0">
                         <div class="col-66 itemfontsize">Ei-Distanz:</div>
                         <div class="col-33 itemfontsize">{{pokemon.pokemoneidistanz}} Km</div>
                     </div>
-                    <div class="row">
-                        <div class="col-100 itemfontsize">Entw. ab:</div>
-                    </div>
-                    <div class="row">
-                        <div class="col-100 itemfontsize">{{pokemon.pokemonentwicklungtext}} Bonbons</div>
+                    <div class="row" ng-if="pokemon.pokemonentwicklungtext > 0">
+                        <div class="col-66 itemfontsize">Entwicklung:</div>
+                        <div class="col-33 itemfontsize">{{pokemon.pokemonentwicklungtext}} <img src="img/bonbon.png" style="padding-top:3px;"></div>
                     </div>
                 </div>
             </div>
@@ -75,29 +73,152 @@
         </div>
 
     </div>
+    <!-- Pokemon Detail ENDE -->
 
+<!-- Pokemon Entwicklung -->
 <div class="card">
   <div class="item item-divider">
     Entwicklung
   </div>
     <md-list>
         <div class="row" ng-repeat="pokemonentwicklung in pokemonentwicklungliste"  style="font-size: 10px;">
-            
-        <div class="col-33 col-center"></div>
-        <div class="col-33 col-center">
-             <div>
-                <p ng-if="pokemonentwicklung.pokemonlistentyp == 2">{{ pokemonentwicklung.pokemonpokedexid }} Bonbons</p>
+
+            <div class="col-33 col-center"></div>
+            <div class="col-33 col-center">
+                <div class="divcenter">
+                    <p ng-if="pokemonentwicklung.pokemonlistentyp == 2">{{ pokemonentwicklung.pokemonpokedexid }} Bonbons</p>
+                    <img ng-if="pokemonentwicklung.pokemonlistentyp == 2" src="img/arrow_down.png" width="64" height="64">
+                    <img ng-if="pokemonentwicklung.pokemonlistentyp == 1" src="{{pokemonentwicklung.pokemonimage}}" width="64" height="64">
+                    <p ng-if="pokemonentwicklung.pokemonlistentyp == 1">{{ pokemonentwicklung.pokemonname }} </p>
+                </div>
+            </div>
+            <div class="col-33 col-center"></div>
+
+        </div>
+        <div class="row" style="font-size: 10px;">
+        <div ng-repeat="pokemonentwicklung in pokemonentwicklunglisteonestep" class="col col-center">
+             <div class="divcenter">
                 <img ng-if="pokemonentwicklung.pokemonlistentyp == 1" src="{{pokemonentwicklung.pokemonimage}}" width="64" height="64">
-                <p ng-if="pokemonentwicklung.pokemonlistentyp == 1">Pokedex-ID: {{ pokemonentwicklung.pokemonpokedexid }} </p>
+                <p ng-if="pokemonentwicklung.pokemonlistentyp == 1">{{ pokemonentwicklung.pokemonname }} </p>
             </div>
         </div>
-        <div class="col-33 col-center"></div>
+        </div>
+
+    </md-list>
+</div>
+<!-- Pokemon Entwicklung ENDE -->
+
+<!-- Pokemon Standard Attacken -->
+<div class="card">
+  <div class="item item-divider">
+    Standard Attacken
+  </div>
+        <div class="row" style="font-size: 10px;">
+
+        <div class="col-25 col-center">
+            <strong>Attacke</strong>
+        </div>
+        <div class="col-20 col-center">
+            <strong>Typ</strong>
+        </div>
+        <div class="col col-center mycenter">
+            <strong>Stärke</strong>
+        </div>
+        <div class="col col-center mycenter">
+            <strong>Energie</strong>
+        </div>
+        <div class="col col-center mycenter">
+            <strong>Dauer</strong>
+        </div>
+
+        </div>
+    <md-list>
+        <div class="row" ng-repeat="pokemonattacke in pokemonattackenliste" style="font-size: 10px;">
+
+        <div class="col-25 col-center">
+            {{ pokemonattacke.pokemonattacke }}
+        </div>
+        <div class="col-20 col-center">
+            <div class="pokemontypsx pokemontyp{{ pokemonattacke.pokemonattacketyp}}" style="margin: 0 auto; width:97%;">
+                <img src="img/typbilder/{{ pokemonattacke.pokemonattacketyp}}.png" alt="PokemonTyp" width="32" height="32">
+                        {{ pokemonattacke.pokemonattacketyptext }}
+            </div>
+        </div>
+        <div class="col col-center mycenter">
+            {{ pokemonattacke.pokemonattackestaerke }}
+        </div>
+        <div class="col col-center mycenter">
+            {{ pokemonattacke.pokemonattackeenergie }}%
+        </div>
+        <div class="col col-center mycenter">
+            {{ pokemonattacke.pokemonattackedauer }} Sek.
+        </div>
 
         </div>
     </md-list>
 </div>
+<!-- Pokemon Standard Attacken ENDE-->
 
 
+<!-- Pokemon Entlade Attacken -->
+<div class="card">
+  <div class="item item-divider">
+    Entlade Attacken
+  </div>
+        <div class="row" style="font-size: 10px;">
+
+        <div class="col-25 col-center">
+            <strong>Attacke</strong>
+        </div>
+        <div class="col-20 col-center">
+            <strong>Typ</strong>
+        </div>
+        <div class="col col-center mycenter">
+            <strong>Stärke</strong>
+        </div>
+        <div class="col col-center mycenter">
+            <strong>Volltreffer</strong>
+        </div>
+        <div class="col col-center mycenter">
+            <strong>Energie</strong>
+        </div>
+        <div class="col col-center mycenter">
+            <strong>Dauer</strong>
+        </div>
+
+        </div>
+    <md-list>
+        <div class="row" ng-repeat="pokemonattacke in pokemonentladeattackenliste" style="font-size: 10px;">
+
+        <div class="col-25 col-center">
+            {{ pokemonattacke.pokemonattacke }}
+        </div>
+        <div class="col-20 col-center">
+            <div class="pokemontypsx pokemontyp{{ pokemonattacke.pokemonattacketyp}}" style="margin: 0 auto; width:97%;">
+                <img src="img/typbilder/{{ pokemonattacke.pokemonattacketyp}}.png" alt="PokemonTyp" width="32" height="32">
+                        {{ pokemonattacke.pokemonattacketyptext }}
+            </div>
+        </div>
+        <div class="col col-center mycenter">
+            {{ pokemonattacke.pokemonattackestaerke }}
+        </div>
+        <div class="col col-center mycenter">
+            {{ pokemonattacke.pokemonattackevolltreffer }}%
+        </div>
+        <div class="col col-center mycenter">
+            {{ pokemonattacke.pokemonattackeenergie }}%
+        </div>
+        <div class="col col-center mycenter">
+            {{ pokemonattacke.pokemonattackedauer }} Sek.
+        </div>
+
+        </div>
+    </md-list>
+</div>
+<!-- Pokemon Entlade Attacken ENDE -->
+
+
+<!-- Pokemon Schaden Tabelle -->
 <div class="card">
   <div class="item item-divider">
     Schaden durch Attacken-Typ
@@ -155,56 +276,71 @@
         </md-list-item>
     </md-list>
 </div>
+<!-- Pokemon Schaden Tabelle ENDE-->
 
+<!-- Pokemon Basis Werte -->
 <div class="card">
   <div class="item item-divider">
-    Standard Attacken
+    Basis-Statuswerte
+  </div>
+
+        <div class="row" style="font-size: 10px;">
+            <div class="col-50 col-center">
+                <canvas id="polar-area" class="chart chart-polar-area" chart-data="data" chart-labels="labels" legend="true" chart-options="options">
+                </canvas> 
+            </div>
+            <div class="col-50 col-center">
+                <canvas id="pie" class="chart chart-pie"
+                    chart-data="data" chart-labels="labels" chart-options="options">
+                </canvas> 
+            </div>
+        </div>
+
+        <div class="row" style="font-size: 10px;">
+            <div class="col-100 col-center">
+                <canvas id="base" class="chart-horizontal-bar"
+                    chart-data="datafull" chart-labels="labelsfull" >
+                </canvas> 
+            </div>
+        </div>
+</div>
+<!-- Pokemon Basis Werte Ende-->
+
+<!-- Pokemon Levelup Tabelle -->
+<div class="card">
+  <div class="item item-divider">
+    Max. Statuswerte
   </div>
         <div class="row" style="font-size: 10px;">
 
-        <div class="col-25 col-center">
-            <strong>Attacke</strong>
-        </div>
-        <div class="col-20 col-center">
-            <strong>Typ</strong>
-        </div>
-        <div class="col-10 col-center mycenter">
-            <strong>Stärke</strong>
-        </div>
-        <div class="col-20 col-center mycenter">
-            <strong>Energie</strong>
-        </div>
-        <div class="col-20 col-center mycenter">
-            <strong>Dauer</strong>
-        </div>
+            <div class="col-50 col-center">
+                <strong>Trainer-Lever / Powerups</strong>
+            </div>
+            <div class="col-25 col-center">
+                <strong>Max. KP</strong>
+            </div>
+            <div class="col-25 col-center mycenter">
+                <strong>Max. WP</strong>
+            </div>
 
         </div>
     <md-list>
-        <div class="row" ng-repeat="pokemonattacke in pokemonattackenliste" style="font-size: 10px;">
+        <div class="row" ng-repeat="statuswert in pokemonmaxstatuswerteliste" style="font-size: 10px;" ng-class-odd="'listbackodd'" ng-class-even="'listbackeven'">
 
-        <div class="col-25 col-center">
-            {{ pokemonattacke.pokemonattacke }}
-        </div>
-        <div class="col-20 col-center">
-            <div class="pokemontypsx pokemontyp{{ pokemonattacke.pokemonattacketyp}}" style="margin: 0 auto; width:97%;">
-                <img src="img/typbilder/{{ pokemonattacke.pokemonattacketyp}}.png" alt="PokemonTyp" width="32" height="32">
-                        {{ pokemonattacke.pokemonattacketyptext }}
+            <div class="col-50 col-center mycenter">
+                {{ statuswert.pokemontrainerlevel }}
+            </div>
+            <div class="col-25 col-center mycenter">
+                {{ statuswert.pokemonmaxkp }}
+            </div>
+            <div class="col-25 col-center mycenter">
+                {{ statuswert.pokemonmaxwp }}
             </div>
-        </div>
-        <div class="col-10 col-center mycenter">
-            {{ pokemonattacke.pokemonattackestaerke }}
-        </div>
-        <div class="col-20 col-center mycenter">
-            {{ pokemonattacke.pokemonattackeenergie }}%
-        </div>
-        <div class="col-20 col-center mycenter">
-            {{ pokemonattacke.pokemonattackedauer }} Sek.
-        </div>
 
         </div>
     </md-list>
 </div>
-
+<!-- Pokemon Levelup Tabelle ENDE-->
 
     </ion-content>
         <div class="footer-fab-bar">

www/templates/pokemonliste/js/controllers.js

@@ -106,6 +106,14 @@ appControllers.controller('pokemonDetailCtrl', function ($mdBottomSheet, $mdToas
         $scope.pokemonschwaechenliste = [];
         $scope.pokemonattackenliste = [];
         $scope.pokemonentwicklungliste = [];
+        $scope.pokemonentwicklunglisteonestep = [];
+        $scope.pokemonmaxstatuswerteliste = [];
+        $scope.pokemonentladeattackenliste = [];
+        $scope.labels=[];
+        $scope.data=[];
+        $scope.datafull=[];
+        $scope.labelsfull=[];
+
         // $scope.pokemon is the variable that store pokemon detail data that receive form pokemon list page.
         // Parameter :  
         // $stateParams.pokemondetail(object) = pokemon that user select from pokemon list page.
@@ -115,7 +123,7 @@ appControllers.controller('pokemonDetailCtrl', function ($mdBottomSheet, $mdToas
         if (entwarr!=''){
             var entwarr = $scope.pokemon.pokemonentwicklung.split("|");
             var entwkostenarr=$scope.pokemon.pokemonentwicklungkosten.split("|");
-            var index;
+            var index,indexonestep;
    
             for (index = 0; index < entwarr.length; ++index) {
             
@@ -126,6 +134,7 @@ appControllers.controller('pokemonDetailCtrl', function ($mdBottomSheet, $mdToas
                 var dataItemEntwicklung = {
                     pokemonpokedexid    : entwarr[index]     ,
                     pokemonimage    : $scope.getPokemonImage(entwarr[index]),
+                    pokemonname    : $scope.getPokemonName(entwarr[index]),
                     pokemonentwickstufe  :1,
                     pokemonlistentyp   : 1   
                 }; 
@@ -142,21 +151,29 @@ appControllers.controller('pokemonDetailCtrl', function ($mdBottomSheet, $mdToas
                 }
                 }//if
                 else{
-                var res=dummystring.replace("#", "");
-                var dataItemEntwicklung = {
-                    pokemonpokedexid    : res     ,
-                    pokemonimage    : $scope.getPokemonImage(res),
-                    pokemonentwickstufe  :2,
-                    pokemonlistentyp   : 1   
-                }; 
-                $scope.pokemonentwicklungliste.push(dataItemEntwicklung);
+                var entwarronstep = dummystring.split("#");
+                    
+                    for (indexonestep = 1; indexonestep < entwarronstep.length; ++indexonestep) {
+                        var dataItemEntwicklung = {
+                            pokemonpokedexid    : entwarronstep[indexonestep]     ,
+                            pokemonimage    : $scope.getPokemonImage(entwarronstep[indexonestep]),
+                            pokemonname    : $scope.getPokemonName(entwarronstep[indexonestep]),
+                            pokemonentwickstufe  :2,
+                            pokemonlistentyp   : 1   
+                        }; 
+                        $scope.pokemonentwicklunglisteonestep.push(dataItemEntwicklung);
+                    }//for2
+
                 }
 
             }//for
 
 
+            $scope.labels = ["KP", "Angriff", "Verteidigung"];
+            $scope.data = [$scope.pokemon.pokemonkp, $scope.pokemon.pokemonattack, $scope.pokemon.pokemondefense];
 
-
+            $scope.labelsfull = ["KP (" + $scope.pokemon.pokemonkp + ")", "Angriff (" + $scope.pokemon.pokemonattack + ")", "Verteidigung (" + $scope.pokemon.pokemondefense + ")", "Summe"];
+            $scope.datafull = [$scope.pokemon.pokemonkp, $scope.pokemon.pokemonattack, $scope.pokemon.pokemondefense, $scope.pokemon.pokemonsumme];
 
         }
         //$scope.actionDelete is the variable for allow or not allow to delete data.
@@ -164,6 +181,8 @@ appControllers.controller('pokemonDetailCtrl', function ($mdBottomSheet, $mdToas
         $timeout(function () {
             $scope.getTypenEffekt($scope.pokemon.pokedexid);
             $scope.getStandardAttacken($scope.pokemon.pokedexid);
+            $scope.getEntladeAttacken($scope.pokemon.pokedexid);
+            $scope.getMaxStatuswerte($scope.pokemon.pokedexid);
         }, 1000);
 
     }; //End initialForm.
@@ -186,11 +205,30 @@ appControllers.controller('pokemonDetailCtrl', function ($mdBottomSheet, $mdToas
         return pokedexDB.getPokemonImage(pokedexid);
     };//End getPokemonList.
 
+    // getPokemonList is for get all pokemons. 
+    // By calling pokedexDB.all() service.
+    $scope.getPokemonName = function (pokedexid) {
+        return pokedexDB.getPokemonName(pokedexid);
+    };//End getPokemonList.
+
     // getPokemonList is for get all pokemons. 
     // By calling pokedexDB.all() service.
     $scope.getStandardAttacken = function (pokedexid) {
         $scope.pokemonattackenliste = pokedexDB.getStandardAttacken(pokedexid);
     };//End getPokemonList.
+
+    // getPokemonList is for get all pokemons. 
+    // By calling pokedexDB.all() service.
+    $scope.getEntladeAttacken = function (pokedexid) {
+        $scope.pokemonentladeattackenliste = pokedexDB.getEntladeAttacken(pokedexid);
+    };//End getPokemonList.
+
+    // getPokemonList is for get all pokemons. 
+    // By calling pokedexDB.all() service.
+    $scope.getMaxStatuswerte = function (pokedexid) {
+        $scope.pokemonmaxstatuswerteliste = pokedexDB.getMaxStatuswerte(pokedexid);
+    };//End getPokemonList.
+
     // showListBottomSheet is for showing the bottom sheet.
     // Parameter :  
     // $event(object) = position of control that user tap.

www/templates/pokemonliste/js/services.js

@@ -42,6 +42,10 @@ appServices.factory('pokedexDB', function ($cordovaSQLite)
    var pokemonstandardattackenliste= [];
    var pokemonfundorte = [];
    var pokemonimages = [];
+   var pokemonmaxstatuswerte = [];
+   var pokemonentladeattackenliste = [];
+   var pokemonname = [];
+   
 
     return {
         // Select all data from sqlite
@@ -51,7 +55,8 @@ appServices.factory('pokedexDB', function ($cordovaSQLite)
             pokemontypen = [];
             pokemonfundorte = [];
             pokemonimages = [];
-            
+            pokemonname = [];
+
             //Typen einlesen
             var query = "SELECT * FROM tblPokemonTyp order by ID ASC";
             $cordovaSQLite.execute(db, query).then(function (res)
@@ -89,6 +94,7 @@ appServices.factory('pokedexDB', function ($cordovaSQLite)
                 if (res.rows.length > 0)
                 {
                     pokemonimages.push('');
+                    pokemonname.push('');
                     for (var i = 0; i < res.rows.length; i++)
                     {
                         var dummypokedexid='';
@@ -128,11 +134,16 @@ appServices.factory('pokedexDB', function ($cordovaSQLite)
                             pokemonentwicklungtext   : res.rows.item(i).POKEMONENTWICKLUNGTEXT    ,
                             pokemonentwicklung   : res.rows.item(i).POKEMONENTWICKLUNG    ,
                             pokemonentwicklungkosten   : res.rows.item(i).POKEMONENTWICKLUNGKOSTEN    ,
+                            pokemonkp   : res.rows.item(i).POKEMONKP    ,
+                            pokemonattack   : res.rows.item(i).POKEMONATTACK    ,
+                            pokemondefense   : res.rows.item(i).POKEMONDEFENSE    ,
+                            pokemonsumme   :   res.rows.item(i).POKEMONKP + res.rows.item(i).POKEMONATTACK + res.rows.item(i).POKEMONDEFENSE ,
                             pokemontext   : res.rows.item(i).POKEMONTEXT    ,
                             pokemonnote   : res.rows.item(i).POKEMONNOTE    ,
                             pokemonimage  : res.rows.item(i).POKEMONIMAGE
                         };
                         pokemonimages.push(res.rows.item(i).POKEMONIMAGE);
+                        pokemonname.push(res.rows.item(i).POKEMONNAME);
                         pokemonList.push(dataItem);
                     }
                 }
@@ -243,6 +254,10 @@ appServices.factory('pokedexDB', function ($cordovaSQLite)
         {
             return pokemonimages[pokedexid];
         },
+        getPokemonName: function (pokedexid)
+        {
+            return pokemonname[pokedexid];
+        },
         getStandardAttacken: function (pokedexid)
         {
             
@@ -271,6 +286,60 @@ appServices.factory('pokedexDB', function ($cordovaSQLite)
             });
             return pokemonstandardattackenliste;
         },
+        getEntladeAttacken: function (pokedexid)
+        {
+            
+            pokemonentladeattackenliste = [];
+
+            var query = "SELECT * FROM tblPokemonEntladeAttacken WHERE POKEDEXID= ?";
+            // Execute query statement from query variable.
+            $cordovaSQLite.execute(db, query,[pokedexid]).then(function (res)
+            {
+                if (res.rows.length > 0)
+                {
+                    for (var i = 0; i < res.rows.length; i++)
+                    {
+                        var dataItem = {
+                            pokemonattacke    : res.rows.item(i).ATTACKE     ,
+                            pokemonattacketyp    : res.rows.item(i).TYP     ,
+                            pokemonattacketyptext    : pokemontypen[res.rows.item(i).TYP]     ,
+                            pokemonattackestaerke    : res.rows.item(i).STAERKE     ,
+                            pokemonattackevolltreffer    : res.rows.item(i).VOLLTREFFER     ,
+                            pokemonattackeenergie    : res.rows.item(i).ENERGIE     ,
+                            pokemonattackedauer    : res.rows.item(i).DAUER
+                        };
+                        pokemonentladeattackenliste.push(dataItem);
+         
+                    }
+                }
+            });
+            return pokemonentladeattackenliste;
+        },
+        getMaxStatuswerte: function (pokedexid)
+        {
+            
+            pokemonmaxstatuswerte = [];
+
+            var query = "SELECT * FROM tblPokemonMaxStatuswerte WHERE POKEDEXID= ? ORDER BY ID ASC";
+            // Execute query statement from query variable.
+            $cordovaSQLite.execute(db, query,[pokedexid]).then(function (res)
+            {
+                if (res.rows.length > 0)
+                {
+                    for (var i = 0; i < res.rows.length; i++)
+                    {
+                        var dataItem = {
+                            pokemontrainerlevel    : res.rows.item(i).TRAINERLEVELPOPUP     ,
+                            pokemonmaxkp    : res.rows.item(i).MAXKP     ,
+                            pokemonmaxwp    : res.rows.item(i).MAXWP
+                        };
+                        pokemonmaxstatuswerte.push(dataItem);
+         
+                    }
+                }
+            });
+            return pokemonmaxstatuswerte;
+        },
         // To add data to sqlite.
         // It will receive newContract from controller then insert it into sqlite.
         add: function (newContract)