Tabellepflege abgeschlossen, Entwicklung eingebunden, Basiswerte und CSS-Fixes
This commit is contained in:
Hilmer, Carsten
parent
71867b9087
commit
fa55d4fee9
@ -3,11 +3,12 @@
|
|||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
"description": "IonicMaterialDesign: An Ionic project",
|
"description": "IonicMaterialDesign: An Ionic project",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"angular-chart.js": "^1.0.2",
|
||||||
"gulp": "^3.5.6",
|
"gulp": "^3.5.6",
|
||||||
"gulp-sass": "^2.0.4",
|
|
||||||
"gulp-concat": "^2.2.0",
|
"gulp-concat": "^2.2.0",
|
||||||
"gulp-minify-css": "^0.3.0",
|
"gulp-minify-css": "^0.3.0",
|
||||||
"gulp-rename": "^1.2.0"
|
"gulp-rename": "^1.2.0",
|
||||||
|
"gulp-sass": "^2.0.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"bower": "^1.3.3",
|
"bower": "^1.3.3",
|
||||||
|
|||||||
@ -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 {
|
.image-list-thumb {
|
||||||
padding: 2px 2px 2px 2px;
|
padding: 2px 2px 2px 2px;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
|
|||||||
BIN
www/img/arrow_down.png
Normal file
BIN
www/img/arrow_down.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 686 B |
BIN
www/img/bonbon.png
Normal file
BIN
www/img/bonbon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 526 B |
@ -33,6 +33,8 @@
|
|||||||
<script src="lib/angular-messages/angular-messages.js"></script>
|
<script src="lib/angular-messages/angular-messages.js"></script>
|
||||||
<script src="lib/angular-aria/angular-aria.js"></script>
|
<script src="lib/angular-aria/angular-aria.js"></script>
|
||||||
<script src="lib/angular-material/angular-material.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 -->
|
<!-- end Angular javascript lib -->
|
||||||
|
|
||||||
<!-- Cordova script (this will be a 404 during development) -->
|
<!-- Cordova script (this will be a 404 during development) -->
|
||||||
|
|||||||
@ -39,7 +39,7 @@ window.globalVariable = {
|
|||||||
};// End Global variable
|
};// 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) {
|
.run(function ($ionicPlatform, $cordovaSQLite, $rootScope, $ionicHistory, $state, $mdDialog, $mdBottomSheet) {
|
||||||
|
|
||||||
//Create database table of contracts by using sqlite database.
|
//Create database table of contracts by using sqlite database.
|
||||||
|
|||||||
10
www/lib/angular-chart.js/.codeclimate.yml
Normal file
10
www/lib/angular-chart.js/.codeclimate.yml
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
languages:
|
||||||
|
Ruby: false
|
||||||
|
JavaScript: true
|
||||||
|
PHP: false
|
||||||
|
exclude_paths:
|
||||||
|
- "dist/*"
|
||||||
|
- "node_modules/*"
|
||||||
|
- "gulpfile.js"
|
||||||
|
- "examples/*"
|
||||||
|
- "test/fixtures/coverage.js"
|
||||||
2
www/lib/angular-chart.js/.dockerignore
Normal file
2
www/lib/angular-chart.js/.dockerignore
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
coverage/
|
||||||
|
node_modules/
|
||||||
18
www/lib/angular-chart.js/.editorconfig
Normal file
18
www/lib/angular-chart.js/.editorconfig
Normal file
@ -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
|
||||||
82
www/lib/angular-chart.js/.jscsrc
Normal file
82
www/lib/angular-chart.js/.jscsrc
Normal file
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
9
www/lib/angular-chart.js/.jshintignore
Normal file
9
www/lib/angular-chart.js/.jshintignore
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
tmp/
|
||||||
|
examples/bundle.js
|
||||||
|
examples/commonjs.bundle.js
|
||||||
|
examples/smoothscroll.min.js
|
||||||
|
coverage/
|
||||||
|
test/fixtures/coverage.js
|
||||||
|
|
||||||
24
www/lib/angular-chart.js/.jshintrc
Normal file
24
www/lib/angular-chart.js/.jshintrc
Normal file
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
1
www/lib/angular-chart.js/.node-version
Normal file
1
www/lib/angular-chart.js/.node-version
Normal file
@ -0,0 +1 @@
|
|||||||
|
4.4.3
|
||||||
6
www/lib/angular-chart.js/.npmignore
Normal file
6
www/lib/angular-chart.js/.npmignore
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
.idea/
|
||||||
|
node_modules/
|
||||||
|
test/fixtures/shots/
|
||||||
|
coverage/
|
||||||
|
examples/bundle.js
|
||||||
|
examples/commonjs.bundle.js
|
||||||
19
www/lib/angular-chart.js/.travis.yml
Normal file
19
www/lib/angular-chart.js/.travis.yml
Normal file
@ -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
|
||||||
9
www/lib/angular-chart.js/CONTRIBUTING.md
Normal file
9
www/lib/angular-chart.js/CONTRIBUTING.md
Normal file
@ -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
|
||||||
7
www/lib/angular-chart.js/Dockerfile
Normal file
7
www/lib/angular-chart.js/Dockerfile
Normal file
@ -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"]
|
||||||
39
www/lib/angular-chart.js/ISSUE_TEMPLATE.md
Normal file
39
www/lib/angular-chart.js/ISSUE_TEMPLATE.md
Normal file
@ -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.
|
||||||
|
|
||||||
|
|
||||||
27
www/lib/angular-chart.js/LICENSE
Normal file
27
www/lib/angular-chart.js/LICENSE
Normal file
@ -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.
|
||||||
15
www/lib/angular-chart.js/PULL_REQUEST_TEMPLATE.md
Normal file
15
www/lib/angular-chart.js/PULL_REQUEST_TEMPLATE.md
Normal file
@ -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?
|
||||||
249
www/lib/angular-chart.js/README.md
Normal file
249
www/lib/angular-chart.js/README.md
Normal file
@ -0,0 +1,249 @@
|
|||||||
|
# angular-chart.js
|
||||||
|
|
||||||
|
[](http://badge.fury.io/bo/angular-chart.js)
|
||||||
|
[](http://badge.fury.io/js/angular-chart.js)
|
||||||
|
[](https://travis-ci.org/jtblin/angular-chart.js)
|
||||||
|
[](https://www.codacy.com/app/jtblin/angular-chart-js)
|
||||||
|
[](https://codeclimate.com/github/jtblin/angular-chart.js)
|
||||||
|
[](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.
|
||||||
365
www/lib/angular-chart.js/angular-chart.js
vendored
Normal file
365
www/lib/angular-chart.js/angular-chart.js
vendored
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}));
|
||||||
51
www/lib/angular-chart.js/bower.json
Normal file
51
www/lib/angular-chart.js/bower.json
Normal file
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
374
www/lib/angular-chart.js/dist/angular-chart.js
vendored
Normal file
374
www/lib/angular-chart.js/dist/angular-chart.js
vendored
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}));
|
||||||
BIN
www/lib/angular-chart.js/dist/angular-chart.js.tar.gz
vendored
Normal file
BIN
www/lib/angular-chart.js/dist/angular-chart.js.tar.gz
vendored
Normal file
Binary file not shown.
11
www/lib/angular-chart.js/dist/angular-chart.min.js
vendored
Normal file
11
www/lib/angular-chart.js/dist/angular-chart.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
www/lib/angular-chart.js/dist/angular-chart.min.js.map
vendored
Normal file
1
www/lib/angular-chart.js/dist/angular-chart.min.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
25
www/lib/angular-chart.js/examples/amd.html
Normal file
25
www/lib/angular-chart.js/examples/amd.html
Normal file
@ -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>
|
||||||
32
www/lib/angular-chart.js/examples/amd.js
Normal file
32
www/lib/angular-chart.js/examples/amd.js
Normal file
@ -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]
|
||||||
|
];
|
||||||
|
}]);
|
||||||
|
});
|
||||||
|
|
||||||
|
})();
|
||||||
80
www/lib/angular-chart.js/examples/app.css
Normal file
80
www/lib/angular-chart.js/examples/app.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
311
www/lib/angular-chart.js/examples/app.js
Normal file
311
www/lib/angular-chart.js/examples/app.js
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
})();
|
||||||
5785
www/lib/angular-chart.js/examples/bootstrap.css
vendored
Normal file
5785
www/lib/angular-chart.js/examples/bootstrap.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
29
www/lib/angular-chart.js/examples/bubble.html
Normal file
29
www/lib/angular-chart.js/examples/bubble.html
Normal file
@ -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>
|
||||||
55
www/lib/angular-chart.js/examples/bubble.js
Normal file
55
www/lib/angular-chart.js/examples/bubble.js
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}]);
|
||||||
701
www/lib/angular-chart.js/examples/charts.html
Normal file
701
www/lib/angular-chart.js/examples/charts.html
Normal file
@ -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:
|
||||||
|
<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><script src="node_modules/chart.js/Chart.min.js"></script>
|
||||||
|
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script></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"><canvas id="line" class="chart chart-line" chart-data="data"
|
||||||
|
chart-labels="labels" chart-series="series" chart-options="options"
|
||||||
|
chart-dataset-override="datasetOverride" chart-click="onClick"
|
||||||
|
</canvas> </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"><canvas id="bar" class="chart chart-bar"
|
||||||
|
chart-data="data" chart-labels="labels"> chart-series="series"
|
||||||
|
</canvas></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"><canvas id="doughnut" class="chart chart-doughnut"
|
||||||
|
chart-data="data" chart-labels="labels">
|
||||||
|
</canvas> </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"><canvas id="radar" class="chart chart-radar"
|
||||||
|
chart-data="data" chart-options="options" chart-labels="labels">
|
||||||
|
</canvas> </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"><canvas id="pie" class="chart chart-pie"
|
||||||
|
chart-data="data" chart-labels="labels" chart-options="options">
|
||||||
|
</canvas> </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"><canvas id="polar-area" class="chart chart-polar-area"
|
||||||
|
chart-data="data" chart-labels="labels" chart-options="options">
|
||||||
|
</canvas> </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"><canvas id="base" class="chart-horizontal-bar"
|
||||||
|
chart-data="data" chart-labels="labels" >
|
||||||
|
</canvas> </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-->
|
||||||
|
<canvas id="base" class="chart-bubble" chart-data="data"
|
||||||
|
chart-series="series" >
|
||||||
|
</canvas> </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"><canvas id="base" class="chart-base" chart-type="type"
|
||||||
|
chart-data="data" chart-labels="labels" >
|
||||||
|
</canvas> </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"><canvas id="base" class="chart-bar"
|
||||||
|
chart-data="data" chart-labels="labels" chart-colors="colors"
|
||||||
|
chart-dataset-override="datasetOverride" >
|
||||||
|
</canvas> </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>
|
||||||
701
www/lib/angular-chart.js/examples/charts.template.html
Normal file
701
www/lib/angular-chart.js/examples/charts.template.html
Normal file
@ -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:
|
||||||
|
<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><script src="node_modules/chart.js/Chart.min.js"></script>
|
||||||
|
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script></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"><canvas id="line" class="chart chart-line" chart-data="data"
|
||||||
|
chart-labels="labels" chart-series="series" chart-options="options"
|
||||||
|
chart-dataset-override="datasetOverride" chart-click="onClick"
|
||||||
|
</canvas> </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"><canvas id="bar" class="chart chart-bar"
|
||||||
|
chart-data="data" chart-labels="labels"> chart-series="series"
|
||||||
|
</canvas></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"><canvas id="doughnut" class="chart chart-doughnut"
|
||||||
|
chart-data="data" chart-labels="labels">
|
||||||
|
</canvas> </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"><canvas id="radar" class="chart chart-radar"
|
||||||
|
chart-data="data" chart-options="options" chart-labels="labels">
|
||||||
|
</canvas> </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"><canvas id="pie" class="chart chart-pie"
|
||||||
|
chart-data="data" chart-labels="labels" chart-options="options">
|
||||||
|
</canvas> </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"><canvas id="polar-area" class="chart chart-polar-area"
|
||||||
|
chart-data="data" chart-labels="labels" chart-options="options">
|
||||||
|
</canvas> </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"><canvas id="base" class="chart-horizontal-bar"
|
||||||
|
chart-data="data" chart-labels="labels" >
|
||||||
|
</canvas> </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-->
|
||||||
|
<canvas id="base" class="chart-bubble" chart-data="data"
|
||||||
|
chart-series="series" >
|
||||||
|
</canvas> </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"><canvas id="base" class="chart-base" chart-type="type"
|
||||||
|
chart-data="data" chart-labels="labels" >
|
||||||
|
</canvas> </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"><canvas id="base" class="chart-bar"
|
||||||
|
chart-data="data" chart-labels="labels" chart-colors="colors"
|
||||||
|
chart-dataset-override="datasetOverride" >
|
||||||
|
</canvas> </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>
|
||||||
25
www/lib/angular-chart.js/examples/commonjs.html
Normal file
25
www/lib/angular-chart.js/examples/commonjs.html
Normal file
@ -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>
|
||||||
19
www/lib/angular-chart.js/examples/commonjs.js
Normal file
19
www/lib/angular-chart.js/examples/commonjs.js
Normal file
@ -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]
|
||||||
|
];
|
||||||
|
}]);
|
||||||
|
|
||||||
|
})();
|
||||||
38
www/lib/angular-chart.js/examples/dataset-override.html
Normal file
38
www/lib/angular-chart.js/examples/dataset-override.html
Normal file
@ -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>
|
||||||
32
www/lib/angular-chart.js/examples/dataset-override.js
Normal file
32
www/lib/angular-chart.js/examples/dataset-override.js
Normal file
@ -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']
|
||||||
|
};
|
||||||
|
}]);
|
||||||
1
www/lib/angular-chart.js/examples/smoothscroll.min.js
vendored
Normal file
1
www/lib/angular-chart.js/examples/smoothscroll.min.js
vendored
Normal file
@ -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}()
|
||||||
31
www/lib/angular-chart.js/examples/stacked-bars.html
Normal file
31
www/lib/angular-chart.js/examples/stacked-bars.html
Normal file
@ -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>
|
||||||
45
www/lib/angular-chart.js/examples/tables.html
Normal file
45
www/lib/angular-chart.js/examples/tables.html
Normal file
@ -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>
|
||||||
33
www/lib/angular-chart.js/examples/tabs.html
Normal file
33
www/lib/angular-chart.js/examples/tabs.html
Normal file
@ -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>
|
||||||
30
www/lib/angular-chart.js/examples/ticks.html
Normal file
30
www/lib/angular-chart.js/examples/ticks.html
Normal file
@ -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>
|
||||||
18
www/lib/angular-chart.js/examples/webpack.commonjs.js
Normal file
18
www/lib/angular-chart.js/examples/webpack.commonjs.js
Normal file
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
})();
|
||||||
12
www/lib/angular-chart.js/examples/webpack.config.js
Normal file
12
www/lib/angular-chart.js/examples/webpack.config.js
Normal file
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
28
www/lib/angular-chart.js/examples/xy.html
Normal file
28
www/lib/angular-chart.js/examples/xy.html
Normal file
@ -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>
|
||||||
18
www/lib/angular-chart.js/examples/xy.js
Normal file
18
www/lib/angular-chart.js/examples/xy.js
Normal file
@ -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'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}]);
|
||||||
|
|
||||||
170
www/lib/angular-chart.js/gulpfile.js
Normal file
170
www/lib/angular-chart.js/gulpfile.js
Normal file
@ -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'));
|
||||||
|
|
||||||
|
})();
|
||||||
100
www/lib/angular-chart.js/package.json
Normal file
100
www/lib/angular-chart.js/package.json
Normal file
@ -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"
|
||||||
|
}
|
||||||
33
www/lib/angular-chart.js/test/fixtures/29-tabs.html
vendored
Normal file
33
www/lib/angular-chart.js/test/fixtures/29-tabs.html
vendored
Normal file
@ -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>
|
||||||
18
www/lib/angular-chart.js/test/fixtures/29-tabs.js
vendored
Normal file
18
www/lib/angular-chart.js/test/fixtures/29-tabs.js
vendored
Normal file
@ -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]
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
})();
|
||||||
BIN
www/lib/angular-chart.js/test/fixtures/29-tabs.png
vendored
Normal file
BIN
www/lib/angular-chart.js/test/fixtures/29-tabs.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
35
www/lib/angular-chart.js/test/fixtures/51-pie-update-colours.html
vendored
Normal file
35
www/lib/angular-chart.js/test/fixtures/51-pie-update-colours.html
vendored
Normal file
@ -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>
|
||||||
34
www/lib/angular-chart.js/test/fixtures/51-pie-update-colours.js
vendored
Normal file
34
www/lib/angular-chart.js/test/fixtures/51-pie-update-colours.js
vendored
Normal file
@ -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);
|
||||||
|
}]);
|
||||||
|
|
||||||
|
})();
|
||||||
BIN
www/lib/angular-chart.js/test/fixtures/51-pie-update-colours.png
vendored
Normal file
BIN
www/lib/angular-chart.js/test/fixtures/51-pie-update-colours.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
36
www/lib/angular-chart.js/test/fixtures/54-not-enough-colours.html
vendored
Normal file
36
www/lib/angular-chart.js/test/fixtures/54-not-enough-colours.html
vendored
Normal file
@ -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>
|
||||||
36
www/lib/angular-chart.js/test/fixtures/54-not-enough-colours.js
vendored
Normal file
36
www/lib/angular-chart.js/test/fixtures/54-not-enough-colours.js
vendored
Normal file
@ -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];
|
||||||
|
}]);
|
||||||
|
|
||||||
|
})();
|
||||||
BIN
www/lib/angular-chart.js/test/fixtures/54-not-enough-colours.png
vendored
Normal file
BIN
www/lib/angular-chart.js/test/fixtures/54-not-enough-colours.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
35
www/lib/angular-chart.js/test/fixtures/57-hex-colours.html
vendored
Normal file
35
www/lib/angular-chart.js/test/fixtures/57-hex-colours.html
vendored
Normal file
@ -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>
|
||||||
15
www/lib/angular-chart.js/test/fixtures/57-hex-colours.js
vendored
Normal file
15
www/lib/angular-chart.js/test/fixtures/57-hex-colours.js
vendored
Normal file
@ -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];
|
||||||
|
}]);
|
||||||
|
|
||||||
|
})();
|
||||||
BIN
www/lib/angular-chart.js/test/fixtures/57-hex-colours.png
vendored
Normal file
BIN
www/lib/angular-chart.js/test/fixtures/57-hex-colours.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
29
www/lib/angular-chart.js/test/fixtures/bubble.html
vendored
Normal file
29
www/lib/angular-chart.js/test/fixtures/bubble.html
vendored
Normal file
@ -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>
|
||||||
787
www/lib/angular-chart.js/test/fixtures/bubble.js
vendored
Normal file
787
www/lib/angular-chart.js/test/fixtures/bubble.js
vendored
Normal file
@ -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
|
||||||
|
}
|
||||||
|
]
|
||||||
|
];
|
||||||
|
}]);
|
||||||
BIN
www/lib/angular-chart.js/test/fixtures/bubble.png
vendored
Normal file
BIN
www/lib/angular-chart.js/test/fixtures/bubble.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
77
www/lib/angular-chart.js/test/fixtures/charts.html
vendored
Normal file
77
www/lib/angular-chart.js/test/fixtures/charts.html
vendored
Normal file
@ -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>
|
||||||
68
www/lib/angular-chart.js/test/fixtures/charts.js
vendored
Normal file
68
www/lib/angular-chart.js/test/fixtures/charts.js
vendored
Normal file
@ -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]
|
||||||
|
];
|
||||||
|
});
|
||||||
|
})();
|
||||||
BIN
www/lib/angular-chart.js/test/fixtures/charts.png
vendored
Normal file
BIN
www/lib/angular-chart.js/test/fixtures/charts.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
33
www/lib/angular-chart.js/test/fixtures/configure-line-chart.html
vendored
Normal file
33
www/lib/angular-chart.js/test/fixtures/configure-line-chart.html
vendored
Normal file
@ -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>
|
||||||
33
www/lib/angular-chart.js/test/fixtures/configure-line-chart.js
vendored
Normal file
33
www/lib/angular-chart.js/test/fixtures/configure-line-chart.js
vendored
Normal file
@ -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);
|
||||||
|
}]);
|
||||||
|
|
||||||
|
})();
|
||||||
BIN
www/lib/angular-chart.js/test/fixtures/configure-line-chart.png
vendored
Normal file
BIN
www/lib/angular-chart.js/test/fixtures/configure-line-chart.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
9
www/lib/angular-chart.js/test/fixtures/coverage.js
vendored
Normal file
9
www/lib/angular-chart.js/test/fixtures/coverage.js
vendored
Normal file
File diff suppressed because one or more lines are too long
32
www/lib/angular-chart.js/test/fixtures/custom-directive.html
vendored
Normal file
32
www/lib/angular-chart.js/test/fixtures/custom-directive.html
vendored
Normal file
@ -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>
|
||||||
20
www/lib/angular-chart.js/test/fixtures/custom-directive.js
vendored
Normal file
20
www/lib/angular-chart.js/test/fixtures/custom-directive.js
vendored
Normal file
@ -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);
|
||||||
|
}]);
|
||||||
|
|
||||||
|
})();
|
||||||
BIN
www/lib/angular-chart.js/test/fixtures/custom-directive.png
vendored
Normal file
BIN
www/lib/angular-chart.js/test/fixtures/custom-directive.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
41
www/lib/angular-chart.js/test/fixtures/dataset-override.html
vendored
Normal file
41
www/lib/angular-chart.js/test/fixtures/dataset-override.html
vendored
Normal file
@ -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>
|
||||||
32
www/lib/angular-chart.js/test/fixtures/dataset-override.js
vendored
Normal file
32
www/lib/angular-chart.js/test/fixtures/dataset-override.js
vendored
Normal file
@ -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']
|
||||||
|
};
|
||||||
|
}]);
|
||||||
BIN
www/lib/angular-chart.js/test/fixtures/dataset-override.png
vendored
Normal file
BIN
www/lib/angular-chart.js/test/fixtures/dataset-override.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
33
www/lib/angular-chart.js/test/fixtures/horizontal-bar-chart.html
vendored
Normal file
33
www/lib/angular-chart.js/test/fixtures/horizontal-bar-chart.html
vendored
Normal file
@ -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>
|
||||||
18
www/lib/angular-chart.js/test/fixtures/horizontal-bar-chart.js
vendored
Normal file
18
www/lib/angular-chart.js/test/fixtures/horizontal-bar-chart.js
vendored
Normal file
@ -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]
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
})();
|
||||||
BIN
www/lib/angular-chart.js/test/fixtures/horizontal-bar-chart.png
vendored
Normal file
BIN
www/lib/angular-chart.js/test/fixtures/horizontal-bar-chart.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
31
www/lib/angular-chart.js/test/index.html
Normal file
31
www/lib/angular-chart.js/test/index.html
Normal file
@ -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>
|
||||||
4
www/lib/angular-chart.js/test/mocha.opts
Normal file
4
www/lib/angular-chart.js/test/mocha.opts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
--slow 20
|
||||||
|
--growl
|
||||||
|
--reporter spec
|
||||||
|
--require test/support/setup
|
||||||
11
www/lib/angular-chart.js/test/support/setup.js
Normal file
11
www/lib/angular-chart.js/test/support/setup.js
Normal file
@ -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;
|
||||||
|
|
||||||
|
})();
|
||||||
75
www/lib/angular-chart.js/test/test.integration.js
Normal file
75
www/lib/angular-chart.js/test/test.integration.js
Normal file
@ -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();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
408
www/lib/angular-chart.js/test/test.unit.js
Normal file
408
www/lib/angular-chart.js/test/test.unit.js
Normal file
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
15
www/lib/angular-chart.js/tmp/Dockerfile-alpine
Normal file
15
www/lib/angular-chart.js/tmp/Dockerfile-alpine
Normal file
@ -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"]
|
||||||
26
www/lib/angular-chart.js/tmp/gradient.html
Normal file
26
www/lib/angular-chart.js/tmp/gradient.html
Normal file
@ -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>
|
||||||
|
|
||||||
29
www/lib/angular-chart.js/tmp/gradient.js
Normal file
29
www/lib/angular-chart.js/tmp/gradient.js
Normal file
@ -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) {
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
});
|
||||||
BIN
www/pokedex.db
BIN
www/pokedex.db
Binary file not shown.
@ -40,15 +40,13 @@
|
|||||||
<div class="col-66 itemfontsize">Fluchtchance:</div>
|
<div class="col-66 itemfontsize">Fluchtchance:</div>
|
||||||
<div class="col-33 itemfontsize">{{pokemon.pokemonfluchtchance}}%</div>
|
<div class="col-33 itemfontsize">{{pokemon.pokemonfluchtchance}}%</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row" ng-if="pokemon.pokemoneidistanz > 0">
|
||||||
<div class="col-66 itemfontsize">Ei-Distanz:</div>
|
<div class="col-66 itemfontsize">Ei-Distanz:</div>
|
||||||
<div class="col-33 itemfontsize">{{pokemon.pokemoneidistanz}} Km</div>
|
<div class="col-33 itemfontsize">{{pokemon.pokemoneidistanz}} Km</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row" ng-if="pokemon.pokemonentwicklungtext > 0">
|
||||||
<div class="col-100 itemfontsize">Entw. ab:</div>
|
<div class="col-66 itemfontsize">Entwicklung:</div>
|
||||||
</div>
|
<div class="col-33 itemfontsize">{{pokemon.pokemonentwicklungtext}} <img src="img/bonbon.png" style="padding-top:3px;"></div>
|
||||||
<div class="row">
|
|
||||||
<div class="col-100 itemfontsize">{{pokemon.pokemonentwicklungtext}} Bonbons</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -75,7 +73,9 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Pokemon Detail ENDE -->
|
||||||
|
|
||||||
|
<!-- Pokemon Entwicklung -->
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="item item-divider">
|
<div class="item item-divider">
|
||||||
Entwicklung
|
Entwicklung
|
||||||
@ -85,19 +85,140 @@
|
|||||||
|
|
||||||
<div class="col-33 col-center"></div>
|
<div class="col-33 col-center"></div>
|
||||||
<div class="col-33 col-center">
|
<div class="col-33 col-center">
|
||||||
<div>
|
<div class="divcenter">
|
||||||
<p ng-if="pokemonentwicklung.pokemonlistentyp == 2">{{ pokemonentwicklung.pokemonpokedexid }} Bonbons</p>
|
<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">
|
<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>
|
</div>
|
||||||
<div class="col-33 col-center"></div>
|
<div class="col-33 col-center"></div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</md-list>
|
<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">{{ pokemonentwicklung.pokemonname }} </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</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="card">
|
||||||
<div class="item item-divider">
|
<div class="item item-divider">
|
||||||
Schaden durch Attacken-Typ
|
Schaden durch Attacken-Typ
|
||||||
@ -155,56 +276,71 @@
|
|||||||
</md-list-item>
|
</md-list-item>
|
||||||
</md-list>
|
</md-list>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Pokemon Schaden Tabelle ENDE-->
|
||||||
|
|
||||||
|
<!-- Pokemon Basis Werte -->
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="item item-divider">
|
<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>
|
||||||
<div class="row" style="font-size: 10px;">
|
<div class="row" style="font-size: 10px;">
|
||||||
|
|
||||||
|
<div class="col-50 col-center">
|
||||||
|
<strong>Trainer-Lever / Powerups</strong>
|
||||||
|
</div>
|
||||||
<div class="col-25 col-center">
|
<div class="col-25 col-center">
|
||||||
<strong>Attacke</strong>
|
<strong>Max. KP</strong>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-20 col-center">
|
<div class="col-25 col-center mycenter">
|
||||||
<strong>Typ</strong>
|
<strong>Max. WP</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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<md-list>
|
<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">
|
<div class="col-50 col-center mycenter">
|
||||||
{{ pokemonattacke.pokemonattacke }}
|
{{ statuswert.pokemontrainerlevel }}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-20 col-center">
|
<div class="col-25 col-center mycenter">
|
||||||
<div class="pokemontypsx pokemontyp{{ pokemonattacke.pokemonattacketyp}}" style="margin: 0 auto; width:97%;">
|
{{ statuswert.pokemonmaxkp }}
|
||||||
<img src="img/typbilder/{{ pokemonattacke.pokemonattacketyp}}.png" alt="PokemonTyp" width="32" height="32">
|
|
||||||
{{ pokemonattacke.pokemonattacketyptext }}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col-25 col-center mycenter">
|
||||||
<div class="col-10 col-center mycenter">
|
{{ statuswert.pokemonmaxwp }}
|
||||||
{{ 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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</md-list>
|
</md-list>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Pokemon Levelup Tabelle ENDE-->
|
||||||
|
|
||||||
</ion-content>
|
</ion-content>
|
||||||
<div class="footer-fab-bar">
|
<div class="footer-fab-bar">
|
||||||
|
|||||||
@ -106,6 +106,14 @@ appControllers.controller('pokemonDetailCtrl', function ($mdBottomSheet, $mdToas
|
|||||||
$scope.pokemonschwaechenliste = [];
|
$scope.pokemonschwaechenliste = [];
|
||||||
$scope.pokemonattackenliste = [];
|
$scope.pokemonattackenliste = [];
|
||||||
$scope.pokemonentwicklungliste = [];
|
$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.
|
// $scope.pokemon is the variable that store pokemon detail data that receive form pokemon list page.
|
||||||
// Parameter :
|
// Parameter :
|
||||||
// $stateParams.pokemondetail(object) = pokemon that user select from pokemon list page.
|
// $stateParams.pokemondetail(object) = pokemon that user select from pokemon list page.
|
||||||
@ -115,7 +123,7 @@ appControllers.controller('pokemonDetailCtrl', function ($mdBottomSheet, $mdToas
|
|||||||
if (entwarr!=''){
|
if (entwarr!=''){
|
||||||
var entwarr = $scope.pokemon.pokemonentwicklung.split("|");
|
var entwarr = $scope.pokemon.pokemonentwicklung.split("|");
|
||||||
var entwkostenarr=$scope.pokemon.pokemonentwicklungkosten.split("|");
|
var entwkostenarr=$scope.pokemon.pokemonentwicklungkosten.split("|");
|
||||||
var index;
|
var index,indexonestep;
|
||||||
|
|
||||||
for (index = 0; index < entwarr.length; ++index) {
|
for (index = 0; index < entwarr.length; ++index) {
|
||||||
|
|
||||||
@ -126,6 +134,7 @@ appControllers.controller('pokemonDetailCtrl', function ($mdBottomSheet, $mdToas
|
|||||||
var dataItemEntwicklung = {
|
var dataItemEntwicklung = {
|
||||||
pokemonpokedexid : entwarr[index] ,
|
pokemonpokedexid : entwarr[index] ,
|
||||||
pokemonimage : $scope.getPokemonImage(entwarr[index]),
|
pokemonimage : $scope.getPokemonImage(entwarr[index]),
|
||||||
|
pokemonname : $scope.getPokemonName(entwarr[index]),
|
||||||
pokemonentwickstufe :1,
|
pokemonentwickstufe :1,
|
||||||
pokemonlistentyp : 1
|
pokemonlistentyp : 1
|
||||||
};
|
};
|
||||||
@ -142,21 +151,29 @@ appControllers.controller('pokemonDetailCtrl', function ($mdBottomSheet, $mdToas
|
|||||||
}
|
}
|
||||||
}//if
|
}//if
|
||||||
else{
|
else{
|
||||||
var res=dummystring.replace("#", "");
|
var entwarronstep = dummystring.split("#");
|
||||||
|
|
||||||
|
for (indexonestep = 1; indexonestep < entwarronstep.length; ++indexonestep) {
|
||||||
var dataItemEntwicklung = {
|
var dataItemEntwicklung = {
|
||||||
pokemonpokedexid : res ,
|
pokemonpokedexid : entwarronstep[indexonestep] ,
|
||||||
pokemonimage : $scope.getPokemonImage(res),
|
pokemonimage : $scope.getPokemonImage(entwarronstep[indexonestep]),
|
||||||
|
pokemonname : $scope.getPokemonName(entwarronstep[indexonestep]),
|
||||||
pokemonentwickstufe :2,
|
pokemonentwickstufe :2,
|
||||||
pokemonlistentyp : 1
|
pokemonlistentyp : 1
|
||||||
};
|
};
|
||||||
$scope.pokemonentwicklungliste.push(dataItemEntwicklung);
|
$scope.pokemonentwicklunglisteonestep.push(dataItemEntwicklung);
|
||||||
|
}//for2
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}//for
|
}//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.
|
//$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 () {
|
$timeout(function () {
|
||||||
$scope.getTypenEffekt($scope.pokemon.pokedexid);
|
$scope.getTypenEffekt($scope.pokemon.pokedexid);
|
||||||
$scope.getStandardAttacken($scope.pokemon.pokedexid);
|
$scope.getStandardAttacken($scope.pokemon.pokedexid);
|
||||||
|
$scope.getEntladeAttacken($scope.pokemon.pokedexid);
|
||||||
|
$scope.getMaxStatuswerte($scope.pokemon.pokedexid);
|
||||||
}, 1000);
|
}, 1000);
|
||||||
|
|
||||||
}; //End initialForm.
|
}; //End initialForm.
|
||||||
@ -186,11 +205,30 @@ appControllers.controller('pokemonDetailCtrl', function ($mdBottomSheet, $mdToas
|
|||||||
return pokedexDB.getPokemonImage(pokedexid);
|
return pokedexDB.getPokemonImage(pokedexid);
|
||||||
};//End getPokemonList.
|
};//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.
|
// getPokemonList is for get all pokemons.
|
||||||
// By calling pokedexDB.all() service.
|
// By calling pokedexDB.all() service.
|
||||||
$scope.getStandardAttacken = function (pokedexid) {
|
$scope.getStandardAttacken = function (pokedexid) {
|
||||||
$scope.pokemonattackenliste = pokedexDB.getStandardAttacken(pokedexid);
|
$scope.pokemonattackenliste = pokedexDB.getStandardAttacken(pokedexid);
|
||||||
};//End getPokemonList.
|
};//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.
|
// showListBottomSheet is for showing the bottom sheet.
|
||||||
// Parameter :
|
// Parameter :
|
||||||
// $event(object) = position of control that user tap.
|
// $event(object) = position of control that user tap.
|
||||||
|
|||||||
@ -42,6 +42,10 @@ appServices.factory('pokedexDB', function ($cordovaSQLite)
|
|||||||
var pokemonstandardattackenliste= [];
|
var pokemonstandardattackenliste= [];
|
||||||
var pokemonfundorte = [];
|
var pokemonfundorte = [];
|
||||||
var pokemonimages = [];
|
var pokemonimages = [];
|
||||||
|
var pokemonmaxstatuswerte = [];
|
||||||
|
var pokemonentladeattackenliste = [];
|
||||||
|
var pokemonname = [];
|
||||||
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
// Select all data from sqlite
|
// Select all data from sqlite
|
||||||
@ -51,6 +55,7 @@ appServices.factory('pokedexDB', function ($cordovaSQLite)
|
|||||||
pokemontypen = [];
|
pokemontypen = [];
|
||||||
pokemonfundorte = [];
|
pokemonfundorte = [];
|
||||||
pokemonimages = [];
|
pokemonimages = [];
|
||||||
|
pokemonname = [];
|
||||||
|
|
||||||
//Typen einlesen
|
//Typen einlesen
|
||||||
var query = "SELECT * FROM tblPokemonTyp order by ID ASC";
|
var query = "SELECT * FROM tblPokemonTyp order by ID ASC";
|
||||||
@ -89,6 +94,7 @@ appServices.factory('pokedexDB', function ($cordovaSQLite)
|
|||||||
if (res.rows.length > 0)
|
if (res.rows.length > 0)
|
||||||
{
|
{
|
||||||
pokemonimages.push('');
|
pokemonimages.push('');
|
||||||
|
pokemonname.push('');
|
||||||
for (var i = 0; i < res.rows.length; i++)
|
for (var i = 0; i < res.rows.length; i++)
|
||||||
{
|
{
|
||||||
var dummypokedexid='';
|
var dummypokedexid='';
|
||||||
@ -128,11 +134,16 @@ appServices.factory('pokedexDB', function ($cordovaSQLite)
|
|||||||
pokemonentwicklungtext : res.rows.item(i).POKEMONENTWICKLUNGTEXT ,
|
pokemonentwicklungtext : res.rows.item(i).POKEMONENTWICKLUNGTEXT ,
|
||||||
pokemonentwicklung : res.rows.item(i).POKEMONENTWICKLUNG ,
|
pokemonentwicklung : res.rows.item(i).POKEMONENTWICKLUNG ,
|
||||||
pokemonentwicklungkosten : res.rows.item(i).POKEMONENTWICKLUNGKOSTEN ,
|
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 ,
|
pokemontext : res.rows.item(i).POKEMONTEXT ,
|
||||||
pokemonnote : res.rows.item(i).POKEMONNOTE ,
|
pokemonnote : res.rows.item(i).POKEMONNOTE ,
|
||||||
pokemonimage : res.rows.item(i).POKEMONIMAGE
|
pokemonimage : res.rows.item(i).POKEMONIMAGE
|
||||||
};
|
};
|
||||||
pokemonimages.push(res.rows.item(i).POKEMONIMAGE);
|
pokemonimages.push(res.rows.item(i).POKEMONIMAGE);
|
||||||
|
pokemonname.push(res.rows.item(i).POKEMONNAME);
|
||||||
pokemonList.push(dataItem);
|
pokemonList.push(dataItem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -243,6 +254,10 @@ appServices.factory('pokedexDB', function ($cordovaSQLite)
|
|||||||
{
|
{
|
||||||
return pokemonimages[pokedexid];
|
return pokemonimages[pokedexid];
|
||||||
},
|
},
|
||||||
|
getPokemonName: function (pokedexid)
|
||||||
|
{
|
||||||
|
return pokemonname[pokedexid];
|
||||||
|
},
|
||||||
getStandardAttacken: function (pokedexid)
|
getStandardAttacken: function (pokedexid)
|
||||||
{
|
{
|
||||||
|
|
||||||
@ -271,6 +286,60 @@ appServices.factory('pokedexDB', function ($cordovaSQLite)
|
|||||||
});
|
});
|
||||||
return pokemonstandardattackenliste;
|
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.
|
// To add data to sqlite.
|
||||||
// It will receive newContract from controller then insert it into sqlite.
|
// It will receive newContract from controller then insert it into sqlite.
|
||||||
add: function (newContract)
|
add: function (newContract)
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user