├── package.json
├── bower.json
├── example
    ├── webpack.config.js
    ├── main.es6
    ├── bundle.js
    ├── index.html
    ├── bundle.js.map
    └── lib
    │   ├── chartist.min.css
    │   └── chartist.js
├── .gitignore
├── LICENSE
├── README.md
└── lrChartistTooltip.js


/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "lr-chartist-tooltip-plugin",
 3 |   "version": "1.0.0",
 4 |   "description": "tooltip plugin for chartist.js",
 5 |   "main": "lrChartistTooltip.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "chartist",
11 |     "tooltip",
12 |     "plugin"
13 |   ],
14 |   "author": "Laurent Rendard",
15 |   "license": "MIT",
16 |   "devDependencies": {
17 |     "babel-core": "^5.8.23",
18 |     "babel-loader": "^5.3.2",
19 |     "webpack": "^1.12.0"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "lr-chartist-tooltip-plugin",
 3 |   "main": "lrChartistTooltip.js",
 4 |   "version": "1.0.0",
 5 |   "homepage": "https://github.com/lorenzofox3/lrChartistTooltip",
 6 |   "authors": [
 7 |     "lorenzofox3 <laurent34azerty@gmail.com>"
 8 |   ],
 9 |   "description": "tooltip plugin for chartist chart library",
10 |   "keywords": [
11 |     "chartist",
12 |     "plugin",
13 |     "tooltip"
14 |   ],
15 |   "license": "MIT",
16 |   "ignore": [
17 |     "**/.*",
18 |     "node_modules",
19 |     "bower_components",
20 |     "test",
21 |     "tests"
22 |   ]
23 | }
24 | 


--------------------------------------------------------------------------------
/example/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var webpack = require('webpack');
 3 | 
 4 | module.exports = {
 5 |   entry: __dirname+'/main.es6',
 6 |   output: {
 7 |     path: __dirname,
 8 |     filename: 'bundle.js'
 9 |   },
10 |   module: {
11 |     loaders: [
12 |       {test: path.join(__dirname), loader: 'babel-loader'}
13 |     ]
14 |   },
15 |   plugins: [
16 |     // Avoid publishing files when compilation failed
17 |     new webpack.NoErrorsPlugin()
18 |   ],
19 |   stats: {
20 |     // Nice colored output
21 |     colors: true
22 |   },
23 |   // Create Sourcemaps for the bundle
24 |   devtool: 'source-map'
25 | 
26 | };


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | # Runtime data
 6 | pids
 7 | *.pid
 8 | *.seed
 9 | 
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 | 
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 | 
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 | 
19 | # node-waf configuration
20 | .lock-wscript
21 | 
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 | 
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
28 | .idea
29 | 


--------------------------------------------------------------------------------
/example/main.es6:
--------------------------------------------------------------------------------
 1 | let labels = [1,2,3];
 2 | let series = [
 3 |   [
 4 |     {meta: 'description', value: 1 },
 5 |     {meta: 'meta data', value: 5},
 6 |     {meta: 'woot woot', value: 3}
 7 |   ],
 8 |   [
 9 |     {meta: 'foo', value: 2},
10 |     {meta: 'bar', value: 4},
11 |     {meta: 'some other', value: 2}
12 |   ]
13 | ];
14 | let plugins = [
15 |   Chartist.plugins.lrTooltip({
16 |     template:'<h3 class="small">{{meta}}</h3><p class="small"><i class="glyphicon glyphicon-tag"></i> $ {{y}}</p>',
17 |     labelOffset:{
18 |       x : 15
19 |     }
20 |   })
21 | ];
22 | 
23 | var chart = new Chartist.Bar('#myChart', {labels, series}, {plugins, stackBars:true});
24 | var chartLine = new Chartist.Line('#myChartLine', {labels, series}, {plugins});


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 RENARD Laurent
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # lr-chartist-tooltip
 2 | 
 3 | tooltip plugin for [chartist](http://gionkunz.github.io/chartist-js/) chart library
 4 | * support templates
 5 | * no dependency (other than Chartist itself)
 6 | * 70 lines of code
 7 | 
 8 | ## install 
 9 | 
10 | ``npm install lr-chartist-tooltip-plugin``
11 | ``bower install lr-chartist-tooltip-plugin``
12 | 
13 | ## usage
14 | 
15 | ```Javascript
16 | var chart = new Chartist.Line('.ct-chart', {
17 |   labels: [1, 2, 3],
18 |   series: [
19 |     [
20 |       {meta: 'description', value: 1 },
21 |       {meta: 'description', value: 5},
22 |       {meta: 'description', value: 3}
23 |     ],
24 |     [
25 |       {meta: 'other description', value: 2},
26 |       {meta: 'other description', value: 4},
27 |       {meta: 'other description', value: 2}
28 |     ]
29 |   ]
30 | }, {
31 |   plugins: [
32 |     Chartist.plugins.lrTooltip({template:'<p>{{meta}}:{{y}}</p>'})
33 |   ]
34 | });
35 | ```
36 | 
37 | ### template variables (to put between {{ }} )
38 | 
39 | 1. **y** the y value
40 | 2. **x** the x value
41 | 3. **meta** some meta data string
42 | 
43 | ### options
44 | 
45 | 1. **tooltipClass** : the class name added to the tooltip element (default ct-tooltip)
46 | 2. **template** : the template string to be interpolated (default {{y}})
47 | 3. **labelOffset**: x and y value to position the tooltip  
48 | 
49 | 
50 | 
51 | 


--------------------------------------------------------------------------------
/example/bundle.js:
--------------------------------------------------------------------------------
 1 | /******/ (function(modules) { // webpackBootstrap
 2 | /******/ 	// The module cache
 3 | /******/ 	var installedModules = {};
 4 | /******/
 5 | /******/ 	// The require function
 6 | /******/ 	function __webpack_require__(moduleId) {
 7 | /******/
 8 | /******/ 		// Check if module is in cache
 9 | /******/ 		if(installedModules[moduleId])
10 | /******/ 			return installedModules[moduleId].exports;
11 | /******/
12 | /******/ 		// Create a new module (and put it into the cache)
13 | /******/ 		var module = installedModules[moduleId] = {
14 | /******/ 			exports: {},
15 | /******/ 			id: moduleId,
16 | /******/ 			loaded: false
17 | /******/ 		};
18 | /******/
19 | /******/ 		// Execute the module function
20 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21 | /******/
22 | /******/ 		// Flag the module as loaded
23 | /******/ 		module.loaded = true;
24 | /******/
25 | /******/ 		// Return the exports of the module
26 | /******/ 		return module.exports;
27 | /******/ 	}
28 | /******/
29 | /******/
30 | /******/ 	// expose the modules object (__webpack_modules__)
31 | /******/ 	__webpack_require__.m = modules;
32 | /******/
33 | /******/ 	// expose the module cache
34 | /******/ 	__webpack_require__.c = installedModules;
35 | /******/
36 | /******/ 	// __webpack_public_path__
37 | /******/ 	__webpack_require__.p = "";
38 | /******/
39 | /******/ 	// Load entry module and return exports
40 | /******/ 	return __webpack_require__(0);
41 | /******/ })
42 | /************************************************************************/
43 | /******/ ([
44 | /* 0 */
45 | /***/ function(module, exports) {
46 | 
47 | 	'use strict';
48 | 	
49 | 	var labels = [1, 2, 3];
50 | 	var series = [[{ meta: 'description', value: 1 }, { meta: 'meta data', value: 5 }, { meta: 'woot woot', value: 3 }], [{ meta: 'foo', value: 2 }, { meta: 'bar', value: 4 }, { meta: 'some other', value: 2 }]];
51 | 	var plugins = [Chartist.plugins.lrTooltip({
52 | 	  template: '<h3 class="small">{{meta}}</h3><p class="small"><i class="glyphicon glyphicon-tag"></i> $ {{y}}</p>',
53 | 	  labelOffset: {
54 | 	    x: 15
55 | 	  }
56 | 	})];
57 | 	
58 | 	var chart = new Chartist.Bar('#myChart', { labels: labels, series: series }, { plugins: plugins, stackBars: true });
59 | 	var chartLine = new Chartist.Line('#myChartLine', { labels: labels, series: series }, { plugins: plugins });
60 | 
61 | /***/ }
62 | /******/ ]);
63 | //# sourceMappingURL=bundle.js.map


--------------------------------------------------------------------------------
/lrChartistTooltip.js:
--------------------------------------------------------------------------------
 1 | (function (Chartist, doc) {
 2 |   'use strict';
 3 |   var regex = /{{([0-9a-z]+)}}/g;
 4 |   var defaultOptions = {
 5 |     tooltipClass: 'ct-tooltip',
 6 |     template: '{{y}}',
 7 |     labelOffset: {
 8 |       x: 0,
 9 |       y: -30
10 |     }
11 |   };
12 | 
13 |   Chartist.plugins = Chartist.plugins || {};
14 |   Chartist.plugins.lrTooltip = function lrChartistTooltipFactory (options) {
15 | 
16 |     options = Chartist.extend({}, defaultOptions, options);
17 | 
18 |     return function lrChartistTooltip (chart) {
19 | 
20 |       var tooltip = doc.createElement('div');
21 |       var type;
22 |       var x = 'x', y = 'y';
23 |       tooltip.style.position = 'absolute';
24 |       tooltip.style.display = 'none';
25 |       chart.container.style.position = 'relative';
26 |       chart.container.appendChild(tooltip);
27 | 
28 |       if (chart instanceof Chartist.Bar) {
29 |         type = 'bar';
30 |         x = 'x1';
31 |         y = 'y2';
32 |       } else if (chart instanceof Chartist.Line) {
33 |         type = 'point';
34 |       } else {
35 |         console.warn('lrTooltip does not support this chart type');
36 |       }
37 | 
38 | 
39 |       if (type) {
40 |         chart.on('draw', function (data) {
41 |           if (data.type === type && data.value) {
42 |             var mouseenterListener = function () {
43 |               var className = [options.tooltipClass, Chartist.alphaNumerate(data.seriesIndex)].join('-');
44 |               var valObject = Chartist.extend({meta: data.meta}, data.value);
45 |               var matches = options.template.match(regex);
46 |               var html = options.template;
47 |               matches.forEach(function (m) {
48 |                 html = html.replace(m, valObject[m.substr(2, m.length - 4)], 'g');
49 |               });
50 |               tooltip.className = className;
51 |               tooltip.style.left = data[x] + options.labelOffset.x + 'px';
52 |               tooltip.style.top = data[y] + options.labelOffset.y + 'px';
53 |               tooltip.style.display = 'inline-block';
54 |               tooltip.innerHTML = html;
55 |             };
56 |             var mousleaveListener = function () {
57 |               tooltip.style.display = 'none'
58 |             };
59 |             data.element._node.addEventListener('mouseenter', mouseenterListener);
60 |             data.element._node.addEventListener('mouseleave', mousleaveListener);
61 |           }
62 |         });
63 |       }
64 |     }
65 |   };
66 | })(Chartist, document);


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head lang="en">
 4 |   <meta charset="UTF-8">
 5 |   <title></title>
 6 |   <script src="./lib/chartist.js"></script>
 7 |   <script src="../lrChartistTooltip.js"></script>
 8 |   <link rel="stylesheet" type="text/css" href="lib/chartist.min.css">
 9 |   <link rel="stylesheet" type="text/css" href="lib/bootstrap.css">
10 | </head>
11 | <style>
12 | 
13 |   section{
14 |     margin: 0 20px;
15 |   }
16 | 
17 |   .ct-bar:hover, .ct-point:hover {
18 |     cursor: pointer;
19 |   }
20 | 
21 |   .ct-tooltip-a, .ct-tooltip-b {
22 |     z-index: 999;
23 |     opacity: 0.8;
24 |     color: white;
25 |     padding: 5px;
26 |     text-align: center;
27 |     border-radius: 5px;
28 |     box-shadow: 4px 4px 8px #2f2f2f;
29 |   }
30 | 
31 |   .ct-tooltip-a {
32 |     background: #d70206;
33 |   }
34 | 
35 |   .ct-tooltip-b {
36 |     background: #f05b4f;
37 |   }
38 | 
39 |   .ct-tooltip-b h3, .ct-tooltip-a h3 {
40 |     padding: 2px;
41 |     margin: 0;
42 |   }
43 | 
44 |   .ct-tooltip-b p, .ct-tooltip-a p {
45 |     margin: 0;
46 |     padding: 3px;
47 |   }
48 | </style>
49 | <body>
50 | <section class="container">
51 |   <div class="row">
52 |     <h1><i class="glyphicon glyphicon-list"></i> Code sample</h1>
53 |     <pre><code>let labels = [1,2,3];
54 | let series = [
55 |   [
56 |     {meta: 'description', value: 1 },
57 |     {meta: 'description', value: 5},
58 |     {meta: 'description', value: 3}
59 |   ],
60 |   [
61 |     {meta: 'other description', value: 2},
62 |     {meta: 'other description', value: 4},
63 |     {meta: 'other description', value: 2}
64 |   ]
65 | ];
66 | let plugins = [
67 |   Chartist.plugins.lrTooltip({
68 |     template:'&lt;h3 class="small">{{meta}}&lt;/h3>&lt;p class="small">&lt;i class="glyphicon glyphicon-tag">&lt;/i> $ {{y}}&lt;/p>',
69 |     labelOffset:{
70 |       x : 15
71 |     }
72 |   })
73 | ];
74 | 
75 | var chart = new Chartist.Bar('#myChart', {labels, series}, {plugins, stackBars:true});
76 | var chartLine = new Chartist.Line('#myChartLine', {labels, series}, {plugins});</code></pre>
77 |   </div>
78 | </section>
79 | <section class="container">
80 |   <div class="row">
81 |     <h1><i class="glyphicon glyphicon-signal"></i> Bar (stacked)</h1>
82 |     <div id="myChart" class="ct-chart"></div>
83 |   </div>
84 | </section>
85 | <section class="container">
86 |   <div class="row">
87 |     <h1><i class="glyphicon glyphicon-equalizer "></i> Line</h1>
88 |     <div id="myChartLine" class="ct-chart"></div>
89 |   </div>
90 | </section>
91 | <script src="./bundle.js"></script>
92 | </body>
93 | </html>


--------------------------------------------------------------------------------
/example/bundle.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///webpack/bootstrap bbe860eb90ea04624855","webpack:///./main.es6"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uBAAe;AACf;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;;;;;;;;ACtCA,KAAI,MAAM,GAAG,CAAC,CAAC,EAAC,CAAC,EAAC,CAAC,CAAC,CAAC;AACrB,KAAI,MAAM,GAAG,CACX,CACE,EAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,EAAE,EAChC,EAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,EAAC,EAC7B,EAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,EAAC,CAC9B,EACD,CACE,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,EACvB,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,EACvB,EAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,EAAC,CAC/B,CACF,CAAC;AACF,KAAI,OAAO,GAAG,CACZ,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC;AACzB,WAAQ,EAAC,qGAAqG;AAC9G,cAAW,EAAC;AACV,MAAC,EAAG,EAAE;IACP;EACF,CAAC,CACH,CAAC;;AAEF,KAAI,KAAK,GAAG,IAAI,QAAQ,CAAC,GAAG,CAAC,UAAU,EAAE,EAAC,MAAM,EAAN,MAAM,EAAE,MAAM,EAAN,MAAM,EAAC,EAAE,EAAC,OAAO,EAAP,OAAO,EAAE,SAAS,EAAC,IAAI,EAAC,CAAC,CAAC;AACtF,KAAI,SAAS,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,cAAc,EAAE,EAAC,MAAM,EAAN,MAAM,EAAE,MAAM,EAAN,MAAM,EAAC,EAAE,EAAC,OAAO,EAAP,OAAO,EAAC,CAAC,C","file":"bundle.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap bbe860eb90ea04624855\n **/","let labels = [1,2,3];\nlet series = [\n  [\n    {meta: 'description', value: 1 },\n    {meta: 'meta data', value: 5},\n    {meta: 'woot woot', value: 3}\n  ],\n  [\n    {meta: 'foo', value: 2},\n    {meta: 'bar', value: 4},\n    {meta: 'some other', value: 2}\n  ]\n];\nlet plugins = [\n  Chartist.plugins.lrTooltip({\n    template:'<h3 class=\"small\">{{meta}}</h3><p class=\"small\"><i class=\"glyphicon glyphicon-tag\"></i> $ {{y}}</p>',\n    labelOffset:{\n      x : 15\n    }\n  })\n];\n\nvar chart = new Chartist.Bar('#myChart', {labels, series}, {plugins, stackBars:true});\nvar chartLine = new Chartist.Line('#myChartLine', {labels, series}, {plugins});\n\n\n/** WEBPACK FOOTER **\n ** ./main.es6\n **/"],"sourceRoot":""}


--------------------------------------------------------------------------------
/example/lib/chartist.min.css:
--------------------------------------------------------------------------------
1 | .ct-double-octave:after,.ct-major-eleventh:after,.ct-major-second:after,.ct-major-seventh:after,.ct-major-sixth:after,.ct-major-tenth:after,.ct-major-third:after,.ct-major-twelfth:after,.ct-minor-second:after,.ct-minor-seventh:after,.ct-minor-sixth:after,.ct-minor-third:after,.ct-octave:after,.ct-perfect-fifth:after,.ct-perfect-fourth:after,.ct-square:after{content:"";clear:both}.ct-double-octave:after,.ct-double-octave:before,.ct-golden-section:after,.ct-major-eleventh:after,.ct-major-eleventh:before,.ct-major-second:after,.ct-major-second:before,.ct-major-seventh:after,.ct-major-seventh:before,.ct-major-sixth:after,.ct-major-sixth:before,.ct-major-tenth:after,.ct-major-tenth:before,.ct-major-third:after,.ct-major-third:before,.ct-major-twelfth:after,.ct-major-twelfth:before,.ct-minor-second:after,.ct-minor-second:before,.ct-minor-seventh:after,.ct-minor-seventh:before,.ct-minor-sixth:after,.ct-minor-sixth:before,.ct-minor-third:after,.ct-minor-third:before,.ct-octave:after,.ct-octave:before,.ct-perfect-fifth:after,.ct-perfect-fifth:before,.ct-perfect-fourth:after,.ct-perfect-fourth:before,.ct-square:after,.ct-square:before{content:""}.ct-label{fill:rgba(0,0,0,.4);color:rgba(0,0,0,.4);font-size:.75rem;line-height:1}.ct-chart-bar .ct-label,.ct-chart-line .ct-label{display:block;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.ct-label.ct-horizontal.ct-start{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-label.ct-horizontal.ct-end{-webkit-box-align:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-label.ct-vertical.ct-start{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:flex-end;-webkit-justify-content:flex-end;-ms-flex-pack:flex-end;justify-content:flex-end;text-align:right;text-anchor:end}.ct-label.ct-vertical.ct-end{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart-bar .ct-label.ct-horizontal.ct-start{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;text-anchor:start}.ct-chart-bar .ct-label.ct-horizontal.ct-end{-webkit-box-align:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;text-anchor:start}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start{-webkit-box-align:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end{-webkit-box-align:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:start}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:flex-end;-webkit-justify-content:flex-end;-ms-flex-pack:flex-end;justify-content:flex-end;text-align:right;text-anchor:end}.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;text-align:left;text-anchor:end}.ct-grid{stroke:rgba(0,0,0,.2);stroke-width:1px;stroke-dasharray:2px}.ct-point{stroke-width:10px;stroke-linecap:round}.ct-line{fill:none;stroke-width:4px}.ct-area{stroke:none;fill-opacity:.1}.ct-bar{fill:none;stroke-width:10px}.ct-slice-donut{fill:none;stroke-width:60px}.ct-series-a .ct-bar,.ct-series-a .ct-line,.ct-series-a .ct-point,.ct-series-a .ct-slice-donut{stroke:#d70206}.ct-series-a .ct-area,.ct-series-a .ct-slice-pie{fill:#d70206}.ct-series-b .ct-bar,.ct-series-b .ct-line,.ct-series-b .ct-point,.ct-series-b .ct-slice-donut{stroke:#f05b4f}.ct-series-b .ct-area,.ct-series-b .ct-slice-pie{fill:#f05b4f}.ct-series-c .ct-bar,.ct-series-c .ct-line,.ct-series-c .ct-point,.ct-series-c .ct-slice-donut{stroke:#f4c63d}.ct-series-c .ct-area,.ct-series-c .ct-slice-pie{fill:#f4c63d}.ct-series-d .ct-bar,.ct-series-d .ct-line,.ct-series-d .ct-point,.ct-series-d .ct-slice-donut{stroke:#d17905}.ct-series-d .ct-area,.ct-series-d .ct-slice-pie{fill:#d17905}.ct-series-e .ct-bar,.ct-series-e .ct-line,.ct-series-e .ct-point,.ct-series-e .ct-slice-donut{stroke:#453d3f}.ct-series-e .ct-area,.ct-series-e .ct-slice-pie{fill:#453d3f}.ct-series-f .ct-bar,.ct-series-f .ct-line,.ct-series-f .ct-point,.ct-series-f .ct-slice-donut{stroke:#59922b}.ct-series-f .ct-area,.ct-series-f .ct-slice-pie{fill:#59922b}.ct-series-g .ct-bar,.ct-series-g .ct-line,.ct-series-g .ct-point,.ct-series-g .ct-slice-donut{stroke:#0544d3}.ct-series-g .ct-area,.ct-series-g .ct-slice-pie{fill:#0544d3}.ct-series-h .ct-bar,.ct-series-h .ct-line,.ct-series-h .ct-point,.ct-series-h .ct-slice-donut{stroke:#6b0392}.ct-series-h .ct-area,.ct-series-h .ct-slice-pie{fill:#6b0392}.ct-series-i .ct-bar,.ct-series-i .ct-line,.ct-series-i .ct-point,.ct-series-i .ct-slice-donut{stroke:#f05b4f}.ct-series-i .ct-area,.ct-series-i .ct-slice-pie{fill:#f05b4f}.ct-series-j .ct-bar,.ct-series-j .ct-line,.ct-series-j .ct-point,.ct-series-j .ct-slice-donut{stroke:#dda458}.ct-series-j .ct-area,.ct-series-j .ct-slice-pie{fill:#dda458}.ct-series-k .ct-bar,.ct-series-k .ct-line,.ct-series-k .ct-point,.ct-series-k .ct-slice-donut{stroke:#eacf7d}.ct-series-k .ct-area,.ct-series-k .ct-slice-pie{fill:#eacf7d}.ct-series-l .ct-bar,.ct-series-l .ct-line,.ct-series-l .ct-point,.ct-series-l .ct-slice-donut{stroke:#86797d}.ct-series-l .ct-area,.ct-series-l .ct-slice-pie{fill:#86797d}.ct-series-m .ct-bar,.ct-series-m .ct-line,.ct-series-m .ct-point,.ct-series-m .ct-slice-donut{stroke:#b2c326}.ct-series-m .ct-area,.ct-series-m .ct-slice-pie{fill:#b2c326}.ct-series-n .ct-bar,.ct-series-n .ct-line,.ct-series-n .ct-point,.ct-series-n .ct-slice-donut{stroke:#6188e2}.ct-series-n .ct-area,.ct-series-n .ct-slice-pie{fill:#6188e2}.ct-series-o .ct-bar,.ct-series-o .ct-line,.ct-series-o .ct-point,.ct-series-o .ct-slice-donut{stroke:#a748ca}.ct-series-o .ct-area,.ct-series-o .ct-slice-pie{fill:#a748ca}.ct-square{display:block;position:relative;width:100%}.ct-square:before{display:block;float:left;width:0;height:0;padding-bottom:100%}.ct-square:after{display:table}.ct-square>svg{display:block;position:absolute;top:0;left:0}.ct-minor-second{display:block;position:relative;width:100%}.ct-minor-second:before{display:block;float:left;width:0;height:0;padding-bottom:93.75%}.ct-minor-second:after{display:table}.ct-minor-second>svg{display:block;position:absolute;top:0;left:0}.ct-major-second{display:block;position:relative;width:100%}.ct-major-second:before{display:block;float:left;width:0;height:0;padding-bottom:88.8888888889%}.ct-major-second:after{display:table}.ct-major-second>svg{display:block;position:absolute;top:0;left:0}.ct-minor-third{display:block;position:relative;width:100%}.ct-minor-third:before{display:block;float:left;width:0;height:0;padding-bottom:83.3333333333%}.ct-minor-third:after{display:table}.ct-minor-third>svg{display:block;position:absolute;top:0;left:0}.ct-major-third{display:block;position:relative;width:100%}.ct-major-third:before{display:block;float:left;width:0;height:0;padding-bottom:80%}.ct-major-third:after{display:table}.ct-major-third>svg{display:block;position:absolute;top:0;left:0}.ct-perfect-fourth{display:block;position:relative;width:100%}.ct-perfect-fourth:before{display:block;float:left;width:0;height:0;padding-bottom:75%}.ct-perfect-fourth:after{display:table}.ct-perfect-fourth>svg{display:block;position:absolute;top:0;left:0}.ct-perfect-fifth{display:block;position:relative;width:100%}.ct-perfect-fifth:before{display:block;float:left;width:0;height:0;padding-bottom:66.6666666667%}.ct-perfect-fifth:after{display:table}.ct-perfect-fifth>svg{display:block;position:absolute;top:0;left:0}.ct-minor-sixth{display:block;position:relative;width:100%}.ct-minor-sixth:before{display:block;float:left;width:0;height:0;padding-bottom:62.5%}.ct-minor-sixth:after{display:table}.ct-minor-sixth>svg{display:block;position:absolute;top:0;left:0}.ct-golden-section{display:block;position:relative;width:100%}.ct-golden-section:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:61.804697157%}.ct-golden-section:after{display:table;clear:both}.ct-golden-section>svg{display:block;position:absolute;top:0;left:0}.ct-major-sixth{display:block;position:relative;width:100%}.ct-major-sixth:before{display:block;float:left;width:0;height:0;padding-bottom:60%}.ct-major-sixth:after{display:table}.ct-major-sixth>svg{display:block;position:absolute;top:0;left:0}.ct-minor-seventh{display:block;position:relative;width:100%}.ct-minor-seventh:before{display:block;float:left;width:0;height:0;padding-bottom:56.25%}.ct-minor-seventh:after{display:table}.ct-minor-seventh>svg{display:block;position:absolute;top:0;left:0}.ct-major-seventh{display:block;position:relative;width:100%}.ct-major-seventh:before{display:block;float:left;width:0;height:0;padding-bottom:53.3333333333%}.ct-major-seventh:after{display:table}.ct-major-seventh>svg{display:block;position:absolute;top:0;left:0}.ct-octave{display:block;position:relative;width:100%}.ct-octave:before{display:block;float:left;width:0;height:0;padding-bottom:50%}.ct-octave:after{display:table}.ct-octave>svg{display:block;position:absolute;top:0;left:0}.ct-major-tenth{display:block;position:relative;width:100%}.ct-major-tenth:before{display:block;float:left;width:0;height:0;padding-bottom:40%}.ct-major-tenth:after{display:table}.ct-major-tenth>svg{display:block;position:absolute;top:0;left:0}.ct-major-eleventh{display:block;position:relative;width:100%}.ct-major-eleventh:before{display:block;float:left;width:0;height:0;padding-bottom:37.5%}.ct-major-eleventh:after{display:table}.ct-major-eleventh>svg{display:block;position:absolute;top:0;left:0}.ct-major-twelfth{display:block;position:relative;width:100%}.ct-major-twelfth:before{display:block;float:left;width:0;height:0;padding-bottom:33.3333333333%}.ct-major-twelfth:after{display:table}.ct-major-twelfth>svg{display:block;position:absolute;top:0;left:0}.ct-double-octave{display:block;position:relative;width:100%}.ct-double-octave:before{display:block;float:left;width:0;height:0;padding-bottom:25%}.ct-double-octave:after{display:table}.ct-double-octave>svg{display:block;position:absolute;top:0;left:0}


--------------------------------------------------------------------------------
/example/lib/chartist.js:
--------------------------------------------------------------------------------
   1 | (function (root, factory) {
   2 |   if (typeof define === 'function' && define.amd) {
   3 |     // AMD. Register as an anonymous module unless amdModuleId is set
   4 |     define([], function () {
   5 |       return (root['Chartist'] = factory());
   6 |     });
   7 |   } else if (typeof exports === 'object') {
   8 |     // Node. Does not work with strict CommonJS, but
   9 |     // only CommonJS-like environments that support module.exports,
  10 |     // like Node.
  11 |     module.exports = factory();
  12 |   } else {
  13 |     root['Chartist'] = factory();
  14 |   }
  15 | }(this, function () {
  16 | 
  17 | /* Chartist.js 0.9.4
  18 |  * Copyright © 2015 Gion Kunz
  19 |  * Free to use under the WTFPL license.
  20 |  * http://www.wtfpl.net/
  21 |  */
  22 | /**
  23 |  * The core module of Chartist that is mainly providing static functions and higher level functions for chart modules.
  24 |  *
  25 |  * @module Chartist.Core
  26 |  */
  27 | var Chartist = {
  28 |   version: '0.9.4'
  29 | };
  30 | 
  31 | (function (window, document, Chartist) {
  32 |   'use strict';
  33 | 
  34 |   /**
  35 |    * Helps to simplify functional style code
  36 |    *
  37 |    * @memberof Chartist.Core
  38 |    * @param {*} n This exact value will be returned by the noop function
  39 |    * @return {*} The same value that was provided to the n parameter
  40 |    */
  41 |   Chartist.noop = function (n) {
  42 |     return n;
  43 |   };
  44 | 
  45 |   /**
  46 |    * Generates a-z from a number 0 to 26
  47 |    *
  48 |    * @memberof Chartist.Core
  49 |    * @param {Number} n A number from 0 to 26 that will result in a letter a-z
  50 |    * @return {String} A character from a-z based on the input number n
  51 |    */
  52 |   Chartist.alphaNumerate = function (n) {
  53 |     // Limit to a-z
  54 |     return String.fromCharCode(97 + n % 26);
  55 |   };
  56 | 
  57 |   /**
  58 |    * Simple recursive object extend
  59 |    *
  60 |    * @memberof Chartist.Core
  61 |    * @param {Object} target Target object where the source will be merged into
  62 |    * @param {Object...} sources This object (objects) will be merged into target and then target is returned
  63 |    * @return {Object} An object that has the same reference as target but is extended and merged with the properties of source
  64 |    */
  65 |   Chartist.extend = function (target) {
  66 |     target = target || {};
  67 | 
  68 |     var sources = Array.prototype.slice.call(arguments, 1);
  69 |     sources.forEach(function(source) {
  70 |       for (var prop in source) {
  71 |         if (typeof source[prop] === 'object' && source[prop] !== null && !(source[prop] instanceof Array)) {
  72 |           target[prop] = Chartist.extend({}, target[prop], source[prop]);
  73 |         } else {
  74 |           target[prop] = source[prop];
  75 |         }
  76 |       }
  77 |     });
  78 | 
  79 |     return target;
  80 |   };
  81 | 
  82 |   /**
  83 |    * Replaces all occurrences of subStr in str with newSubStr and returns a new string.
  84 |    *
  85 |    * @memberof Chartist.Core
  86 |    * @param {String} str
  87 |    * @param {String} subStr
  88 |    * @param {String} newSubStr
  89 |    * @return {String}
  90 |    */
  91 |   Chartist.replaceAll = function(str, subStr, newSubStr) {
  92 |     return str.replace(new RegExp(subStr, 'g'), newSubStr);
  93 |   };
  94 | 
  95 |   /**
  96 |    * Converts a string to a number while removing the unit if present. If a number is passed then this will be returned unmodified.
  97 |    *
  98 |    * @memberof Chartist.Core
  99 |    * @param {String|Number} value
 100 |    * @return {Number} Returns the string as number or NaN if the passed length could not be converted to pixel
 101 |    */
 102 |   Chartist.stripUnit = function(value) {
 103 |     if(typeof value === 'string') {
 104 |       value = value.replace(/[^0-9\+-\.]/g, '');
 105 |     }
 106 | 
 107 |     return +value;
 108 |   };
 109 | 
 110 |   /**
 111 |    * Converts a number to a string with a unit. If a string is passed then this will be returned unmodified.
 112 |    *
 113 |    * @memberof Chartist.Core
 114 |    * @param {Number} value
 115 |    * @param {String} unit
 116 |    * @return {String} Returns the passed number value with unit.
 117 |    */
 118 |   Chartist.ensureUnit = function(value, unit) {
 119 |     if(typeof value === 'number') {
 120 |       value = value + unit;
 121 |     }
 122 | 
 123 |     return value;
 124 |   };
 125 | 
 126 |   /**
 127 |    * This is a wrapper around document.querySelector that will return the query if it's already of type Node
 128 |    *
 129 |    * @memberof Chartist.Core
 130 |    * @param {String|Node} query The query to use for selecting a Node or a DOM node that will be returned directly
 131 |    * @return {Node}
 132 |    */
 133 |   Chartist.querySelector = function(query) {
 134 |     return query instanceof Node ? query : document.querySelector(query);
 135 |   };
 136 | 
 137 |   /**
 138 |    * Functional style helper to produce array with given length initialized with undefined values
 139 |    *
 140 |    * @memberof Chartist.Core
 141 |    * @param length
 142 |    * @return {Array}
 143 |    */
 144 |   Chartist.times = function(length) {
 145 |     return Array.apply(null, new Array(length));
 146 |   };
 147 | 
 148 |   /**
 149 |    * Sum helper to be used in reduce functions
 150 |    *
 151 |    * @memberof Chartist.Core
 152 |    * @param previous
 153 |    * @param current
 154 |    * @return {*}
 155 |    */
 156 |   Chartist.sum = function(previous, current) {
 157 |     return previous + (current ? current : 0);
 158 |   };
 159 | 
 160 |   /**
 161 |    * Multiply helper to be used in `Array.map` for multiplying each value of an array with a factor.
 162 |    *
 163 |    * @memberof Chartist.Core
 164 |    * @param {Number} factor
 165 |    * @returns {Function} Function that can be used in `Array.map` to multiply each value in an array
 166 |    */
 167 |   Chartist.mapMultiply = function(factor) {
 168 |     return function(num) {
 169 |       return num * factor;
 170 |     };
 171 |   };
 172 | 
 173 |   /**
 174 |    * Add helper to be used in `Array.map` for adding a addend to each value of an array.
 175 |    *
 176 |    * @memberof Chartist.Core
 177 |    * @param {Number} addend
 178 |    * @returns {Function} Function that can be used in `Array.map` to add a addend to each value in an array
 179 |    */
 180 |   Chartist.mapAdd = function(addend) {
 181 |     return function(num) {
 182 |       return num + addend;
 183 |     };
 184 |   };
 185 | 
 186 |   /**
 187 |    * Map for multi dimensional arrays where their nested arrays will be mapped in serial. The output array will have the length of the largest nested array. The callback function is called with variable arguments where each argument is the nested array value (or undefined if there are no more values).
 188 |    *
 189 |    * @memberof Chartist.Core
 190 |    * @param arr
 191 |    * @param cb
 192 |    * @return {Array}
 193 |    */
 194 |   Chartist.serialMap = function(arr, cb) {
 195 |     var result = [],
 196 |         length = Math.max.apply(null, arr.map(function(e) {
 197 |           return e.length;
 198 |         }));
 199 | 
 200 |     Chartist.times(length).forEach(function(e, index) {
 201 |       var args = arr.map(function(e) {
 202 |         return e[index];
 203 |       });
 204 | 
 205 |       result[index] = cb.apply(null, args);
 206 |     });
 207 | 
 208 |     return result;
 209 |   };
 210 | 
 211 |   /**
 212 |    * This helper function can be used to round values with certain precision level after decimal. This is used to prevent rounding errors near float point precision limit.
 213 |    *
 214 |    * @memberof Chartist.Core
 215 |    * @param {Number} value The value that should be rounded with precision
 216 |    * @param {Number} [digits] The number of digits after decimal used to do the rounding
 217 |    * @returns {number} Rounded value
 218 |    */
 219 |   Chartist.roundWithPrecision = function(value, digits) {
 220 |     var precision = Math.pow(10, digits || Chartist.precision);
 221 |     return Math.round(value * precision) / precision;
 222 |   };
 223 | 
 224 |   /**
 225 |    * Precision level used internally in Chartist for rounding. If you require more decimal places you can increase this number.
 226 |    *
 227 |    * @memberof Chartist.Core
 228 |    * @type {number}
 229 |    */
 230 |   Chartist.precision = 8;
 231 | 
 232 |   /**
 233 |    * A map with characters to escape for strings to be safely used as attribute values.
 234 |    *
 235 |    * @memberof Chartist.Core
 236 |    * @type {Object}
 237 |    */
 238 |   Chartist.escapingMap = {
 239 |     '&': '&amp;',
 240 |     '<': '&lt;',
 241 |     '>': '&gt;',
 242 |     '"': '&quot;',
 243 |     '\'': '&#039;'
 244 |   };
 245 | 
 246 |   /**
 247 |    * This function serializes arbitrary data to a string. In case of data that can't be easily converted to a string, this function will create a wrapper object and serialize the data using JSON.stringify. The outcoming string will always be escaped using Chartist.escapingMap.
 248 |    * If called with null or undefined the function will return immediately with null or undefined.
 249 |    *
 250 |    * @memberof Chartist.Core
 251 |    * @param {Number|String|Object} data
 252 |    * @return {String}
 253 |    */
 254 |   Chartist.serialize = function(data) {
 255 |     if(data === null || data === undefined) {
 256 |       return data;
 257 |     } else if(typeof data === 'number') {
 258 |       data = ''+data;
 259 |     } else if(typeof data === 'object') {
 260 |       data = JSON.stringify({data: data});
 261 |     }
 262 | 
 263 |     return Object.keys(Chartist.escapingMap).reduce(function(result, key) {
 264 |       return Chartist.replaceAll(result, key, Chartist.escapingMap[key]);
 265 |     }, data);
 266 |   };
 267 | 
 268 |   /**
 269 |    * This function de-serializes a string previously serialized with Chartist.serialize. The string will always be unescaped using Chartist.escapingMap before it's returned. Based on the input value the return type can be Number, String or Object. JSON.parse is used with try / catch to see if the unescaped string can be parsed into an Object and this Object will be returned on success.
 270 |    *
 271 |    * @memberof Chartist.Core
 272 |    * @param {String} data
 273 |    * @return {String|Number|Object}
 274 |    */
 275 |   Chartist.deserialize = function(data) {
 276 |     if(typeof data !== 'string') {
 277 |       return data;
 278 |     }
 279 | 
 280 |     data = Object.keys(Chartist.escapingMap).reduce(function(result, key) {
 281 |       return Chartist.replaceAll(result, Chartist.escapingMap[key], key);
 282 |     }, data);
 283 | 
 284 |     try {
 285 |       data = JSON.parse(data);
 286 |       data = data.data !== undefined ? data.data : data;
 287 |     } catch(e) {}
 288 | 
 289 |     return data;
 290 |   };
 291 | 
 292 |   /**
 293 |    * Create or reinitialize the SVG element for the chart
 294 |    *
 295 |    * @memberof Chartist.Core
 296 |    * @param {Node} container The containing DOM Node object that will be used to plant the SVG element
 297 |    * @param {String} width Set the width of the SVG element. Default is 100%
 298 |    * @param {String} height Set the height of the SVG element. Default is 100%
 299 |    * @param {String} className Specify a class to be added to the SVG element
 300 |    * @return {Object} The created/reinitialized SVG element
 301 |    */
 302 |   Chartist.createSvg = function (container, width, height, className) {
 303 |     var svg;
 304 | 
 305 |     width = width || '100%';
 306 |     height = height || '100%';
 307 | 
 308 |     // Check if there is a previous SVG element in the container that contains the Chartist XML namespace and remove it
 309 |     // Since the DOM API does not support namespaces we need to manually search the returned list http://www.w3.org/TR/selectors-api/
 310 |     Array.prototype.slice.call(container.querySelectorAll('svg')).filter(function filterChartistSvgObjects(svg) {
 311 |       return svg.getAttributeNS('http://www.w3.org/2000/xmlns/', Chartist.xmlNs.prefix);
 312 |     }).forEach(function removePreviousElement(svg) {
 313 |       container.removeChild(svg);
 314 |     });
 315 | 
 316 |     // Create svg object with width and height or use 100% as default
 317 |     svg = new Chartist.Svg('svg').attr({
 318 |       width: width,
 319 |       height: height
 320 |     }).addClass(className).attr({
 321 |       style: 'width: ' + width + '; height: ' + height + ';'
 322 |     });
 323 | 
 324 |     // Add the DOM node to our container
 325 |     container.appendChild(svg._node);
 326 | 
 327 |     return svg;
 328 |   };
 329 | 
 330 | 
 331 |   /**
 332 |    * Reverses the series, labels and series data arrays.
 333 |    *
 334 |    * @memberof Chartist.Core
 335 |    * @param data
 336 |    */
 337 |   Chartist.reverseData = function(data) {
 338 |     data.labels.reverse();
 339 |     data.series.reverse();
 340 |     for (var i = 0; i < data.series.length; i++) {
 341 |       if(typeof(data.series[i]) === 'object' && data.series[i].data !== undefined) {
 342 |         data.series[i].data.reverse();
 343 |       } else if(data.series[i] instanceof Array) {
 344 |         data.series[i].reverse();
 345 |       }
 346 |     }
 347 |   };
 348 | 
 349 |   /**
 350 |    * Convert data series into plain array
 351 |    *
 352 |    * @memberof Chartist.Core
 353 |    * @param {Object} data The series object that contains the data to be visualized in the chart
 354 |    * @param {Boolean} reverse If true the whole data is reversed by the getDataArray call. This will modify the data object passed as first parameter. The labels as well as the series order is reversed. The whole series data arrays are reversed too.
 355 |    * @param {Boolean} multi Create a multi dimensional array from a series data array where a value object with `x` and `y` values will be created.
 356 |    * @return {Array} A plain array that contains the data to be visualized in the chart
 357 |    */
 358 |   Chartist.getDataArray = function (data, reverse, multi) {
 359 |     // If the data should be reversed but isn't we need to reverse it
 360 |     // If it's reversed but it shouldn't we need to reverse it back
 361 |     // That's required to handle data updates correctly and to reflect the responsive configurations
 362 |     if(reverse && !data.reversed || !reverse && data.reversed) {
 363 |       Chartist.reverseData(data);
 364 |       data.reversed = !data.reversed;
 365 |     }
 366 | 
 367 |     // Recursively walks through nested arrays and convert string values to numbers and objects with value properties
 368 |     // to values. Check the tests in data core -> data normalization for a detailed specification of expected values
 369 |     function recursiveConvert(value) {
 370 |       if(Chartist.isFalseyButZero(value)) {
 371 |         // This is a hole in data and we should return undefined
 372 |         return undefined;
 373 |       } else if((value.data || value) instanceof Array) {
 374 |         return (value.data || value).map(recursiveConvert);
 375 |       } else if(value.hasOwnProperty('value')) {
 376 |         return recursiveConvert(value.value);
 377 |       } else {
 378 |         if(multi) {
 379 |           var multiValue = {};
 380 | 
 381 |           // Single series value arrays are assumed to specify the Y-Axis value
 382 |           // For example: [1, 2] => [{x: undefined, y: 1}, {x: undefined, y: 2}]
 383 |           // If multi is a string then it's assumed that it specified which dimension should be filled as default
 384 |           if(typeof multi === 'string') {
 385 |             multiValue[multi] = Chartist.getNumberOrUndefined(value);
 386 |           } else {
 387 |             multiValue.y = Chartist.getNumberOrUndefined(value);
 388 |           }
 389 | 
 390 |           multiValue.x = value.hasOwnProperty('x') ? Chartist.getNumberOrUndefined(value.x) : multiValue.x;
 391 |           multiValue.y = value.hasOwnProperty('y') ? Chartist.getNumberOrUndefined(value.y) : multiValue.y;
 392 | 
 393 |           return multiValue;
 394 | 
 395 |         } else {
 396 |           return Chartist.getNumberOrUndefined(value);
 397 |         }
 398 |       }
 399 |     }
 400 | 
 401 |     return data.series.map(recursiveConvert);
 402 |   };
 403 | 
 404 |   /**
 405 |    * Converts a number into a padding object.
 406 |    *
 407 |    * @memberof Chartist.Core
 408 |    * @param {Object|Number} padding
 409 |    * @param {Number} [fallback] This value is used to fill missing values if a incomplete padding object was passed
 410 |    * @returns {Object} Returns a padding object containing top, right, bottom, left properties filled with the padding number passed in as argument. If the argument is something else than a number (presumably already a correct padding object) then this argument is directly returned.
 411 |    */
 412 |   Chartist.normalizePadding = function(padding, fallback) {
 413 |     fallback = fallback || 0;
 414 | 
 415 |     return typeof padding === 'number' ? {
 416 |       top: padding,
 417 |       right: padding,
 418 |       bottom: padding,
 419 |       left: padding
 420 |     } : {
 421 |       top: typeof padding.top === 'number' ? padding.top : fallback,
 422 |       right: typeof padding.right === 'number' ? padding.right : fallback,
 423 |       bottom: typeof padding.bottom === 'number' ? padding.bottom : fallback,
 424 |       left: typeof padding.left === 'number' ? padding.left : fallback
 425 |     };
 426 |   };
 427 | 
 428 |   Chartist.getMetaData = function(series, index) {
 429 |     var value = series.data ? series.data[index] : series[index];
 430 |     return value ? Chartist.serialize(value.meta) : undefined;
 431 |   };
 432 | 
 433 |   /**
 434 |    * Calculate the order of magnitude for the chart scale
 435 |    *
 436 |    * @memberof Chartist.Core
 437 |    * @param {Number} value The value Range of the chart
 438 |    * @return {Number} The order of magnitude
 439 |    */
 440 |   Chartist.orderOfMagnitude = function (value) {
 441 |     return Math.floor(Math.log(Math.abs(value)) / Math.LN10);
 442 |   };
 443 | 
 444 |   /**
 445 |    * Project a data length into screen coordinates (pixels)
 446 |    *
 447 |    * @memberof Chartist.Core
 448 |    * @param {Object} axisLength The svg element for the chart
 449 |    * @param {Number} length Single data value from a series array
 450 |    * @param {Object} bounds All the values to set the bounds of the chart
 451 |    * @return {Number} The projected data length in pixels
 452 |    */
 453 |   Chartist.projectLength = function (axisLength, length, bounds) {
 454 |     return length / bounds.range * axisLength;
 455 |   };
 456 | 
 457 |   /**
 458 |    * Get the height of the area in the chart for the data series
 459 |    *
 460 |    * @memberof Chartist.Core
 461 |    * @param {Object} svg The svg element for the chart
 462 |    * @param {Object} options The Object that contains all the optional values for the chart
 463 |    * @return {Number} The height of the area in the chart for the data series
 464 |    */
 465 |   Chartist.getAvailableHeight = function (svg, options) {
 466 |     return Math.max((Chartist.stripUnit(options.height) || svg.height()) - (options.chartPadding.top +  options.chartPadding.bottom) - options.axisX.offset, 0);
 467 |   };
 468 | 
 469 |   /**
 470 |    * Get highest and lowest value of data array. This Array contains the data that will be visualized in the chart.
 471 |    *
 472 |    * @memberof Chartist.Core
 473 |    * @param {Array} data The array that contains the data to be visualized in the chart
 474 |    * @param {Object} options The Object that contains the chart options
 475 |    * @param {String} dimension Axis dimension 'x' or 'y' used to access the correct value and high / low configuration
 476 |    * @return {Object} An object that contains the highest and lowest value that will be visualized on the chart.
 477 |    */
 478 |   Chartist.getHighLow = function (data, options, dimension) {
 479 |     // TODO: Remove workaround for deprecated global high / low config. Axis high / low configuration is preferred
 480 |     options = Chartist.extend({}, options, dimension ? options['axis' + dimension.toUpperCase()] : {});
 481 | 
 482 |     var highLow = {
 483 |         high: options.high === undefined ? -Number.MAX_VALUE : +options.high,
 484 |         low: options.low === undefined ? Number.MAX_VALUE : +options.low
 485 |       };
 486 |     var findHigh = options.high === undefined;
 487 |     var findLow = options.low === undefined;
 488 | 
 489 |     // Function to recursively walk through arrays and find highest and lowest number
 490 |     function recursiveHighLow(data) {
 491 |       if(data === undefined) {
 492 |         return undefined;
 493 |       } else if(data instanceof Array) {
 494 |         for (var i = 0; i < data.length; i++) {
 495 |           recursiveHighLow(data[i]);
 496 |         }
 497 |       } else {
 498 |         var value = dimension ? +data[dimension] : +data;
 499 | 
 500 |         if (findHigh && value > highLow.high) {
 501 |           highLow.high = value;
 502 |         }
 503 | 
 504 |         if (findLow && value < highLow.low) {
 505 |           highLow.low = value;
 506 |         }
 507 |       }
 508 |     }
 509 | 
 510 |     // Start to find highest and lowest number recursively
 511 |     if(findHigh || findLow) {
 512 |       recursiveHighLow(data);
 513 |     }
 514 | 
 515 |     // Overrides of high / low based on reference value, it will make sure that the invisible reference value is
 516 |     // used to generate the chart. This is useful when the chart always needs to contain the position of the
 517 |     // invisible reference value in the view i.e. for bipolar scales.
 518 |     if (options.referenceValue || options.referenceValue === 0) {
 519 |       highLow.high = Math.max(options.referenceValue, highLow.high);
 520 |       highLow.low = Math.min(options.referenceValue, highLow.low);
 521 |     }
 522 | 
 523 |     // If high and low are the same because of misconfiguration or flat data (only the same value) we need
 524 |     // to set the high or low to 0 depending on the polarity
 525 |     if (highLow.high <= highLow.low) {
 526 |       // If both values are 0 we set high to 1
 527 |       if (highLow.low === 0) {
 528 |         highLow.high = 1;
 529 |       } else if (highLow.low < 0) {
 530 |         // If we have the same negative value for the bounds we set bounds.high to 0
 531 |         highLow.high = 0;
 532 |       } else {
 533 |         // If we have the same positive value for the bounds we set bounds.low to 0
 534 |         highLow.low = 0;
 535 |       }
 536 |     }
 537 | 
 538 |     return highLow;
 539 |   };
 540 | 
 541 |   /**
 542 |    * Checks if the value is a valid number or string with a number.
 543 |    *
 544 |    * @memberof Chartist.Core
 545 |    * @param value
 546 |    * @returns {Boolean}
 547 |    */
 548 |   Chartist.isNum = function(value) {
 549 |     return !isNaN(value) && isFinite(value);
 550 |   };
 551 | 
 552 |   /**
 553 |    * Returns true on all falsey values except the numeric value 0.
 554 |    *
 555 |    * @memberof Chartist.Core
 556 |    * @param value
 557 |    * @returns {boolean}
 558 |    */
 559 |   Chartist.isFalseyButZero = function(value) {
 560 |     return !value && value !== 0;
 561 |   };
 562 | 
 563 |   /**
 564 |    * Returns a number if the passed parameter is a valid number or the function will return undefined. On all other values than a valid number, this function will return undefined.
 565 |    *
 566 |    * @memberof Chartist.Core
 567 |    * @param value
 568 |    * @returns {*}
 569 |    */
 570 |   Chartist.getNumberOrUndefined = function(value) {
 571 |     return isNaN(+value) ? undefined : +value;
 572 |   };
 573 | 
 574 |   /**
 575 |    * Gets a value from a dimension `value.x` or `value.y` while returning value directly if it's a valid numeric value. If the value is not numeric and it's falsey this function will return undefined.
 576 |    *
 577 |    * @param value
 578 |    * @param dimension
 579 |    * @returns {*}
 580 |    */
 581 |   Chartist.getMultiValue = function(value, dimension) {
 582 |     if(Chartist.isNum(value)) {
 583 |       return +value;
 584 |     } else if(value) {
 585 |       return value[dimension || 'y'] || 0;
 586 |     } else {
 587 |       return 0;
 588 |     }
 589 |   };
 590 | 
 591 |   /**
 592 |    * Pollard Rho Algorithm to find smallest factor of an integer value. There are more efficient algorithms for factorization, but this one is quite efficient and not so complex.
 593 |    *
 594 |    * @memberof Chartist.Core
 595 |    * @param {Number} num An integer number where the smallest factor should be searched for
 596 |    * @returns {Number} The smallest integer factor of the parameter num.
 597 |    */
 598 |   Chartist.rho = function(num) {
 599 |     if(num === 1) {
 600 |       return num;
 601 |     }
 602 | 
 603 |     function gcd(p, q) {
 604 |       if (p % q === 0) {
 605 |         return q;
 606 |       } else {
 607 |         return gcd(q, p % q);
 608 |       }
 609 |     }
 610 | 
 611 |     function f(x) {
 612 |       return x * x + 1;
 613 |     }
 614 | 
 615 |     var x1 = 2, x2 = 2, divisor;
 616 |     if (num % 2 === 0) {
 617 |       return 2;
 618 |     }
 619 | 
 620 |     do {
 621 |       x1 = f(x1) % num;
 622 |       x2 = f(f(x2)) % num;
 623 |       divisor = gcd(Math.abs(x1 - x2), num);
 624 |     } while (divisor === 1);
 625 | 
 626 |     return divisor;
 627 |   };
 628 | 
 629 |   /**
 630 |    * Calculate and retrieve all the bounds for the chart and return them in one array
 631 |    *
 632 |    * @memberof Chartist.Core
 633 |    * @param {Number} axisLength The length of the Axis used for
 634 |    * @param {Object} highLow An object containing a high and low property indicating the value range of the chart.
 635 |    * @param {Number} scaleMinSpace The minimum projected length a step should result in
 636 |    * @param {Boolean} onlyInteger
 637 |    * @return {Object} All the values to set the bounds of the chart
 638 |    */
 639 |   Chartist.getBounds = function (axisLength, highLow, scaleMinSpace, onlyInteger) {
 640 |     var i,
 641 |       optimizationCounter = 0,
 642 |       newMin,
 643 |       newMax,
 644 |       bounds = {
 645 |         high: highLow.high,
 646 |         low: highLow.low
 647 |       };
 648 | 
 649 |     bounds.valueRange = bounds.high - bounds.low;
 650 |     bounds.oom = Chartist.orderOfMagnitude(bounds.valueRange);
 651 |     bounds.step = Math.pow(10, bounds.oom);
 652 |     bounds.min = Math.floor(bounds.low / bounds.step) * bounds.step;
 653 |     bounds.max = Math.ceil(bounds.high / bounds.step) * bounds.step;
 654 |     bounds.range = bounds.max - bounds.min;
 655 |     bounds.numberOfSteps = Math.round(bounds.range / bounds.step);
 656 | 
 657 |     // Optimize scale step by checking if subdivision is possible based on horizontalGridMinSpace
 658 |     // If we are already below the scaleMinSpace value we will scale up
 659 |     var length = Chartist.projectLength(axisLength, bounds.step, bounds);
 660 |     var scaleUp = length < scaleMinSpace;
 661 |     var smallestFactor = onlyInteger ? Chartist.rho(bounds.range) : 0;
 662 | 
 663 |     // First check if we should only use integer steps and if step 1 is still larger than scaleMinSpace so we can use 1
 664 |     if(onlyInteger && Chartist.projectLength(axisLength, 1, bounds) >= scaleMinSpace) {
 665 |       bounds.step = 1;
 666 |     } else if(onlyInteger && smallestFactor < bounds.step && Chartist.projectLength(axisLength, smallestFactor, bounds) >= scaleMinSpace) {
 667 |       // If step 1 was too small, we can try the smallest factor of range
 668 |       // If the smallest factor is smaller than the current bounds.step and the projected length of smallest factor
 669 |       // is larger than the scaleMinSpace we should go for it.
 670 |       bounds.step = smallestFactor;
 671 |     } else {
 672 |       // Trying to divide or multiply by 2 and find the best step value
 673 |       while (true) {
 674 |         if (scaleUp && Chartist.projectLength(axisLength, bounds.step, bounds) <= scaleMinSpace) {
 675 |           bounds.step *= 2;
 676 |         } else if (!scaleUp && Chartist.projectLength(axisLength, bounds.step / 2, bounds) >= scaleMinSpace) {
 677 |           bounds.step /= 2;
 678 |           if(onlyInteger && bounds.step % 1 !== 0) {
 679 |             bounds.step *= 2;
 680 |             break;
 681 |           }
 682 |         } else {
 683 |           break;
 684 |         }
 685 | 
 686 |         if(optimizationCounter++ > 1000) {
 687 |           throw new Error('Exceeded maximum number of iterations while optimizing scale step!');
 688 |         }
 689 |       }
 690 |     }
 691 | 
 692 |     // Narrow min and max based on new step
 693 |     newMin = bounds.min;
 694 |     newMax = bounds.max;
 695 |     while(newMin + bounds.step <= bounds.low) {
 696 |       newMin += bounds.step;
 697 |     }
 698 |     while(newMax - bounds.step >= bounds.high) {
 699 |       newMax -= bounds.step;
 700 |     }
 701 |     bounds.min = newMin;
 702 |     bounds.max = newMax;
 703 |     bounds.range = bounds.max - bounds.min;
 704 | 
 705 |     bounds.values = [];
 706 |     for (i = bounds.min; i <= bounds.max; i += bounds.step) {
 707 |       bounds.values.push(Chartist.roundWithPrecision(i));
 708 |     }
 709 | 
 710 |     return bounds;
 711 |   };
 712 | 
 713 |   /**
 714 |    * Calculate cartesian coordinates of polar coordinates
 715 |    *
 716 |    * @memberof Chartist.Core
 717 |    * @param {Number} centerX X-axis coordinates of center point of circle segment
 718 |    * @param {Number} centerY X-axis coordinates of center point of circle segment
 719 |    * @param {Number} radius Radius of circle segment
 720 |    * @param {Number} angleInDegrees Angle of circle segment in degrees
 721 |    * @return {Number} Coordinates of point on circumference
 722 |    */
 723 |   Chartist.polarToCartesian = function (centerX, centerY, radius, angleInDegrees) {
 724 |     var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
 725 | 
 726 |     return {
 727 |       x: centerX + (radius * Math.cos(angleInRadians)),
 728 |       y: centerY + (radius * Math.sin(angleInRadians))
 729 |     };
 730 |   };
 731 | 
 732 |   /**
 733 |    * Initialize chart drawing rectangle (area where chart is drawn) x1,y1 = bottom left / x2,y2 = top right
 734 |    *
 735 |    * @memberof Chartist.Core
 736 |    * @param {Object} svg The svg element for the chart
 737 |    * @param {Object} options The Object that contains all the optional values for the chart
 738 |    * @param {Number} [fallbackPadding] The fallback padding if partial padding objects are used
 739 |    * @return {Object} The chart rectangles coordinates inside the svg element plus the rectangles measurements
 740 |    */
 741 |   Chartist.createChartRect = function (svg, options, fallbackPadding) {
 742 |     var hasAxis = !!(options.axisX || options.axisY);
 743 |     var yAxisOffset = hasAxis ? options.axisY.offset : 0;
 744 |     var xAxisOffset = hasAxis ? options.axisX.offset : 0;
 745 |     // If width or height results in invalid value (including 0) we fallback to the unitless settings or even 0
 746 |     var width = svg.width() || Chartist.stripUnit(options.width) || 0;
 747 |     var height = svg.height() || Chartist.stripUnit(options.height) || 0;
 748 |     var normalizedPadding = Chartist.normalizePadding(options.chartPadding, fallbackPadding);
 749 | 
 750 |     // If settings were to small to cope with offset (legacy) and padding, we'll adjust
 751 |     width = Math.max(width, yAxisOffset + normalizedPadding.left + normalizedPadding.right);
 752 |     height = Math.max(height, xAxisOffset + normalizedPadding.top + normalizedPadding.bottom);
 753 | 
 754 |     var chartRect = {
 755 |       padding: normalizedPadding,
 756 |       width: function () {
 757 |         return this.x2 - this.x1;
 758 |       },
 759 |       height: function () {
 760 |         return this.y1 - this.y2;
 761 |       }
 762 |     };
 763 | 
 764 |     if(hasAxis) {
 765 |       if (options.axisX.position === 'start') {
 766 |         chartRect.y2 = normalizedPadding.top + xAxisOffset;
 767 |         chartRect.y1 = Math.max(height - normalizedPadding.bottom, chartRect.y2 + 1);
 768 |       } else {
 769 |         chartRect.y2 = normalizedPadding.top;
 770 |         chartRect.y1 = Math.max(height - normalizedPadding.bottom - xAxisOffset, chartRect.y2 + 1);
 771 |       }
 772 | 
 773 |       if (options.axisY.position === 'start') {
 774 |         chartRect.x1 = normalizedPadding.left + yAxisOffset;
 775 |         chartRect.x2 = Math.max(width - normalizedPadding.right, chartRect.x1 + 1);
 776 |       } else {
 777 |         chartRect.x1 = normalizedPadding.left;
 778 |         chartRect.x2 = Math.max(width - normalizedPadding.right - yAxisOffset, chartRect.x1 + 1);
 779 |       }
 780 |     } else {
 781 |       chartRect.x1 = normalizedPadding.left;
 782 |       chartRect.x2 = Math.max(width - normalizedPadding.right, chartRect.x1 + 1);
 783 |       chartRect.y2 = normalizedPadding.top;
 784 |       chartRect.y1 = Math.max(height - normalizedPadding.bottom, chartRect.y2 + 1);
 785 |     }
 786 | 
 787 |     return chartRect;
 788 |   };
 789 | 
 790 |   /**
 791 |    * Creates a grid line based on a projected value.
 792 |    *
 793 |    * @memberof Chartist.Core
 794 |    * @param position
 795 |    * @param index
 796 |    * @param axis
 797 |    * @param offset
 798 |    * @param length
 799 |    * @param group
 800 |    * @param classes
 801 |    * @param eventEmitter
 802 |    */
 803 |   Chartist.createGrid = function(position, index, axis, offset, length, group, classes, eventEmitter) {
 804 |     var positionalData = {};
 805 |     positionalData[axis.units.pos + '1'] = position;
 806 |     positionalData[axis.units.pos + '2'] = position;
 807 |     positionalData[axis.counterUnits.pos + '1'] = offset;
 808 |     positionalData[axis.counterUnits.pos + '2'] = offset + length;
 809 | 
 810 |     var gridElement = group.elem('line', positionalData, classes.join(' '));
 811 | 
 812 |     // Event for grid draw
 813 |     eventEmitter.emit('draw',
 814 |       Chartist.extend({
 815 |         type: 'grid',
 816 |         axis: axis,
 817 |         index: index,
 818 |         group: group,
 819 |         element: gridElement
 820 |       }, positionalData)
 821 |     );
 822 |   };
 823 | 
 824 |   /**
 825 |    * Creates a label based on a projected value and an axis.
 826 |    *
 827 |    * @memberof Chartist.Core
 828 |    * @param position
 829 |    * @param length
 830 |    * @param index
 831 |    * @param labels
 832 |    * @param axis
 833 |    * @param axisOffset
 834 |    * @param labelOffset
 835 |    * @param group
 836 |    * @param classes
 837 |    * @param useForeignObject
 838 |    * @param eventEmitter
 839 |    */
 840 |   Chartist.createLabel = function(position, length, index, labels, axis, axisOffset, labelOffset, group, classes, useForeignObject, eventEmitter) {
 841 |     var labelElement;
 842 |     var positionalData = {};
 843 | 
 844 |     positionalData[axis.units.pos] = position + labelOffset[axis.units.pos];
 845 |     positionalData[axis.counterUnits.pos] = labelOffset[axis.counterUnits.pos];
 846 |     positionalData[axis.units.len] = length;
 847 |     positionalData[axis.counterUnits.len] = axisOffset - 10;
 848 | 
 849 |     if(useForeignObject) {
 850 |       // We need to set width and height explicitly to px as span will not expand with width and height being
 851 |       // 100% in all browsers
 852 |       var content = '<span class="' + classes.join(' ') + '" style="' +
 853 |         axis.units.len + ': ' + Math.round(positionalData[axis.units.len]) + 'px; ' +
 854 |         axis.counterUnits.len + ': ' + Math.round(positionalData[axis.counterUnits.len]) + 'px">' +
 855 |         labels[index] + '</span>';
 856 | 
 857 |       labelElement = group.foreignObject(content, Chartist.extend({
 858 |         style: 'overflow: visible;'
 859 |       }, positionalData));
 860 |     } else {
 861 |       labelElement = group.elem('text', positionalData, classes.join(' ')).text(labels[index]);
 862 |     }
 863 | 
 864 |     eventEmitter.emit('draw', Chartist.extend({
 865 |       type: 'label',
 866 |       axis: axis,
 867 |       index: index,
 868 |       group: group,
 869 |       element: labelElement,
 870 |       text: labels[index]
 871 |     }, positionalData));
 872 |   };
 873 | 
 874 |   /**
 875 |    * Helper to read series specific options from options object. It automatically falls back to the global option if
 876 |    * there is no option in the series options.
 877 |    *
 878 |    * @param {Object} series Series object
 879 |    * @param {Object} options Chartist options object
 880 |    * @param {string} key The options key that should be used to obtain the options
 881 |    * @returns {*}
 882 |    */
 883 |   Chartist.getSeriesOption = function(series, options, key) {
 884 |     if(series.name && options.series && options.series[series.name]) {
 885 |       var seriesOptions = options.series[series.name];
 886 |       return seriesOptions.hasOwnProperty(key) ? seriesOptions[key] : options[key];
 887 |     } else {
 888 |       return options[key];
 889 |     }
 890 |   };
 891 | 
 892 |   /**
 893 |    * Provides options handling functionality with callback for options changes triggered by responsive options and media query matches
 894 |    *
 895 |    * @memberof Chartist.Core
 896 |    * @param {Object} options Options set by user
 897 |    * @param {Array} responsiveOptions Optional functions to add responsive behavior to chart
 898 |    * @param {Object} eventEmitter The event emitter that will be used to emit the options changed events
 899 |    * @return {Object} The consolidated options object from the defaults, base and matching responsive options
 900 |    */
 901 |   Chartist.optionsProvider = function (options, responsiveOptions, eventEmitter) {
 902 |     var baseOptions = Chartist.extend({}, options),
 903 |       currentOptions,
 904 |       mediaQueryListeners = [],
 905 |       i;
 906 | 
 907 |     function updateCurrentOptions(preventChangedEvent) {
 908 |       var previousOptions = currentOptions;
 909 |       currentOptions = Chartist.extend({}, baseOptions);
 910 | 
 911 |       if (responsiveOptions) {
 912 |         for (i = 0; i < responsiveOptions.length; i++) {
 913 |           var mql = window.matchMedia(responsiveOptions[i][0]);
 914 |           if (mql.matches) {
 915 |             currentOptions = Chartist.extend(currentOptions, responsiveOptions[i][1]);
 916 |           }
 917 |         }
 918 |       }
 919 | 
 920 |       if(eventEmitter && !preventChangedEvent) {
 921 |         eventEmitter.emit('optionsChanged', {
 922 |           previousOptions: previousOptions,
 923 |           currentOptions: currentOptions
 924 |         });
 925 |       }
 926 |     }
 927 | 
 928 |     function removeMediaQueryListeners() {
 929 |       mediaQueryListeners.forEach(function(mql) {
 930 |         mql.removeListener(updateCurrentOptions);
 931 |       });
 932 |     }
 933 | 
 934 |     if (!window.matchMedia) {
 935 |       throw 'window.matchMedia not found! Make sure you\'re using a polyfill.';
 936 |     } else if (responsiveOptions) {
 937 | 
 938 |       for (i = 0; i < responsiveOptions.length; i++) {
 939 |         var mql = window.matchMedia(responsiveOptions[i][0]);
 940 |         mql.addListener(updateCurrentOptions);
 941 |         mediaQueryListeners.push(mql);
 942 |       }
 943 |     }
 944 |     // Execute initially so we get the correct options
 945 |     updateCurrentOptions(true);
 946 | 
 947 |     return {
 948 |       removeMediaQueryListeners: removeMediaQueryListeners,
 949 |       getCurrentOptions: function getCurrentOptions() {
 950 |         return Chartist.extend({}, currentOptions);
 951 |       }
 952 |     };
 953 |   };
 954 | 
 955 | }(window, document, Chartist));
 956 | ;/**
 957 |  * Chartist path interpolation functions.
 958 |  *
 959 |  * @module Chartist.Interpolation
 960 |  */
 961 | /* global Chartist */
 962 | (function(window, document, Chartist) {
 963 |   'use strict';
 964 | 
 965 |   Chartist.Interpolation = {};
 966 | 
 967 |   /**
 968 |    * This interpolation function does not smooth the path and the result is only containing lines and no curves.
 969 |    *
 970 |    * @memberof Chartist.Interpolation
 971 |    * @return {Function}
 972 |    */
 973 |   Chartist.Interpolation.none = function() {
 974 |     return function none(pathCoordinates, valueData) {
 975 |       var path = new Chartist.Svg.Path();
 976 |       // We need to assume that the first value is a "hole"
 977 |       var hole = true;
 978 | 
 979 |       for(var i = 1; i < pathCoordinates.length; i += 2) {
 980 |         var data = valueData[(i - 1) / 2];
 981 | 
 982 |         // If the current value is undefined we should treat it as a hole start
 983 |         if(data.value === undefined) {
 984 |           hole = true;
 985 |         } else {
 986 |           // If this value is valid we need to check if we're coming out of a hole
 987 |           if(hole) {
 988 |             // If we are coming out of a hole we should first make a move and also reset the hole flag
 989 |             path.move(pathCoordinates[i - 1], pathCoordinates[i], false, data);
 990 |             hole = false;
 991 |           } else {
 992 |             path.line(pathCoordinates[i - 1], pathCoordinates[i], false, data);
 993 |           }
 994 |         }
 995 |       }
 996 | 
 997 |       return path;
 998 |     };
 999 |   };
1000 | 
1001 |   /**
1002 |    * Simple smoothing creates horizontal handles that are positioned with a fraction of the length between two data points. You can use the divisor option to specify the amount of smoothing.
1003 |    *
1004 |    * Simple smoothing can be used instead of `Chartist.Smoothing.cardinal` if you'd like to get rid of the artifacts it produces sometimes. Simple smoothing produces less flowing lines but is accurate by hitting the points and it also doesn't swing below or above the given data point.
1005 |    *
1006 |    * All smoothing functions within Chartist are factory functions that accept an options parameter. The simple interpolation function accepts one configuration parameter `divisor`, between 1 and ∞, which controls the smoothing characteristics.
1007 |    *
1008 |    * @example
1009 |    * var chart = new Chartist.Line('.ct-chart', {
1010 |    *   labels: [1, 2, 3, 4, 5],
1011 |    *   series: [[1, 2, 8, 1, 7]]
1012 |    * }, {
1013 |    *   lineSmooth: Chartist.Interpolation.simple({
1014 |    *     divisor: 2
1015 |    *   })
1016 |    * });
1017 |    *
1018 |    *
1019 |    * @memberof Chartist.Interpolation
1020 |    * @param {Object} options The options of the simple interpolation factory function.
1021 |    * @return {Function}
1022 |    */
1023 |   Chartist.Interpolation.simple = function(options) {
1024 |     var defaultOptions = {
1025 |       divisor: 2
1026 |     };
1027 |     options = Chartist.extend({}, defaultOptions, options);
1028 | 
1029 |     var d = 1 / Math.max(1, options.divisor);
1030 | 
1031 |     return function simple(pathCoordinates, valueData) {
1032 |       var path = new Chartist.Svg.Path();
1033 |       var hole = true;
1034 | 
1035 |       for(var i = 2; i < pathCoordinates.length; i += 2) {
1036 |         var prevX = pathCoordinates[i - 2];
1037 |         var prevY = pathCoordinates[i - 1];
1038 |         var currX = pathCoordinates[i];
1039 |         var currY = pathCoordinates[i + 1];
1040 |         var length = (currX - prevX) * d;
1041 |         var prevData = valueData[(i / 2) - 1];
1042 |         var currData = valueData[i / 2];
1043 | 
1044 |         if(prevData.value === undefined) {
1045 |           hole = true;
1046 |         } else {
1047 | 
1048 |           if(hole) {
1049 |             path.move(prevX, prevY, false, prevData);
1050 |           }
1051 | 
1052 |           if(currData.value !== undefined) {
1053 |             path.curve(
1054 |               prevX + length,
1055 |               prevY,
1056 |               currX - length,
1057 |               currY,
1058 |               currX,
1059 |               currY,
1060 |               false,
1061 |               currData
1062 |             );
1063 | 
1064 |             hole = false;
1065 |           }
1066 |         }
1067 |       }
1068 | 
1069 |       return path;
1070 |     };
1071 |   };
1072 | 
1073 |   /**
1074 |    * Cardinal / Catmull-Rome spline interpolation is the default smoothing function in Chartist. It produces nice results where the splines will always meet the points. It produces some artifacts though when data values are increased or decreased rapidly. The line may not follow a very accurate path and if the line should be accurate this smoothing function does not produce the best results.
1075 |    *
1076 |    * Cardinal splines can only be created if there are more than two data points. If this is not the case this smoothing will fallback to `Chartist.Smoothing.none`.
1077 |    *
1078 |    * All smoothing functions within Chartist are factory functions that accept an options parameter. The cardinal interpolation function accepts one configuration parameter `tension`, between 0 and 1, which controls the smoothing intensity.
1079 |    *
1080 |    * @example
1081 |    * var chart = new Chartist.Line('.ct-chart', {
1082 |    *   labels: [1, 2, 3, 4, 5],
1083 |    *   series: [[1, 2, 8, 1, 7]]
1084 |    * }, {
1085 |    *   lineSmooth: Chartist.Interpolation.cardinal({
1086 |    *     tension: 1
1087 |    *   })
1088 |    * });
1089 |    *
1090 |    * @memberof Chartist.Interpolation
1091 |    * @param {Object} options The options of the cardinal factory function.
1092 |    * @return {Function}
1093 |    */
1094 |   Chartist.Interpolation.cardinal = function(options) {
1095 |     var defaultOptions = {
1096 |       tension: 1
1097 |     };
1098 | 
1099 |     options = Chartist.extend({}, defaultOptions, options);
1100 | 
1101 |     var t = Math.min(1, Math.max(0, options.tension)),
1102 |       c = 1 - t;
1103 | 
1104 |     // This function will help us to split pathCoordinates and valueData into segments that also contain pathCoordinates
1105 |     // and valueData. This way the existing functions can be reused and the segment paths can be joined afterwards.
1106 |     // This functionality is necessary to treat "holes" in the line charts
1107 |     function splitIntoSegments(pathCoordinates, valueData) {
1108 |       var segments = [];
1109 |       var hole = true;
1110 | 
1111 |       for(var i = 0; i < pathCoordinates.length; i += 2) {
1112 |         // If this value is a "hole" we set the hole flag
1113 |         if(valueData[i / 2].value === undefined) {
1114 |           hole = true;
1115 |         } else {
1116 |           // If it's a valid value we need to check if we're coming out of a hole and create a new empty segment
1117 |           if(hole) {
1118 |             segments.push({
1119 |               pathCoordinates: [],
1120 |               valueData: []
1121 |             });
1122 |             // As we have a valid value now, we are not in a "hole" anymore
1123 |             hole = false;
1124 |           }
1125 | 
1126 |           // Add to the segment pathCoordinates and valueData
1127 |           segments[segments.length - 1].pathCoordinates.push(pathCoordinates[i], pathCoordinates[i + 1]);
1128 |           segments[segments.length - 1].valueData.push(valueData[i / 2]);
1129 |         }
1130 |       }
1131 | 
1132 |       return segments;
1133 |     }
1134 | 
1135 |     return function cardinal(pathCoordinates, valueData) {
1136 |       // First we try to split the coordinates into segments
1137 |       // This is necessary to treat "holes" in line charts
1138 |       var segments = splitIntoSegments(pathCoordinates, valueData);
1139 | 
1140 |       // If the split resulted in more that one segment we need to interpolate each segment individually and join them
1141 |       // afterwards together into a single path.
1142 |       if(segments.length > 1) {
1143 |         var paths = [];
1144 |         // For each segment we will recurse the cardinal function
1145 |         segments.forEach(function(segment) {
1146 |           paths.push(cardinal(segment.pathCoordinates, segment.valueData));
1147 |         });
1148 |         // Join the segment path data into a single path and return
1149 |         return Chartist.Svg.Path.join(paths);
1150 |       } else {
1151 |         // If there was only one segment we can proceed regularly by using pathCoordinates and valueData from the first
1152 |         // segment
1153 |         pathCoordinates = segments[0].pathCoordinates;
1154 |         valueData = segments[0].valueData;
1155 | 
1156 |         // If less than two points we need to fallback to no smoothing
1157 |         if(pathCoordinates.length <= 4) {
1158 |           return Chartist.Interpolation.none()(pathCoordinates, valueData);
1159 |         }
1160 | 
1161 |         var path = new Chartist.Svg.Path().move(pathCoordinates[0], pathCoordinates[1], false, valueData[0]),
1162 |           z;
1163 | 
1164 |         for (var i = 0, iLen = pathCoordinates.length; iLen - 2 * !z > i; i += 2) {
1165 |           var p = [
1166 |             {x: +pathCoordinates[i - 2], y: +pathCoordinates[i - 1]},
1167 |             {x: +pathCoordinates[i], y: +pathCoordinates[i + 1]},
1168 |             {x: +pathCoordinates[i + 2], y: +pathCoordinates[i + 3]},
1169 |             {x: +pathCoordinates[i + 4], y: +pathCoordinates[i + 5]}
1170 |           ];
1171 |           if (z) {
1172 |             if (!i) {
1173 |               p[0] = {x: +pathCoordinates[iLen - 2], y: +pathCoordinates[iLen - 1]};
1174 |             } else if (iLen - 4 === i) {
1175 |               p[3] = {x: +pathCoordinates[0], y: +pathCoordinates[1]};
1176 |             } else if (iLen - 2 === i) {
1177 |               p[2] = {x: +pathCoordinates[0], y: +pathCoordinates[1]};
1178 |               p[3] = {x: +pathCoordinates[2], y: +pathCoordinates[3]};
1179 |             }
1180 |           } else {
1181 |             if (iLen - 4 === i) {
1182 |               p[3] = p[2];
1183 |             } else if (!i) {
1184 |               p[0] = {x: +pathCoordinates[i], y: +pathCoordinates[i + 1]};
1185 |             }
1186 |           }
1187 | 
1188 |           path.curve(
1189 |             (t * (-p[0].x + 6 * p[1].x + p[2].x) / 6) + (c * p[2].x),
1190 |             (t * (-p[0].y + 6 * p[1].y + p[2].y) / 6) + (c * p[2].y),
1191 |             (t * (p[1].x + 6 * p[2].x - p[3].x) / 6) + (c * p[2].x),
1192 |             (t * (p[1].y + 6 * p[2].y - p[3].y) / 6) + (c * p[2].y),
1193 |             p[2].x,
1194 |             p[2].y,
1195 |             false,
1196 |             valueData[(i + 2) / 2]
1197 |           );
1198 |         }
1199 | 
1200 |         return path;
1201 |       }
1202 |     };
1203 |   };
1204 | 
1205 |   /**
1206 |    * Step interpolation will cause the line chart to move in steps rather than diagonal or smoothed lines. This interpolation will create additional points that will also be drawn when the `showPoint` option is enabled.
1207 |    *
1208 |    * All smoothing functions within Chartist are factory functions that accept an options parameter. The step interpolation function accepts one configuration parameter `postpone`, that can be `true` or `false`. The default value is `true` and will cause the step to occur where the value actually changes. If a different behaviour is needed where the step is shifted to the left and happens before the actual value, this option can be set to `false`.
1209 |    *
1210 |    * @example
1211 |    * var chart = new Chartist.Line('.ct-chart', {
1212 |    *   labels: [1, 2, 3, 4, 5],
1213 |    *   series: [[1, 2, 8, 1, 7]]
1214 |    * }, {
1215 |    *   lineSmooth: Chartist.Interpolation.step({
1216 |    *     postpone: true
1217 |    *   })
1218 |    * });
1219 |    *
1220 |    * @memberof Chartist.Interpolation
1221 |    * @param options
1222 |    * @returns {Function}
1223 |    */
1224 |   Chartist.Interpolation.step = function(options) {
1225 |     var defaultOptions = {
1226 |       postpone: true
1227 |     };
1228 | 
1229 |     options = Chartist.extend({}, defaultOptions, options);
1230 | 
1231 |     return function step(pathCoordinates, valueData) {
1232 |       var path = new Chartist.Svg.Path();
1233 |       var hole = true;
1234 | 
1235 |       for (var i = 2; i < pathCoordinates.length; i += 2) {
1236 |         var prevX = pathCoordinates[i - 2];
1237 |         var prevY = pathCoordinates[i - 1];
1238 |         var currX = pathCoordinates[i];
1239 |         var currY = pathCoordinates[i + 1];
1240 |         var prevData = valueData[(i / 2) - 1];
1241 |         var currData = valueData[i / 2];
1242 | 
1243 |         // If last point is a "hole"
1244 |         if(prevData.value === undefined) {
1245 |           hole = true;
1246 |         } else {
1247 |           // If last point is not a "hole" but we just came back out of a "hole" we need to move first
1248 |           if(hole) {
1249 |             path.move(prevX, prevY, false, prevData);
1250 |           }
1251 | 
1252 |           // If the current point is also not a hole we can draw the step lines
1253 |           if(currData.value !== undefined) {
1254 |             if(options.postpone) {
1255 |               // If postponed we should draw the step line with the value of the previous value
1256 |               path.line(currX, prevY, false, prevData);
1257 |             } else {
1258 |               // If not postponed we should draw the step line with the value of the current value
1259 |               path.line(prevX, currY, false, currData);
1260 |             }
1261 |             // Line to the actual point (this should only be a Y-Axis movement
1262 |             path.line(currX, currY, false, currData);
1263 |             // Reset the "hole" flag as previous and current point have valid values
1264 |             hole = false;
1265 |           }
1266 |         }
1267 |       }
1268 | 
1269 |       return path;
1270 |     };
1271 |   };
1272 | 
1273 | }(window, document, Chartist));
1274 | ;/**
1275 |  * A very basic event module that helps to generate and catch events.
1276 |  *
1277 |  * @module Chartist.Event
1278 |  */
1279 | /* global Chartist */
1280 | (function (window, document, Chartist) {
1281 |   'use strict';
1282 | 
1283 |   Chartist.EventEmitter = function () {
1284 |     var handlers = [];
1285 | 
1286 |     /**
1287 |      * Add an event handler for a specific event
1288 |      *
1289 |      * @memberof Chartist.Event
1290 |      * @param {String} event The event name
1291 |      * @param {Function} handler A event handler function
1292 |      */
1293 |     function addEventHandler(event, handler) {
1294 |       handlers[event] = handlers[event] || [];
1295 |       handlers[event].push(handler);
1296 |     }
1297 | 
1298 |     /**
1299 |      * Remove an event handler of a specific event name or remove all event handlers for a specific event.
1300 |      *
1301 |      * @memberof Chartist.Event
1302 |      * @param {String} event The event name where a specific or all handlers should be removed
1303 |      * @param {Function} [handler] An optional event handler function. If specified only this specific handler will be removed and otherwise all handlers are removed.
1304 |      */
1305 |     function removeEventHandler(event, handler) {
1306 |       // Only do something if there are event handlers with this name existing
1307 |       if(handlers[event]) {
1308 |         // If handler is set we will look for a specific handler and only remove this
1309 |         if(handler) {
1310 |           handlers[event].splice(handlers[event].indexOf(handler), 1);
1311 |           if(handlers[event].length === 0) {
1312 |             delete handlers[event];
1313 |           }
1314 |         } else {
1315 |           // If no handler is specified we remove all handlers for this event
1316 |           delete handlers[event];
1317 |         }
1318 |       }
1319 |     }
1320 | 
1321 |     /**
1322 |      * Use this function to emit an event. All handlers that are listening for this event will be triggered with the data parameter.
1323 |      *
1324 |      * @memberof Chartist.Event
1325 |      * @param {String} event The event name that should be triggered
1326 |      * @param {*} data Arbitrary data that will be passed to the event handler callback functions
1327 |      */
1328 |     function emit(event, data) {
1329 |       // Only do something if there are event handlers with this name existing
1330 |       if(handlers[event]) {
1331 |         handlers[event].forEach(function(handler) {
1332 |           handler(data);
1333 |         });
1334 |       }
1335 | 
1336 |       // Emit event to star event handlers
1337 |       if(handlers['*']) {
1338 |         handlers['*'].forEach(function(starHandler) {
1339 |           starHandler(event, data);
1340 |         });
1341 |       }
1342 |     }
1343 | 
1344 |     return {
1345 |       addEventHandler: addEventHandler,
1346 |       removeEventHandler: removeEventHandler,
1347 |       emit: emit
1348 |     };
1349 |   };
1350 | 
1351 | }(window, document, Chartist));
1352 | ;/**
1353 |  * This module provides some basic prototype inheritance utilities.
1354 |  *
1355 |  * @module Chartist.Class
1356 |  */
1357 | /* global Chartist */
1358 | (function(window, document, Chartist) {
1359 |   'use strict';
1360 | 
1361 |   function listToArray(list) {
1362 |     var arr = [];
1363 |     if (list.length) {
1364 |       for (var i = 0; i < list.length; i++) {
1365 |         arr.push(list[i]);
1366 |       }
1367 |     }
1368 |     return arr;
1369 |   }
1370 | 
1371 |   /**
1372 |    * Method to extend from current prototype.
1373 |    *
1374 |    * @memberof Chartist.Class
1375 |    * @param {Object} properties The object that serves as definition for the prototype that gets created for the new class. This object should always contain a constructor property that is the desired constructor for the newly created class.
1376 |    * @param {Object} [superProtoOverride] By default extens will use the current class prototype or Chartist.class. With this parameter you can specify any super prototype that will be used.
1377 |    * @return {Function} Constructor function of the new class
1378 |    *
1379 |    * @example
1380 |    * var Fruit = Class.extend({
1381 |      * color: undefined,
1382 |      *   sugar: undefined,
1383 |      *
1384 |      *   constructor: function(color, sugar) {
1385 |      *     this.color = color;
1386 |      *     this.sugar = sugar;
1387 |      *   },
1388 |      *
1389 |      *   eat: function() {
1390 |      *     this.sugar = 0;
1391 |      *     return this;
1392 |      *   }
1393 |      * });
1394 |    *
1395 |    * var Banana = Fruit.extend({
1396 |      *   length: undefined,
1397 |      *
1398 |      *   constructor: function(length, sugar) {
1399 |      *     Banana.super.constructor.call(this, 'Yellow', sugar);
1400 |      *     this.length = length;
1401 |      *   }
1402 |      * });
1403 |    *
1404 |    * var banana = new Banana(20, 40);
1405 |    * console.log('banana instanceof Fruit', banana instanceof Fruit);
1406 |    * console.log('Fruit is prototype of banana', Fruit.prototype.isPrototypeOf(banana));
1407 |    * console.log('bananas prototype is Fruit', Object.getPrototypeOf(banana) === Fruit.prototype);
1408 |    * console.log(banana.sugar);
1409 |    * console.log(banana.eat().sugar);
1410 |    * console.log(banana.color);
1411 |    */
1412 |   function extend(properties, superProtoOverride) {
1413 |     var superProto = superProtoOverride || this.prototype || Chartist.Class;
1414 |     var proto = Object.create(superProto);
1415 | 
1416 |     Chartist.Class.cloneDefinitions(proto, properties);
1417 | 
1418 |     var constr = function() {
1419 |       var fn = proto.constructor || function () {},
1420 |         instance;
1421 | 
1422 |       // If this is linked to the Chartist namespace the constructor was not called with new
1423 |       // To provide a fallback we will instantiate here and return the instance
1424 |       instance = this === Chartist ? Object.create(proto) : this;
1425 |       fn.apply(instance, Array.prototype.slice.call(arguments, 0));
1426 | 
1427 |       // If this constructor was not called with new we need to return the instance
1428 |       // This will not harm when the constructor has been called with new as the returned value is ignored
1429 |       return instance;
1430 |     };
1431 | 
1432 |     constr.prototype = proto;
1433 |     constr.super = superProto;
1434 |     constr.extend = this.extend;
1435 | 
1436 |     return constr;
1437 |   }
1438 | 
1439 |   // Variable argument list clones args > 0 into args[0] and retruns modified args[0]
1440 |   function cloneDefinitions() {
1441 |     var args = listToArray(arguments);
1442 |     var target = args[0];
1443 | 
1444 |     args.splice(1, args.length - 1).forEach(function (source) {
1445 |       Object.getOwnPropertyNames(source).forEach(function (propName) {
1446 |         // If this property already exist in target we delete it first
1447 |         delete target[propName];
1448 |         // Define the property with the descriptor from source
1449 |         Object.defineProperty(target, propName,
1450 |           Object.getOwnPropertyDescriptor(source, propName));
1451 |       });
1452 |     });
1453 | 
1454 |     return target;
1455 |   }
1456 | 
1457 |   Chartist.Class = {
1458 |     extend: extend,
1459 |     cloneDefinitions: cloneDefinitions
1460 |   };
1461 | 
1462 | }(window, document, Chartist));
1463 | ;/**
1464 |  * Base for all chart types. The methods in Chartist.Base are inherited to all chart types.
1465 |  *
1466 |  * @module Chartist.Base
1467 |  */
1468 | /* global Chartist */
1469 | (function(window, document, Chartist) {
1470 |   'use strict';
1471 | 
1472 |   // TODO: Currently we need to re-draw the chart on window resize. This is usually very bad and will affect performance.
1473 |   // This is done because we can't work with relative coordinates when drawing the chart because SVG Path does not
1474 |   // work with relative positions yet. We need to check if we can do a viewBox hack to switch to percentage.
1475 |   // See http://mozilla.6506.n7.nabble.com/Specyfing-paths-with-percentages-unit-td247474.html
1476 |   // Update: can be done using the above method tested here: http://codepen.io/gionkunz/pen/KDvLj
1477 |   // The problem is with the label offsets that can't be converted into percentage and affecting the chart container
1478 |   /**
1479 |    * Updates the chart which currently does a full reconstruction of the SVG DOM
1480 |    *
1481 |    * @param {Object} [data] Optional data you'd like to set for the chart before it will update. If not specified the update method will use the data that is already configured with the chart.
1482 |    * @param {Object} [options] Optional options you'd like to add to the previous options for the chart before it will update. If not specified the update method will use the options that have been already configured with the chart.
1483 |    * @param {Boolean} [override] If set to true, the passed options will be used to extend the options that have been configured already. Otherwise the chart default options will be used as the base
1484 |    * @memberof Chartist.Base
1485 |    */
1486 |   function update(data, options, override) {
1487 |     if(data) {
1488 |       this.data = data;
1489 |       // Event for data transformation that allows to manipulate the data before it gets rendered in the charts
1490 |       this.eventEmitter.emit('data', {
1491 |         type: 'update',
1492 |         data: this.data
1493 |       });
1494 |     }
1495 | 
1496 |     if(options) {
1497 |       this.options = Chartist.extend({}, override ? this.options : this.defaultOptions, options);
1498 | 
1499 |       // If chartist was not initialized yet, we just set the options and leave the rest to the initialization
1500 |       // Otherwise we re-create the optionsProvider at this point
1501 |       if(!this.initializeTimeoutId) {
1502 |         this.optionsProvider.removeMediaQueryListeners();
1503 |         this.optionsProvider = Chartist.optionsProvider(this.options, this.responsiveOptions, this.eventEmitter);
1504 |       }
1505 |     }
1506 | 
1507 |     // Only re-created the chart if it has been initialized yet
1508 |     if(!this.initializeTimeoutId) {
1509 |       this.createChart(this.optionsProvider.getCurrentOptions());
1510 |     }
1511 | 
1512 |     // Return a reference to the chart object to chain up calls
1513 |     return this;
1514 |   }
1515 | 
1516 |   /**
1517 |    * This method can be called on the API object of each chart and will un-register all event listeners that were added to other components. This currently includes a window.resize listener as well as media query listeners if any responsive options have been provided. Use this function if you need to destroy and recreate Chartist charts dynamically.
1518 |    *
1519 |    * @memberof Chartist.Base
1520 |    */
1521 |   function detach() {
1522 |     // Only detach if initialization already occurred on this chart. If this chart still hasn't initialized (therefore
1523 |     // the initializationTimeoutId is still a valid timeout reference, we will clear the timeout
1524 |     if(!this.initializeTimeoutId) {
1525 |       window.removeEventListener('resize', this.resizeListener);
1526 |       this.optionsProvider.removeMediaQueryListeners();
1527 |     } else {
1528 |       window.clearTimeout(this.initializeTimeoutId);
1529 |     }
1530 | 
1531 |     return this;
1532 |   }
1533 | 
1534 |   /**
1535 |    * Use this function to register event handlers. The handler callbacks are synchronous and will run in the main thread rather than the event loop.
1536 |    *
1537 |    * @memberof Chartist.Base
1538 |    * @param {String} event Name of the event. Check the examples for supported events.
1539 |    * @param {Function} handler The handler function that will be called when an event with the given name was emitted. This function will receive a data argument which contains event data. See the example for more details.
1540 |    */
1541 |   function on(event, handler) {
1542 |     this.eventEmitter.addEventHandler(event, handler);
1543 |     return this;
1544 |   }
1545 | 
1546 |   /**
1547 |    * Use this function to un-register event handlers. If the handler function parameter is omitted all handlers for the given event will be un-registered.
1548 |    *
1549 |    * @memberof Chartist.Base
1550 |    * @param {String} event Name of the event for which a handler should be removed
1551 |    * @param {Function} [handler] The handler function that that was previously used to register a new event handler. This handler will be removed from the event handler list. If this parameter is omitted then all event handlers for the given event are removed from the list.
1552 |    */
1553 |   function off(event, handler) {
1554 |     this.eventEmitter.removeEventHandler(event, handler);
1555 |     return this;
1556 |   }
1557 | 
1558 |   function initialize() {
1559 |     // Add window resize listener that re-creates the chart
1560 |     window.addEventListener('resize', this.resizeListener);
1561 | 
1562 |     // Obtain current options based on matching media queries (if responsive options are given)
1563 |     // This will also register a listener that is re-creating the chart based on media changes
1564 |     this.optionsProvider = Chartist.optionsProvider(this.options, this.responsiveOptions, this.eventEmitter);
1565 |     // Register options change listener that will trigger a chart update
1566 |     this.eventEmitter.addEventHandler('optionsChanged', function() {
1567 |       this.update();
1568 |     }.bind(this));
1569 | 
1570 |     // Before the first chart creation we need to register us with all plugins that are configured
1571 |     // Initialize all relevant plugins with our chart object and the plugin options specified in the config
1572 |     if(this.options.plugins) {
1573 |       this.options.plugins.forEach(function(plugin) {
1574 |         if(plugin instanceof Array) {
1575 |           plugin[0](this, plugin[1]);
1576 |         } else {
1577 |           plugin(this);
1578 |         }
1579 |       }.bind(this));
1580 |     }
1581 | 
1582 |     // Event for data transformation that allows to manipulate the data before it gets rendered in the charts
1583 |     this.eventEmitter.emit('data', {
1584 |       type: 'initial',
1585 |       data: this.data
1586 |     });
1587 | 
1588 |     // Create the first chart
1589 |     this.createChart(this.optionsProvider.getCurrentOptions());
1590 | 
1591 |     // As chart is initialized from the event loop now we can reset our timeout reference
1592 |     // This is important if the chart gets initialized on the same element twice
1593 |     this.initializeTimeoutId = undefined;
1594 |   }
1595 | 
1596 |   /**
1597 |    * Constructor of chart base class.
1598 |    *
1599 |    * @param query
1600 |    * @param data
1601 |    * @param defaultOptions
1602 |    * @param options
1603 |    * @param responsiveOptions
1604 |    * @constructor
1605 |    */
1606 |   function Base(query, data, defaultOptions, options, responsiveOptions) {
1607 |     this.container = Chartist.querySelector(query);
1608 |     this.data = data;
1609 |     this.defaultOptions = defaultOptions;
1610 |     this.options = options;
1611 |     this.responsiveOptions = responsiveOptions;
1612 |     this.eventEmitter = Chartist.EventEmitter();
1613 |     this.supportsForeignObject = Chartist.Svg.isSupported('Extensibility');
1614 |     this.supportsAnimations = Chartist.Svg.isSupported('AnimationEventsAttribute');
1615 |     this.resizeListener = function resizeListener(){
1616 |       this.update();
1617 |     }.bind(this);
1618 | 
1619 |     if(this.container) {
1620 |       // If chartist was already initialized in this container we are detaching all event listeners first
1621 |       if(this.container.__chartist__) {
1622 |         this.container.__chartist__.detach();
1623 |       }
1624 | 
1625 |       this.container.__chartist__ = this;
1626 |     }
1627 | 
1628 |     // Using event loop for first draw to make it possible to register event listeners in the same call stack where
1629 |     // the chart was created.
1630 |     this.initializeTimeoutId = setTimeout(initialize.bind(this), 0);
1631 |   }
1632 | 
1633 |   // Creating the chart base class
1634 |   Chartist.Base = Chartist.Class.extend({
1635 |     constructor: Base,
1636 |     optionsProvider: undefined,
1637 |     container: undefined,
1638 |     svg: undefined,
1639 |     eventEmitter: undefined,
1640 |     createChart: function() {
1641 |       throw new Error('Base chart type can\'t be instantiated!');
1642 |     },
1643 |     update: update,
1644 |     detach: detach,
1645 |     on: on,
1646 |     off: off,
1647 |     version: Chartist.version,
1648 |     supportsForeignObject: false
1649 |   });
1650 | 
1651 | }(window, document, Chartist));
1652 | ;/**
1653 |  * Chartist SVG module for simple SVG DOM abstraction
1654 |  *
1655 |  * @module Chartist.Svg
1656 |  */
1657 | /* global Chartist */
1658 | (function(window, document, Chartist) {
1659 |   'use strict';
1660 | 
1661 |   var svgNs = 'http://www.w3.org/2000/svg',
1662 |     xmlNs = 'http://www.w3.org/2000/xmlns/',
1663 |     xhtmlNs = 'http://www.w3.org/1999/xhtml';
1664 | 
1665 |   Chartist.xmlNs = {
1666 |     qualifiedName: 'xmlns:ct',
1667 |     prefix: 'ct',
1668 |     uri: 'http://gionkunz.github.com/chartist-js/ct'
1669 |   };
1670 | 
1671 |   /**
1672 |    * Chartist.Svg creates a new SVG object wrapper with a starting element. You can use the wrapper to fluently create sub-elements and modify them.
1673 |    *
1674 |    * @memberof Chartist.Svg
1675 |    * @constructor
1676 |    * @param {String|Element} name The name of the SVG element to create or an SVG dom element which should be wrapped into Chartist.Svg
1677 |    * @param {Object} attributes An object with properties that will be added as attributes to the SVG element that is created. Attributes with undefined values will not be added.
1678 |    * @param {String} className This class or class list will be added to the SVG element
1679 |    * @param {Object} parent The parent SVG wrapper object where this newly created wrapper and it's element will be attached to as child
1680 |    * @param {Boolean} insertFirst If this param is set to true in conjunction with a parent element the newly created element will be added as first child element in the parent element
1681 |    */
1682 |   function Svg(name, attributes, className, parent, insertFirst) {
1683 |     // If Svg is getting called with an SVG element we just return the wrapper
1684 |     if(name instanceof Element) {
1685 |       this._node = name;
1686 |     } else {
1687 |       this._node = document.createElementNS(svgNs, name);
1688 | 
1689 |       // If this is an SVG element created then custom namespace
1690 |       if(name === 'svg') {
1691 |         this._node.setAttributeNS(xmlNs, Chartist.xmlNs.qualifiedName, Chartist.xmlNs.uri);
1692 |       }
1693 |     }
1694 | 
1695 |     if(attributes) {
1696 |       this.attr(attributes);
1697 |     }
1698 | 
1699 |     if(className) {
1700 |       this.addClass(className);
1701 |     }
1702 | 
1703 |     if(parent) {
1704 |       if (insertFirst && parent._node.firstChild) {
1705 |         parent._node.insertBefore(this._node, parent._node.firstChild);
1706 |       } else {
1707 |         parent._node.appendChild(this._node);
1708 |       }
1709 |     }
1710 |   }
1711 | 
1712 |   /**
1713 |    * Set attributes on the current SVG element of the wrapper you're currently working on.
1714 |    *
1715 |    * @memberof Chartist.Svg
1716 |    * @param {Object|String} attributes An object with properties that will be added as attributes to the SVG element that is created. Attributes with undefined values will not be added. If this parameter is a String then the function is used as a getter and will return the attribute value.
1717 |    * @param {String} ns If specified, the attributes will be set as namespace attributes with ns as prefix.
1718 |    * @return {Object|String} The current wrapper object will be returned so it can be used for chaining or the attribute value if used as getter function.
1719 |    */
1720 |   function attr(attributes, ns) {
1721 |     if(typeof attributes === 'string') {
1722 |       if(ns) {
1723 |         return this._node.getAttributeNS(ns, attributes);
1724 |       } else {
1725 |         return this._node.getAttribute(attributes);
1726 |       }
1727 |     }
1728 | 
1729 |     Object.keys(attributes).forEach(function(key) {
1730 |       // If the attribute value is undefined we can skip this one
1731 |       if(attributes[key] === undefined) {
1732 |         return;
1733 |       }
1734 | 
1735 |       if(ns) {
1736 |         this._node.setAttributeNS(ns, [Chartist.xmlNs.prefix, ':', key].join(''), attributes[key]);
1737 |       } else {
1738 |         this._node.setAttribute(key, attributes[key]);
1739 |       }
1740 |     }.bind(this));
1741 | 
1742 |     return this;
1743 |   }
1744 | 
1745 |   /**
1746 |    * Create a new SVG element whose wrapper object will be selected for further operations. This way you can also create nested groups easily.
1747 |    *
1748 |    * @memberof Chartist.Svg
1749 |    * @param {String} name The name of the SVG element that should be created as child element of the currently selected element wrapper
1750 |    * @param {Object} [attributes] An object with properties that will be added as attributes to the SVG element that is created. Attributes with undefined values will not be added.
1751 |    * @param {String} [className] This class or class list will be added to the SVG element
1752 |    * @param {Boolean} [insertFirst] If this param is set to true in conjunction with a parent element the newly created element will be added as first child element in the parent element
1753 |    * @return {Chartist.Svg} Returns a Chartist.Svg wrapper object that can be used to modify the containing SVG data
1754 |    */
1755 |   function elem(name, attributes, className, insertFirst) {
1756 |     return new Chartist.Svg(name, attributes, className, this, insertFirst);
1757 |   }
1758 | 
1759 |   /**
1760 |    * Returns the parent Chartist.SVG wrapper object
1761 |    *
1762 |    * @memberof Chartist.Svg
1763 |    * @return {Chartist.Svg} Returns a Chartist.Svg wrapper around the parent node of the current node. If the parent node is not existing or it's not an SVG node then this function will return null.
1764 |    */
1765 |   function parent() {
1766 |     return this._node.parentNode instanceof SVGElement ? new Chartist.Svg(this._node.parentNode) : null;
1767 |   }
1768 | 
1769 |   /**
1770 |    * This method returns a Chartist.Svg wrapper around the root SVG element of the current tree.
1771 |    *
1772 |    * @memberof Chartist.Svg
1773 |    * @return {Chartist.Svg} The root SVG element wrapped in a Chartist.Svg element
1774 |    */
1775 |   function root() {
1776 |     var node = this._node;
1777 |     while(node.nodeName !== 'svg') {
1778 |       node = node.parentNode;
1779 |     }
1780 |     return new Chartist.Svg(node);
1781 |   }
1782 | 
1783 |   /**
1784 |    * Find the first child SVG element of the current element that matches a CSS selector. The returned object is a Chartist.Svg wrapper.
1785 |    *
1786 |    * @memberof Chartist.Svg
1787 |    * @param {String} selector A CSS selector that is used to query for child SVG elements
1788 |    * @return {Chartist.Svg} The SVG wrapper for the element found or null if no element was found
1789 |    */
1790 |   function querySelector(selector) {
1791 |     var foundNode = this._node.querySelector(selector);
1792 |     return foundNode ? new Chartist.Svg(foundNode) : null;
1793 |   }
1794 | 
1795 |   /**
1796 |    * Find the all child SVG elements of the current element that match a CSS selector. The returned object is a Chartist.Svg.List wrapper.
1797 |    *
1798 |    * @memberof Chartist.Svg
1799 |    * @param {String} selector A CSS selector that is used to query for child SVG elements
1800 |    * @return {Chartist.Svg.List} The SVG wrapper list for the element found or null if no element was found
1801 |    */
1802 |   function querySelectorAll(selector) {
1803 |     var foundNodes = this._node.querySelectorAll(selector);
1804 |     return foundNodes.length ? new Chartist.Svg.List(foundNodes) : null;
1805 |   }
1806 | 
1807 |   /**
1808 |    * This method creates a foreignObject (see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject) that allows to embed HTML content into a SVG graphic. With the help of foreignObjects you can enable the usage of regular HTML elements inside of SVG where they are subject for SVG positioning and transformation but the Browser will use the HTML rendering capabilities for the containing DOM.
1809 |    *
1810 |    * @memberof Chartist.Svg
1811 |    * @param {Node|String} content The DOM Node, or HTML string that will be converted to a DOM Node, that is then placed into and wrapped by the foreignObject
1812 |    * @param {String} [attributes] An object with properties that will be added as attributes to the foreignObject element that is created. Attributes with undefined values will not be added.
1813 |    * @param {String} [className] This class or class list will be added to the SVG element
1814 |    * @param {Boolean} [insertFirst] Specifies if the foreignObject should be inserted as first child
1815 |    * @return {Chartist.Svg} New wrapper object that wraps the foreignObject element
1816 |    */
1817 |   function foreignObject(content, attributes, className, insertFirst) {
1818 |     // If content is string then we convert it to DOM
1819 |     // TODO: Handle case where content is not a string nor a DOM Node
1820 |     if(typeof content === 'string') {
1821 |       var container = document.createElement('div');
1822 |       container.innerHTML = content;
1823 |       content = container.firstChild;
1824 |     }
1825 | 
1826 |     // Adding namespace to content element
1827 |     content.setAttribute('xmlns', xhtmlNs);
1828 | 
1829 |     // Creating the foreignObject without required extension attribute (as described here
1830 |     // http://www.w3.org/TR/SVG/extend.html#ForeignObjectElement)
1831 |     var fnObj = this.elem('foreignObject', attributes, className, insertFirst);
1832 | 
1833 |     // Add content to foreignObjectElement
1834 |     fnObj._node.appendChild(content);
1835 | 
1836 |     return fnObj;
1837 |   }
1838 | 
1839 |   /**
1840 |    * This method adds a new text element to the current Chartist.Svg wrapper.
1841 |    *
1842 |    * @memberof Chartist.Svg
1843 |    * @param {String} t The text that should be added to the text element that is created
1844 |    * @return {Chartist.Svg} The same wrapper object that was used to add the newly created element
1845 |    */
1846 |   function text(t) {
1847 |     this._node.appendChild(document.createTextNode(t));
1848 |     return this;
1849 |   }
1850 | 
1851 |   /**
1852 |    * This method will clear all child nodes of the current wrapper object.
1853 |    *
1854 |    * @memberof Chartist.Svg
1855 |    * @return {Chartist.Svg} The same wrapper object that got emptied
1856 |    */
1857 |   function empty() {
1858 |     while (this._node.firstChild) {
1859 |       this._node.removeChild(this._node.firstChild);
1860 |     }
1861 | 
1862 |     return this;
1863 |   }
1864 | 
1865 |   /**
1866 |    * This method will cause the current wrapper to remove itself from its parent wrapper. Use this method if you'd like to get rid of an element in a given DOM structure.
1867 |    *
1868 |    * @memberof Chartist.Svg
1869 |    * @return {Chartist.Svg} The parent wrapper object of the element that got removed
1870 |    */
1871 |   function remove() {
1872 |     this._node.parentNode.removeChild(this._node);
1873 |     return this.parent();
1874 |   }
1875 | 
1876 |   /**
1877 |    * This method will replace the element with a new element that can be created outside of the current DOM.
1878 |    *
1879 |    * @memberof Chartist.Svg
1880 |    * @param {Chartist.Svg} newElement The new Chartist.Svg object that will be used to replace the current wrapper object
1881 |    * @return {Chartist.Svg} The wrapper of the new element
1882 |    */
1883 |   function replace(newElement) {
1884 |     this._node.parentNode.replaceChild(newElement._node, this._node);
1885 |     return newElement;
1886 |   }
1887 | 
1888 |   /**
1889 |    * This method will append an element to the current element as a child.
1890 |    *
1891 |    * @memberof Chartist.Svg
1892 |    * @param {Chartist.Svg} element The Chartist.Svg element that should be added as a child
1893 |    * @param {Boolean} [insertFirst] Specifies if the element should be inserted as first child
1894 |    * @return {Chartist.Svg} The wrapper of the appended object
1895 |    */
1896 |   function append(element, insertFirst) {
1897 |     if(insertFirst && this._node.firstChild) {
1898 |       this._node.insertBefore(element._node, this._node.firstChild);
1899 |     } else {
1900 |       this._node.appendChild(element._node);
1901 |     }
1902 | 
1903 |     return this;
1904 |   }
1905 | 
1906 |   /**
1907 |    * Returns an array of class names that are attached to the current wrapper element. This method can not be chained further.
1908 |    *
1909 |    * @memberof Chartist.Svg
1910 |    * @return {Array} A list of classes or an empty array if there are no classes on the current element
1911 |    */
1912 |   function classes() {
1913 |     return this._node.getAttribute('class') ? this._node.getAttribute('class').trim().split(/\s+/) : [];
1914 |   }
1915 | 
1916 |   /**
1917 |    * Adds one or a space separated list of classes to the current element and ensures the classes are only existing once.
1918 |    *
1919 |    * @memberof Chartist.Svg
1920 |    * @param {String} names A white space separated list of class names
1921 |    * @return {Chartist.Svg} The wrapper of the current element
1922 |    */
1923 |   function addClass(names) {
1924 |     this._node.setAttribute('class',
1925 |       this.classes(this._node)
1926 |         .concat(names.trim().split(/\s+/))
1927 |         .filter(function(elem, pos, self) {
1928 |           return self.indexOf(elem) === pos;
1929 |         }).join(' ')
1930 |     );
1931 | 
1932 |     return this;
1933 |   }
1934 | 
1935 |   /**
1936 |    * Removes one or a space separated list of classes from the current element.
1937 |    *
1938 |    * @memberof Chartist.Svg
1939 |    * @param {String} names A white space separated list of class names
1940 |    * @return {Chartist.Svg} The wrapper of the current element
1941 |    */
1942 |   function removeClass(names) {
1943 |     var removedClasses = names.trim().split(/\s+/);
1944 | 
1945 |     this._node.setAttribute('class', this.classes(this._node).filter(function(name) {
1946 |       return removedClasses.indexOf(name) === -1;
1947 |     }).join(' '));
1948 | 
1949 |     return this;
1950 |   }
1951 | 
1952 |   /**
1953 |    * Removes all classes from the current element.
1954 |    *
1955 |    * @memberof Chartist.Svg
1956 |    * @return {Chartist.Svg} The wrapper of the current element
1957 |    */
1958 |   function removeAllClasses() {
1959 |     this._node.setAttribute('class', '');
1960 | 
1961 |     return this;
1962 |   }
1963 | 
1964 |   /**
1965 |    * "Save" way to get property value from svg BoundingBox.
1966 |    * This is a workaround. Firefox throws an NS_ERROR_FAILURE error if getBBox() is called on an invisible node.
1967 |    * See [NS_ERROR_FAILURE: Component returned failure code: 0x80004005](http://jsfiddle.net/sym3tri/kWWDK/)
1968 |    *
1969 |    * @memberof Chartist.Svg
1970 |    * @param {SVGElement} node The svg node to
1971 |    * @param {String} prop The property to fetch (ex.: height, width, ...)
1972 |    * @returns {Number} The value of the given bbox property
1973 |    */
1974 |   function getBBoxProperty(node, prop) {
1975 |     try {
1976 |       return node.getBBox()[prop];
1977 |     } catch(e) {}
1978 | 
1979 |     return 0;
1980 |   }
1981 | 
1982 |   /**
1983 |    * Get element height with fallback to svg BoundingBox or parent container dimensions:
1984 |    * See [bugzilla.mozilla.org](https://bugzilla.mozilla.org/show_bug.cgi?id=530985)
1985 |    *
1986 |    * @memberof Chartist.Svg
1987 |    * @return {Number} The elements height in pixels
1988 |    */
1989 |   function height() {
1990 |     return this._node.clientHeight || Math.round(getBBoxProperty(this._node, 'height')) || this._node.parentNode.clientHeight;
1991 |   }
1992 | 
1993 |   /**
1994 |    * Get element width with fallback to svg BoundingBox or parent container dimensions:
1995 |    * See [bugzilla.mozilla.org](https://bugzilla.mozilla.org/show_bug.cgi?id=530985)
1996 |    *
1997 |    * @memberof Chartist.Core
1998 |    * @return {Number} The elements width in pixels
1999 |    */
2000 |   function width() {
2001 |     return this._node.clientWidth || Math.round(getBBoxProperty(this._node, 'width')) || this._node.parentNode.clientWidth;
2002 |   }
2003 | 
2004 |   /**
2005 |    * The animate function lets you animate the current element with SMIL animations. You can add animations for multiple attributes at the same time by using an animation definition object. This object should contain SMIL animation attributes. Please refer to http://www.w3.org/TR/SVG/animate.html for a detailed specification about the available animation attributes. Additionally an easing property can be passed in the animation definition object. This can be a string with a name of an easing function in `Chartist.Svg.Easing` or an array with four numbers specifying a cubic Bézier curve.
2006 |    * **An animations object could look like this:**
2007 |    * ```javascript
2008 |    * element.animate({
2009 |    *   opacity: {
2010 |    *     dur: 1000,
2011 |    *     from: 0,
2012 |    *     to: 1
2013 |    *   },
2014 |    *   x1: {
2015 |    *     dur: '1000ms',
2016 |    *     from: 100,
2017 |    *     to: 200,
2018 |    *     easing: 'easeOutQuart'
2019 |    *   },
2020 |    *   y1: {
2021 |    *     dur: '2s',
2022 |    *     from: 0,
2023 |    *     to: 100
2024 |    *   }
2025 |    * });
2026 |    * ```
2027 |    * **Automatic unit conversion**
2028 |    * For the `dur` and the `begin` animate attribute you can also omit a unit by passing a number. The number will automatically be converted to milli seconds.
2029 |    * **Guided mode**
2030 |    * The default behavior of SMIL animations with offset using the `begin` attribute is that the attribute will keep it's original value until the animation starts. Mostly this behavior is not desired as you'd like to have your element attributes already initialized with the animation `from` value even before the animation starts. Also if you don't specify `fill="freeze"` on an animate element or if you delete the animation after it's done (which is done in guided mode) the attribute will switch back to the initial value. This behavior is also not desired when performing simple one-time animations. For one-time animations you'd want to trigger animations immediately instead of relative to the document begin time. That's why in guided mode Chartist.Svg will also use the `begin` property to schedule a timeout and manually start the animation after the timeout. If you're using multiple SMIL definition objects for an attribute (in an array), guided mode will be disabled for this attribute, even if you explicitly enabled it.
2031 |    * If guided mode is enabled the following behavior is added:
2032 |    * - Before the animation starts (even when delayed with `begin`) the animated attribute will be set already to the `from` value of the animation
2033 |    * - `begin` is explicitly set to `indefinite` so it can be started manually without relying on document begin time (creation)
2034 |    * - The animate element will be forced to use `fill="freeze"`
2035 |    * - The animation will be triggered with `beginElement()` in a timeout where `begin` of the definition object is interpreted in milli seconds. If no `begin` was specified the timeout is triggered immediately.
2036 |    * - After the animation the element attribute value will be set to the `to` value of the animation
2037 |    * - The animate element is deleted from the DOM
2038 |    *
2039 |    * @memberof Chartist.Svg
2040 |    * @param {Object} animations An animations object where the property keys are the attributes you'd like to animate. The properties should be objects again that contain the SMIL animation attributes (usually begin, dur, from, and to). The property begin and dur is auto converted (see Automatic unit conversion). You can also schedule multiple animations for the same attribute by passing an Array of SMIL definition objects. Attributes that contain an array of SMIL definition objects will not be executed in guided mode.
2041 |    * @param {Boolean} guided Specify if guided mode should be activated for this animation (see Guided mode). If not otherwise specified, guided mode will be activated.
2042 |    * @param {Object} eventEmitter If specified, this event emitter will be notified when an animation starts or ends.
2043 |    * @return {Chartist.Svg} The current element where the animation was added
2044 |    */
2045 |   function animate(animations, guided, eventEmitter) {
2046 |     if(guided === undefined) {
2047 |       guided = true;
2048 |     }
2049 | 
2050 |     Object.keys(animations).forEach(function createAnimateForAttributes(attribute) {
2051 | 
2052 |       function createAnimate(animationDefinition, guided) {
2053 |         var attributeProperties = {},
2054 |           animate,
2055 |           timeout,
2056 |           easing;
2057 | 
2058 |         // Check if an easing is specified in the definition object and delete it from the object as it will not
2059 |         // be part of the animate element attributes.
2060 |         if(animationDefinition.easing) {
2061 |           // If already an easing Bézier curve array we take it or we lookup a easing array in the Easing object
2062 |           easing = animationDefinition.easing instanceof Array ?
2063 |             animationDefinition.easing :
2064 |             Chartist.Svg.Easing[animationDefinition.easing];
2065 |           delete animationDefinition.easing;
2066 |         }
2067 | 
2068 |         // If numeric dur or begin was provided we assume milli seconds
2069 |         animationDefinition.begin = Chartist.ensureUnit(animationDefinition.begin, 'ms');
2070 |         animationDefinition.dur = Chartist.ensureUnit(animationDefinition.dur, 'ms');
2071 | 
2072 |         if(easing) {
2073 |           animationDefinition.calcMode = 'spline';
2074 |           animationDefinition.keySplines = easing.join(' ');
2075 |           animationDefinition.keyTimes = '0;1';
2076 |         }
2077 | 
2078 |         // Adding "fill: freeze" if we are in guided mode and set initial attribute values
2079 |         if(guided) {
2080 |           animationDefinition.fill = 'freeze';
2081 |           // Animated property on our element should already be set to the animation from value in guided mode
2082 |           attributeProperties[attribute] = animationDefinition.from;
2083 |           this.attr(attributeProperties);
2084 | 
2085 |           // In guided mode we also set begin to indefinite so we can trigger the start manually and put the begin
2086 |           // which needs to be in ms aside
2087 |           timeout = Chartist.stripUnit(animationDefinition.begin || 0);
2088 |           animationDefinition.begin = 'indefinite';
2089 |         }
2090 | 
2091 |         animate = this.elem('animate', Chartist.extend({
2092 |           attributeName: attribute
2093 |         }, animationDefinition));
2094 | 
2095 |         if(guided) {
2096 |           // If guided we take the value that was put aside in timeout and trigger the animation manually with a timeout
2097 |           setTimeout(function() {
2098 |             // If beginElement fails we set the animated attribute to the end position and remove the animate element
2099 |             // This happens if the SMIL ElementTimeControl interface is not supported or any other problems occured in
2100 |             // the browser. (Currently FF 34 does not support animate elements in foreignObjects)
2101 |             try {
2102 |               animate._node.beginElement();
2103 |             } catch(err) {
2104 |               // Set animated attribute to current animated value
2105 |               attributeProperties[attribute] = animationDefinition.to;
2106 |               this.attr(attributeProperties);
2107 |               // Remove the animate element as it's no longer required
2108 |               animate.remove();
2109 |             }
2110 |           }.bind(this), timeout);
2111 |         }
2112 | 
2113 |         if(eventEmitter) {
2114 |           animate._node.addEventListener('beginEvent', function handleBeginEvent() {
2115 |             eventEmitter.emit('animationBegin', {
2116 |               element: this,
2117 |               animate: animate._node,
2118 |               params: animationDefinition
2119 |             });
2120 |           }.bind(this));
2121 |         }
2122 | 
2123 |         animate._node.addEventListener('endEvent', function handleEndEvent() {
2124 |           if(eventEmitter) {
2125 |             eventEmitter.emit('animationEnd', {
2126 |               element: this,
2127 |               animate: animate._node,
2128 |               params: animationDefinition
2129 |             });
2130 |           }
2131 | 
2132 |           if(guided) {
2133 |             // Set animated attribute to current animated value
2134 |             attributeProperties[attribute] = animationDefinition.to;
2135 |             this.attr(attributeProperties);
2136 |             // Remove the animate element as it's no longer required
2137 |             animate.remove();
2138 |           }
2139 |         }.bind(this));
2140 |       }
2141 | 
2142 |       // If current attribute is an array of definition objects we create an animate for each and disable guided mode
2143 |       if(animations[attribute] instanceof Array) {
2144 |         animations[attribute].forEach(function(animationDefinition) {
2145 |           createAnimate.bind(this)(animationDefinition, false);
2146 |         }.bind(this));
2147 |       } else {
2148 |         createAnimate.bind(this)(animations[attribute], guided);
2149 |       }
2150 | 
2151 |     }.bind(this));
2152 | 
2153 |     return this;
2154 |   }
2155 | 
2156 |   Chartist.Svg = Chartist.Class.extend({
2157 |     constructor: Svg,
2158 |     attr: attr,
2159 |     elem: elem,
2160 |     parent: parent,
2161 |     root: root,
2162 |     querySelector: querySelector,
2163 |     querySelectorAll: querySelectorAll,
2164 |     foreignObject: foreignObject,
2165 |     text: text,
2166 |     empty: empty,
2167 |     remove: remove,
2168 |     replace: replace,
2169 |     append: append,
2170 |     classes: classes,
2171 |     addClass: addClass,
2172 |     removeClass: removeClass,
2173 |     removeAllClasses: removeAllClasses,
2174 |     height: height,
2175 |     width: width,
2176 |     animate: animate
2177 |   });
2178 | 
2179 |   /**
2180 |    * This method checks for support of a given SVG feature like Extensibility, SVG-animation or the like. Check http://www.w3.org/TR/SVG11/feature for a detailed list.
2181 |    *
2182 |    * @memberof Chartist.Svg
2183 |    * @param {String} feature The SVG 1.1 feature that should be checked for support.
2184 |    * @return {Boolean} True of false if the feature is supported or not
2185 |    */
2186 |   Chartist.Svg.isSupported = function(feature) {
2187 |     return document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#' + feature, '1.1');
2188 |   };
2189 | 
2190 |   /**
2191 |    * This Object contains some standard easing cubic bezier curves. Then can be used with their name in the `Chartist.Svg.animate`. You can also extend the list and use your own name in the `animate` function. Click the show code button to see the available bezier functions.
2192 |    *
2193 |    * @memberof Chartist.Svg
2194 |    */
2195 |   var easingCubicBeziers = {
2196 |     easeInSine: [0.47, 0, 0.745, 0.715],
2197 |     easeOutSine: [0.39, 0.575, 0.565, 1],
2198 |     easeInOutSine: [0.445, 0.05, 0.55, 0.95],
2199 |     easeInQuad: [0.55, 0.085, 0.68, 0.53],
2200 |     easeOutQuad: [0.25, 0.46, 0.45, 0.94],
2201 |     easeInOutQuad: [0.455, 0.03, 0.515, 0.955],
2202 |     easeInCubic: [0.55, 0.055, 0.675, 0.19],
2203 |     easeOutCubic: [0.215, 0.61, 0.355, 1],
2204 |     easeInOutCubic: [0.645, 0.045, 0.355, 1],
2205 |     easeInQuart: [0.895, 0.03, 0.685, 0.22],
2206 |     easeOutQuart: [0.165, 0.84, 0.44, 1],
2207 |     easeInOutQuart: [0.77, 0, 0.175, 1],
2208 |     easeInQuint: [0.755, 0.05, 0.855, 0.06],
2209 |     easeOutQuint: [0.23, 1, 0.32, 1],
2210 |     easeInOutQuint: [0.86, 0, 0.07, 1],
2211 |     easeInExpo: [0.95, 0.05, 0.795, 0.035],
2212 |     easeOutExpo: [0.19, 1, 0.22, 1],
2213 |     easeInOutExpo: [1, 0, 0, 1],
2214 |     easeInCirc: [0.6, 0.04, 0.98, 0.335],
2215 |     easeOutCirc: [0.075, 0.82, 0.165, 1],
2216 |     easeInOutCirc: [0.785, 0.135, 0.15, 0.86],
2217 |     easeInBack: [0.6, -0.28, 0.735, 0.045],
2218 |     easeOutBack: [0.175, 0.885, 0.32, 1.275],
2219 |     easeInOutBack: [0.68, -0.55, 0.265, 1.55]
2220 |   };
2221 | 
2222 |   Chartist.Svg.Easing = easingCubicBeziers;
2223 | 
2224 |   /**
2225 |    * This helper class is to wrap multiple `Chartist.Svg` elements into a list where you can call the `Chartist.Svg` functions on all elements in the list with one call. This is helpful when you'd like to perform calls with `Chartist.Svg` on multiple elements.
2226 |    * An instance of this class is also returned by `Chartist.Svg.querySelectorAll`.
2227 |    *
2228 |    * @memberof Chartist.Svg
2229 |    * @param {Array<Node>|NodeList} nodeList An Array of SVG DOM nodes or a SVG DOM NodeList (as returned by document.querySelectorAll)
2230 |    * @constructor
2231 |    */
2232 |   function SvgList(nodeList) {
2233 |     var list = this;
2234 | 
2235 |     this.svgElements = [];
2236 |     for(var i = 0; i < nodeList.length; i++) {
2237 |       this.svgElements.push(new Chartist.Svg(nodeList[i]));
2238 |     }
2239 | 
2240 |     // Add delegation methods for Chartist.Svg
2241 |     Object.keys(Chartist.Svg.prototype).filter(function(prototypeProperty) {
2242 |       return ['constructor',
2243 |           'parent',
2244 |           'querySelector',
2245 |           'querySelectorAll',
2246 |           'replace',
2247 |           'append',
2248 |           'classes',
2249 |           'height',
2250 |           'width'].indexOf(prototypeProperty) === -1;
2251 |     }).forEach(function(prototypeProperty) {
2252 |       list[prototypeProperty] = function() {
2253 |         var args = Array.prototype.slice.call(arguments, 0);
2254 |         list.svgElements.forEach(function(element) {
2255 |           Chartist.Svg.prototype[prototypeProperty].apply(element, args);
2256 |         });
2257 |         return list;
2258 |       };
2259 |     });
2260 |   }
2261 | 
2262 |   Chartist.Svg.List = Chartist.Class.extend({
2263 |     constructor: SvgList
2264 |   });
2265 | }(window, document, Chartist));
2266 | ;/**
2267 |  * Chartist SVG path module for SVG path description creation and modification.
2268 |  *
2269 |  * @module Chartist.Svg.Path
2270 |  */
2271 | /* global Chartist */
2272 | (function(window, document, Chartist) {
2273 |   'use strict';
2274 | 
2275 |   /**
2276 |    * Contains the descriptors of supported element types in a SVG path. Currently only move, line and curve are supported.
2277 |    *
2278 |    * @memberof Chartist.Svg.Path
2279 |    * @type {Object}
2280 |    */
2281 |   var elementDescriptions = {
2282 |     m: ['x', 'y'],
2283 |     l: ['x', 'y'],
2284 |     c: ['x1', 'y1', 'x2', 'y2', 'x', 'y'],
2285 |     a: ['rx', 'ry', 'xAr', 'lAf', 'sf', 'x', 'y']
2286 |   };
2287 | 
2288 |   /**
2289 |    * Default options for newly created SVG path objects.
2290 |    *
2291 |    * @memberof Chartist.Svg.Path
2292 |    * @type {Object}
2293 |    */
2294 |   var defaultOptions = {
2295 |     // The accuracy in digit count after the decimal point. This will be used to round numbers in the SVG path. If this option is set to false then no rounding will be performed.
2296 |     accuracy: 3
2297 |   };
2298 | 
2299 |   function element(command, params, pathElements, pos, relative, data) {
2300 |     var pathElement = Chartist.extend({
2301 |       command: relative ? command.toLowerCase() : command.toUpperCase()
2302 |     }, params, data ? { data: data } : {} );
2303 | 
2304 |     pathElements.splice(pos, 0, pathElement);
2305 |   }
2306 | 
2307 |   function forEachParam(pathElements, cb) {
2308 |     pathElements.forEach(function(pathElement, pathElementIndex) {
2309 |       elementDescriptions[pathElement.command.toLowerCase()].forEach(function(paramName, paramIndex) {
2310 |         cb(pathElement, paramName, pathElementIndex, paramIndex, pathElements);
2311 |       });
2312 |     });
2313 |   }
2314 | 
2315 |   /**
2316 |    * Used to construct a new path object.
2317 |    *
2318 |    * @memberof Chartist.Svg.Path
2319 |    * @param {Boolean} close If set to true then this path will be closed when stringified (with a Z at the end)
2320 |    * @param {Object} options Options object that overrides the default objects. See default options for more details.
2321 |    * @constructor
2322 |    */
2323 |   function SvgPath(close, options) {
2324 |     this.pathElements = [];
2325 |     this.pos = 0;
2326 |     this.close = close;
2327 |     this.options = Chartist.extend({}, defaultOptions, options);
2328 |   }
2329 | 
2330 |   /**
2331 |    * Gets or sets the current position (cursor) inside of the path. You can move around the cursor freely but limited to 0 or the count of existing elements. All modifications with element functions will insert new elements at the position of this cursor.
2332 |    *
2333 |    * @memberof Chartist.Svg.Path
2334 |    * @param {Number} [pos] If a number is passed then the cursor is set to this position in the path element array.
2335 |    * @return {Chartist.Svg.Path|Number} If the position parameter was passed then the return value will be the path object for easy call chaining. If no position parameter was passed then the current position is returned.
2336 |    */
2337 |   function position(pos) {
2338 |     if(pos !== undefined) {
2339 |       this.pos = Math.max(0, Math.min(this.pathElements.length, pos));
2340 |       return this;
2341 |     } else {
2342 |       return this.pos;
2343 |     }
2344 |   }
2345 | 
2346 |   /**
2347 |    * Removes elements from the path starting at the current position.
2348 |    *
2349 |    * @memberof Chartist.Svg.Path
2350 |    * @param {Number} count Number of path elements that should be removed from the current position.
2351 |    * @return {Chartist.Svg.Path} The current path object for easy call chaining.
2352 |    */
2353 |   function remove(count) {
2354 |     this.pathElements.splice(this.pos, count);
2355 |     return this;
2356 |   }
2357 | 
2358 |   /**
2359 |    * Use this function to add a new move SVG path element.
2360 |    *
2361 |    * @memberof Chartist.Svg.Path
2362 |    * @param {Number} x The x coordinate for the move element.
2363 |    * @param {Number} y The y coordinate for the move element.
2364 |    * @param {Boolean} [relative] If set to true the move element will be created with relative coordinates (lowercase letter)
2365 |    * @param {*} [data] Any data that should be stored with the element object that will be accessible in pathElement
2366 |    * @return {Chartist.Svg.Path} The current path object for easy call chaining.
2367 |    */
2368 |   function move(x, y, relative, data) {
2369 |     element('M', {
2370 |       x: +x,
2371 |       y: +y
2372 |     }, this.pathElements, this.pos++, relative, data);
2373 |     return this;
2374 |   }
2375 | 
2376 |   /**
2377 |    * Use this function to add a new line SVG path element.
2378 |    *
2379 |    * @memberof Chartist.Svg.Path
2380 |    * @param {Number} x The x coordinate for the line element.
2381 |    * @param {Number} y The y coordinate for the line element.
2382 |    * @param {Boolean} [relative] If set to true the line element will be created with relative coordinates (lowercase letter)
2383 |    * @param {*} [data] Any data that should be stored with the element object that will be accessible in pathElement
2384 |    * @return {Chartist.Svg.Path} The current path object for easy call chaining.
2385 |    */
2386 |   function line(x, y, relative, data) {
2387 |     element('L', {
2388 |       x: +x,
2389 |       y: +y
2390 |     }, this.pathElements, this.pos++, relative, data);
2391 |     return this;
2392 |   }
2393 | 
2394 |   /**
2395 |    * Use this function to add a new curve SVG path element.
2396 |    *
2397 |    * @memberof Chartist.Svg.Path
2398 |    * @param {Number} x1 The x coordinate for the first control point of the bezier curve.
2399 |    * @param {Number} y1 The y coordinate for the first control point of the bezier curve.
2400 |    * @param {Number} x2 The x coordinate for the second control point of the bezier curve.
2401 |    * @param {Number} y2 The y coordinate for the second control point of the bezier curve.
2402 |    * @param {Number} x The x coordinate for the target point of the curve element.
2403 |    * @param {Number} y The y coordinate for the target point of the curve element.
2404 |    * @param {Boolean} [relative] If set to true the curve element will be created with relative coordinates (lowercase letter)
2405 |    * @param {*} [data] Any data that should be stored with the element object that will be accessible in pathElement
2406 |    * @return {Chartist.Svg.Path} The current path object for easy call chaining.
2407 |    */
2408 |   function curve(x1, y1, x2, y2, x, y, relative, data) {
2409 |     element('C', {
2410 |       x1: +x1,
2411 |       y1: +y1,
2412 |       x2: +x2,
2413 |       y2: +y2,
2414 |       x: +x,
2415 |       y: +y
2416 |     }, this.pathElements, this.pos++, relative, data);
2417 |     return this;
2418 |   }
2419 | 
2420 |   /**
2421 |    * Use this function to add a new non-bezier curve SVG path element.
2422 |    *
2423 |    * @memberof Chartist.Svg.Path
2424 |    * @param {Number} rx The radius to be used for the x-axis of the arc.
2425 |    * @param {Number} ry The radius to be used for the y-axis of the arc.
2426 |    * @param {Number} xAr Defines the orientation of the arc
2427 |    * @param {Number} lAf Large arc flag
2428 |    * @param {Number} sf Sweep flag
2429 |    * @param {Number} x The x coordinate for the target point of the curve element.
2430 |    * @param {Number} y The y coordinate for the target point of the curve element.
2431 |    * @param {Boolean} [relative] If set to true the curve element will be created with relative coordinates (lowercase letter)
2432 |    * @param {*} [data] Any data that should be stored with the element object that will be accessible in pathElement
2433 |    * @return {Chartist.Svg.Path} The current path object for easy call chaining.
2434 |    */
2435 |   function arc(rx, ry, xAr, lAf, sf, x, y, relative, data) {
2436 |     element('A', {
2437 |       rx: +rx,
2438 |       ry: +ry,
2439 |       xAr: +xAr,
2440 |       lAf: +lAf,
2441 |       sf: +sf,
2442 |       x: +x,
2443 |       y: +y
2444 |     }, this.pathElements, this.pos++, relative, data);
2445 |     return this;
2446 |   }
2447 | 
2448 |   /**
2449 |    * Parses an SVG path seen in the d attribute of path elements, and inserts the parsed elements into the existing path object at the current cursor position. Any closing path indicators (Z at the end of the path) will be ignored by the parser as this is provided by the close option in the options of the path object.
2450 |    *
2451 |    * @memberof Chartist.Svg.Path
2452 |    * @param {String} path Any SVG path that contains move (m), line (l) or curve (c) components.
2453 |    * @return {Chartist.Svg.Path} The current path object for easy call chaining.
2454 |    */
2455 |   function parse(path) {
2456 |     // Parsing the SVG path string into an array of arrays [['M', '10', '10'], ['L', '100', '100']]
2457 |     var chunks = path.replace(/([A-Za-z])([0-9])/g, '$1 $2')
2458 |       .replace(/([0-9])([A-Za-z])/g, '$1 $2')
2459 |       .split(/[\s,]+/)
2460 |       .reduce(function(result, element) {
2461 |         if(element.match(/[A-Za-z]/)) {
2462 |           result.push([]);
2463 |         }
2464 | 
2465 |         result[result.length - 1].push(element);
2466 |         return result;
2467 |       }, []);
2468 | 
2469 |     // If this is a closed path we remove the Z at the end because this is determined by the close option
2470 |     if(chunks[chunks.length - 1][0].toUpperCase() === 'Z') {
2471 |       chunks.pop();
2472 |     }
2473 | 
2474 |     // Using svgPathElementDescriptions to map raw path arrays into objects that contain the command and the parameters
2475 |     // For example {command: 'M', x: '10', y: '10'}
2476 |     var elements = chunks.map(function(chunk) {
2477 |         var command = chunk.shift(),
2478 |           description = elementDescriptions[command.toLowerCase()];
2479 | 
2480 |         return Chartist.extend({
2481 |           command: command
2482 |         }, description.reduce(function(result, paramName, index) {
2483 |           result[paramName] = +chunk[index];
2484 |           return result;
2485 |         }, {}));
2486 |       });
2487 | 
2488 |     // Preparing a splice call with the elements array as var arg params and insert the parsed elements at the current position
2489 |     var spliceArgs = [this.pos, 0];
2490 |     Array.prototype.push.apply(spliceArgs, elements);
2491 |     Array.prototype.splice.apply(this.pathElements, spliceArgs);
2492 |     // Increase the internal position by the element count
2493 |     this.pos += elements.length;
2494 | 
2495 |     return this;
2496 |   }
2497 | 
2498 |   /**
2499 |    * This function renders to current SVG path object into a final SVG string that can be used in the d attribute of SVG path elements. It uses the accuracy option to round big decimals. If the close parameter was set in the constructor of this path object then a path closing Z will be appended to the output string.
2500 |    *
2501 |    * @memberof Chartist.Svg.Path
2502 |    * @return {String}
2503 |    */
2504 |   function stringify() {
2505 |     var accuracyMultiplier = Math.pow(10, this.options.accuracy);
2506 | 
2507 |     return this.pathElements.reduce(function(path, pathElement) {
2508 |         var params = elementDescriptions[pathElement.command.toLowerCase()].map(function(paramName) {
2509 |           return this.options.accuracy ?
2510 |             (Math.round(pathElement[paramName] * accuracyMultiplier) / accuracyMultiplier) :
2511 |             pathElement[paramName];
2512 |         }.bind(this));
2513 | 
2514 |         return path + pathElement.command + params.join(',');
2515 |       }.bind(this), '') + (this.close ? 'Z' : '');
2516 |   }
2517 | 
2518 |   /**
2519 |    * Scales all elements in the current SVG path object. There is an individual parameter for each coordinate. Scaling will also be done for control points of curves, affecting the given coordinate.
2520 |    *
2521 |    * @memberof Chartist.Svg.Path
2522 |    * @param {Number} x The number which will be used to scale the x, x1 and x2 of all path elements.
2523 |    * @param {Number} y The number which will be used to scale the y, y1 and y2 of all path elements.
2524 |    * @return {Chartist.Svg.Path} The current path object for easy call chaining.
2525 |    */
2526 |   function scale(x, y) {
2527 |     forEachParam(this.pathElements, function(pathElement, paramName) {
2528 |       pathElement[paramName] *= paramName[0] === 'x' ? x : y;
2529 |     });
2530 |     return this;
2531 |   }
2532 | 
2533 |   /**
2534 |    * Translates all elements in the current SVG path object. The translation is relative and there is an individual parameter for each coordinate. Translation will also be done for control points of curves, affecting the given coordinate.
2535 |    *
2536 |    * @memberof Chartist.Svg.Path
2537 |    * @param {Number} x The number which will be used to translate the x, x1 and x2 of all path elements.
2538 |    * @param {Number} y The number which will be used to translate the y, y1 and y2 of all path elements.
2539 |    * @return {Chartist.Svg.Path} The current path object for easy call chaining.
2540 |    */
2541 |   function translate(x, y) {
2542 |     forEachParam(this.pathElements, function(pathElement, paramName) {
2543 |       pathElement[paramName] += paramName[0] === 'x' ? x : y;
2544 |     });
2545 |     return this;
2546 |   }
2547 | 
2548 |   /**
2549 |    * This function will run over all existing path elements and then loop over their attributes. The callback function will be called for every path element attribute that exists in the current path.
2550 |    * The method signature of the callback function looks like this:
2551 |    * ```javascript
2552 |    * function(pathElement, paramName, pathElementIndex, paramIndex, pathElements)
2553 |    * ```
2554 |    * If something else than undefined is returned by the callback function, this value will be used to replace the old value. This allows you to build custom transformations of path objects that can't be achieved using the basic transformation functions scale and translate.
2555 |    *
2556 |    * @memberof Chartist.Svg.Path
2557 |    * @param {Function} transformFnc The callback function for the transformation. Check the signature in the function description.
2558 |    * @return {Chartist.Svg.Path} The current path object for easy call chaining.
2559 |    */
2560 |   function transform(transformFnc) {
2561 |     forEachParam(this.pathElements, function(pathElement, paramName, pathElementIndex, paramIndex, pathElements) {
2562 |       var transformed = transformFnc(pathElement, paramName, pathElementIndex, paramIndex, pathElements);
2563 |       if(transformed || transformed === 0) {
2564 |         pathElement[paramName] = transformed;
2565 |       }
2566 |     });
2567 |     return this;
2568 |   }
2569 | 
2570 |   /**
2571 |    * This function clones a whole path object with all its properties. This is a deep clone and path element objects will also be cloned.
2572 |    *
2573 |    * @memberof Chartist.Svg.Path
2574 |    * @param {Boolean} [close] Optional option to set the new cloned path to closed. If not specified or false, the original path close option will be used.
2575 |    * @return {Chartist.Svg.Path}
2576 |    */
2577 |   function clone(close) {
2578 |     var c = new Chartist.Svg.Path(close || this.close);
2579 |     c.pos = this.pos;
2580 |     c.pathElements = this.pathElements.slice().map(function cloneElements(pathElement) {
2581 |       return Chartist.extend({}, pathElement);
2582 |     });
2583 |     c.options = Chartist.extend({}, this.options);
2584 |     return c;
2585 |   }
2586 | 
2587 |   /**
2588 |    * Split a Svg.Path object by a specific command in the path chain. The path chain will be split and an array of newly created paths objects will be returned. This is useful if you'd like to split an SVG path by it's move commands, for example, in order to isolate chunks of drawings.
2589 |    *
2590 |    * @memberof Chartist.Svg.Path
2591 |    * @param {String} command The command you'd like to use to split the path
2592 |    * @return {Array<Chartist.Svg.Path>}
2593 |    */
2594 |   function splitByCommand(command) {
2595 |     var split = [
2596 |       new Chartist.Svg.Path()
2597 |     ];
2598 | 
2599 |     this.pathElements.forEach(function(pathElement) {
2600 |       if(pathElement.command === command.toUpperCase() && split[split.length - 1].pathElements.length !== 0) {
2601 |         split.push(new Chartist.Svg.Path());
2602 |       }
2603 | 
2604 |       split[split.length - 1].pathElements.push(pathElement);
2605 |     });
2606 | 
2607 |     return split;
2608 |   }
2609 | 
2610 |   /**
2611 |    * This static function on `Chartist.Svg.Path` is joining multiple paths together into one paths.
2612 |    *
2613 |    * @memberof Chartist.Svg.Path
2614 |    * @param {Array<Chartist.Svg.Path>} paths A list of paths to be joined together. The order is important.
2615 |    * @param {boolean} close If the newly created path should be a closed path
2616 |    * @param {Object} options Path options for the newly created path.
2617 |    * @return {Chartist.Svg.Path}
2618 |    */
2619 | 
2620 |   function join(paths, close, options) {
2621 |     var joinedPath = new Chartist.Svg.Path(close, options);
2622 |     for(var i = 0; i < paths.length; i++) {
2623 |       var path = paths[i];
2624 |       for(var j = 0; j < path.pathElements.length; j++) {
2625 |         joinedPath.pathElements.push(path.pathElements[j]);
2626 |       }
2627 |     }
2628 |     return joinedPath;
2629 |   }
2630 | 
2631 |   Chartist.Svg.Path = Chartist.Class.extend({
2632 |     constructor: SvgPath,
2633 |     position: position,
2634 |     remove: remove,
2635 |     move: move,
2636 |     line: line,
2637 |     curve: curve,
2638 |     arc: arc,
2639 |     scale: scale,
2640 |     translate: translate,
2641 |     transform: transform,
2642 |     parse: parse,
2643 |     stringify: stringify,
2644 |     clone: clone,
2645 |     splitByCommand: splitByCommand
2646 |   });
2647 | 
2648 |   Chartist.Svg.Path.elementDescriptions = elementDescriptions;
2649 |   Chartist.Svg.Path.join = join;
2650 | }(window, document, Chartist));
2651 | ;/* global Chartist */
2652 | (function (window, document, Chartist) {
2653 |   'use strict';
2654 | 
2655 |   var axisUnits = {
2656 |     x: {
2657 |       pos: 'x',
2658 |       len: 'width',
2659 |       dir: 'horizontal',
2660 |       rectStart: 'x1',
2661 |       rectEnd: 'x2',
2662 |       rectOffset: 'y2'
2663 |     },
2664 |     y: {
2665 |       pos: 'y',
2666 |       len: 'height',
2667 |       dir: 'vertical',
2668 |       rectStart: 'y2',
2669 |       rectEnd: 'y1',
2670 |       rectOffset: 'x1'
2671 |     }
2672 |   };
2673 | 
2674 |   function Axis(units, chartRect, ticks, options) {
2675 |     this.units = units;
2676 |     this.counterUnits = units === axisUnits.x ? axisUnits.y : axisUnits.x;
2677 |     this.chartRect = chartRect;
2678 |     this.axisLength = chartRect[units.rectEnd] - chartRect[units.rectStart];
2679 |     this.gridOffset = chartRect[units.rectOffset];
2680 |     this.ticks = ticks;
2681 |     this.options = options;
2682 |   }
2683 | 
2684 |   function createGridAndLabels(gridGroup, labelGroup, useForeignObject, chartOptions, eventEmitter) {
2685 |     var axisOptions = chartOptions['axis' + this.units.pos.toUpperCase()];
2686 |     var projectedValues = this.ticks.map(this.projectValue.bind(this));
2687 |     var labelValues = this.ticks.map(axisOptions.labelInterpolationFnc);
2688 | 
2689 |     projectedValues.forEach(function(projectedValue, index) {
2690 |       var labelOffset = {
2691 |         x: 0,
2692 |         y: 0
2693 |       };
2694 | 
2695 |       // TODO: Find better solution for solving this problem
2696 |       // Calculate how much space we have available for the label
2697 |       var labelLength;
2698 |       if(projectedValues[index + 1]) {
2699 |         // If we still have one label ahead, we can calculate the distance to the next tick / label
2700 |         labelLength = projectedValues[index + 1] - projectedValue;
2701 |       } else {
2702 |         // If we don't have a label ahead and we have only two labels in total, we just take the remaining distance to
2703 |         // on the whole axis length. We limit that to a minimum of 30 pixel, so that labels close to the border will
2704 |         // still be visible inside of the chart padding.
2705 |         labelLength = Math.max(this.axisLength - projectedValue, 30);
2706 |       }
2707 | 
2708 |       // Skip grid lines and labels where interpolated label values are falsey (execpt for 0)
2709 |       if(!labelValues[index] && labelValues[index] !== 0) {
2710 |         return;
2711 |       }
2712 | 
2713 |       // Transform to global coordinates using the chartRect
2714 |       // We also need to set the label offset for the createLabel function
2715 |       if(this.units.pos === 'x') {
2716 |         projectedValue = this.chartRect.x1 + projectedValue;
2717 |         labelOffset.x = chartOptions.axisX.labelOffset.x;
2718 | 
2719 |         // If the labels should be positioned in start position (top side for vertical axis) we need to set a
2720 |         // different offset as for positioned with end (bottom)
2721 |         if(chartOptions.axisX.position === 'start') {
2722 |           labelOffset.y = this.chartRect.padding.top + chartOptions.axisX.labelOffset.y + (useForeignObject ? 5 : 20);
2723 |         } else {
2724 |           labelOffset.y = this.chartRect.y1 + chartOptions.axisX.labelOffset.y + (useForeignObject ? 5 : 20);
2725 |         }
2726 |       } else {
2727 |         projectedValue = this.chartRect.y1 - projectedValue;
2728 |         labelOffset.y = chartOptions.axisY.labelOffset.y - (useForeignObject ? labelLength : 0);
2729 | 
2730 |         // If the labels should be positioned in start position (left side for horizontal axis) we need to set a
2731 |         // different offset as for positioned with end (right side)
2732 |         if(chartOptions.axisY.position === 'start') {
2733 |           labelOffset.x = useForeignObject ? this.chartRect.padding.left + chartOptions.axisY.labelOffset.x : this.chartRect.x1 - 10;
2734 |         } else {
2735 |           labelOffset.x = this.chartRect.x2 + chartOptions.axisY.labelOffset.x + 10;
2736 |         }
2737 |       }
2738 | 
2739 |       if(axisOptions.showGrid) {
2740 |         Chartist.createGrid(projectedValue, index, this, this.gridOffset, this.chartRect[this.counterUnits.len](), gridGroup, [
2741 |           chartOptions.classNames.grid,
2742 |           chartOptions.classNames[this.units.dir]
2743 |         ], eventEmitter);
2744 |       }
2745 | 
2746 |       if(axisOptions.showLabel) {
2747 |         Chartist.createLabel(projectedValue, labelLength, index, labelValues, this, axisOptions.offset, labelOffset, labelGroup, [
2748 |           chartOptions.classNames.label,
2749 |           chartOptions.classNames[this.units.dir],
2750 |           chartOptions.classNames[axisOptions.position]
2751 |         ], useForeignObject, eventEmitter);
2752 |       }
2753 |     }.bind(this));
2754 |   }
2755 | 
2756 |   Chartist.Axis = Chartist.Class.extend({
2757 |     constructor: Axis,
2758 |     createGridAndLabels: createGridAndLabels,
2759 |     projectValue: function(value, index, data) {
2760 |       throw new Error('Base axis can\'t be instantiated!');
2761 |     }
2762 |   });
2763 | 
2764 |   Chartist.Axis.units = axisUnits;
2765 | 
2766 | }(window, document, Chartist));
2767 | ;/**
2768 |  * The auto scale axis uses standard linear scale projection of values along an axis. It uses order of magnitude to find a scale automatically and evaluates the available space in order to find the perfect amount of ticks for your chart.
2769 |  * **Options**
2770 |  * The following options are used by this axis in addition to the default axis options outlined in the axis configuration of the chart default settings.
2771 |  * ```javascript
2772 |  * var options = {
2773 |  *   // If high is specified then the axis will display values explicitly up to this value and the computed maximum from the data is ignored
2774 |  *   high: 100,
2775 |  *   // If low is specified then the axis will display values explicitly down to this value and the computed minimum from the data is ignored
2776 |  *   low: 0,
2777 |  *   // This option will be used when finding the right scale division settings. The amount of ticks on the scale will be determined so that as many ticks as possible will be displayed, while not violating this minimum required space (in pixel).
2778 |  *   scaleMinSpace: 20,
2779 |  *   // Can be set to true or false. If set to true, the scale will be generated with whole numbers only.
2780 |  *   onlyInteger: true,
2781 |  *   // The reference value can be used to make sure that this value will always be on the chart. This is especially useful on bipolar charts where the bipolar center always needs to be part of the chart.
2782 |  *   referenceValue: 5
2783 |  * };
2784 |  * ```
2785 |  *
2786 |  * @module Chartist.AutoScaleAxis
2787 |  */
2788 | /* global Chartist */
2789 | (function (window, document, Chartist) {
2790 |   'use strict';
2791 | 
2792 |   function AutoScaleAxis(axisUnit, data, chartRect, options) {
2793 |     // Usually we calculate highLow based on the data but this can be overriden by a highLow object in the options
2794 |     var highLow = options.highLow || Chartist.getHighLow(data.normalized, options, axisUnit.pos);
2795 |     this.bounds = Chartist.getBounds(chartRect[axisUnit.rectEnd] - chartRect[axisUnit.rectStart], highLow, options.scaleMinSpace || 20, options.onlyInteger);
2796 |     this.range = {
2797 |       min: this.bounds.min,
2798 |       max: this.bounds.max
2799 |     };
2800 | 
2801 |     Chartist.AutoScaleAxis.super.constructor.call(this,
2802 |       axisUnit,
2803 |       chartRect,
2804 |       this.bounds.values,
2805 |       options);
2806 |   }
2807 | 
2808 |   function projectValue(value) {
2809 |     return this.axisLength * (+Chartist.getMultiValue(value, this.units.pos) - this.bounds.min) / this.bounds.range;
2810 |   }
2811 | 
2812 |   Chartist.AutoScaleAxis = Chartist.Axis.extend({
2813 |     constructor: AutoScaleAxis,
2814 |     projectValue: projectValue
2815 |   });
2816 | 
2817 | }(window, document, Chartist));
2818 | ;/**
2819 |  * The fixed scale axis uses standard linear projection of values along an axis. It makes use of a divisor option to divide the range provided from the minimum and maximum value or the options high and low that will override the computed minimum and maximum.
2820 |  * **Options**
2821 |  * The following options are used by this axis in addition to the default axis options outlined in the axis configuration of the chart default settings.
2822 |  * ```javascript
2823 |  * var options = {
2824 |  *   // If high is specified then the axis will display values explicitly up to this value and the computed maximum from the data is ignored
2825 |  *   high: 100,
2826 |  *   // If low is specified then the axis will display values explicitly down to this value and the computed minimum from the data is ignored
2827 |  *   low: 0,
2828 |  *   // If specified then the value range determined from minimum to maximum (or low and high) will be divided by this number and ticks will be generated at those division points. The default divisor is 1.
2829 |  *   divisor: 4,
2830 |  *   // If ticks is explicitly set, then the axis will not compute the ticks with the divisor, but directly use the data in ticks to determine at what points on the axis a tick need to be generated.
2831 |  *   ticks: [1, 10, 20, 30]
2832 |  * };
2833 |  * ```
2834 |  *
2835 |  * @module Chartist.FixedScaleAxis
2836 |  */
2837 | /* global Chartist */
2838 | (function (window, document, Chartist) {
2839 |   'use strict';
2840 | 
2841 |   function FixedScaleAxis(axisUnit, data, chartRect, options) {
2842 |     var highLow = options.highLow || Chartist.getHighLow(data.normalized, options, axisUnit.pos);
2843 |     this.divisor = options.divisor || 1;
2844 |     this.ticks = options.ticks || Chartist.times(this.divisor).map(function(value, index) {
2845 |       return highLow.low + (highLow.high - highLow.low) / this.divisor * index;
2846 |     }.bind(this));
2847 |     this.range = {
2848 |       min: highLow.low,
2849 |       max: highLow.high
2850 |     };
2851 | 
2852 |     Chartist.FixedScaleAxis.super.constructor.call(this,
2853 |       axisUnit,
2854 |       chartRect,
2855 |       this.ticks,
2856 |       options);
2857 | 
2858 |     this.stepLength = this.axisLength / this.divisor;
2859 |   }
2860 | 
2861 |   function projectValue(value) {
2862 |     return this.axisLength * (+Chartist.getMultiValue(value, this.units.pos) - this.range.min) / (this.range.max - this.range.min);
2863 |   }
2864 | 
2865 |   Chartist.FixedScaleAxis = Chartist.Axis.extend({
2866 |     constructor: FixedScaleAxis,
2867 |     projectValue: projectValue
2868 |   });
2869 | 
2870 | }(window, document, Chartist));
2871 | ;/**
2872 |  * The step axis for step based charts like bar chart or step based line charts. It uses a fixed amount of ticks that will be equally distributed across the whole axis length. The projection is done using the index of the data value rather than the value itself and therefore it's only useful for distribution purpose.
2873 |  * **Options**
2874 |  * The following options are used by this axis in addition to the default axis options outlined in the axis configuration of the chart default settings.
2875 |  * ```javascript
2876 |  * var options = {
2877 |  *   // Ticks to be used to distribute across the axis length. As this axis type relies on the index of the value rather than the value, arbitrary data that can be converted to a string can be used as ticks.
2878 |  *   ticks: ['One', 'Two', 'Three'],
2879 |  *   // If set to true the full width will be used to distribute the values where the last value will be at the maximum of the axis length. If false the spaces between the ticks will be evenly distributed instead.
2880 |  *   stretch: true
2881 |  * };
2882 |  * ```
2883 |  *
2884 |  * @module Chartist.StepAxis
2885 |  */
2886 | /* global Chartist */
2887 | (function (window, document, Chartist) {
2888 |   'use strict';
2889 | 
2890 |   function StepAxis(axisUnit, data, chartRect, options) {
2891 |     Chartist.StepAxis.super.constructor.call(this,
2892 |       axisUnit,
2893 |       chartRect,
2894 |       options.ticks,
2895 |       options);
2896 | 
2897 |     this.stepLength = this.axisLength / (options.ticks.length - (options.stretch ? 1 : 0));
2898 |   }
2899 | 
2900 |   function projectValue(value, index) {
2901 |     return this.stepLength * index;
2902 |   }
2903 | 
2904 |   Chartist.StepAxis = Chartist.Axis.extend({
2905 |     constructor: StepAxis,
2906 |     projectValue: projectValue
2907 |   });
2908 | 
2909 | }(window, document, Chartist));
2910 | ;/**
2911 |  * The Chartist line chart can be used to draw Line or Scatter charts. If used in the browser you can access the global `Chartist` namespace where you find the `Line` function as a main entry point.
2912 |  *
2913 |  * For examples on how to use the line chart please check the examples of the `Chartist.Line` method.
2914 |  *
2915 |  * @module Chartist.Line
2916 |  */
2917 | /* global Chartist */
2918 | (function(window, document, Chartist){
2919 |   'use strict';
2920 | 
2921 |   /**
2922 |    * Default options in line charts. Expand the code view to see a detailed list of options with comments.
2923 |    *
2924 |    * @memberof Chartist.Line
2925 |    */
2926 |   var defaultOptions = {
2927 |     // Options for X-Axis
2928 |     axisX: {
2929 |       // The offset of the labels to the chart area
2930 |       offset: 30,
2931 |       // Position where labels are placed. Can be set to `start` or `end` where `start` is equivalent to left or top on vertical axis and `end` is equivalent to right or bottom on horizontal axis.
2932 |       position: 'end',
2933 |       // Allows you to correct label positioning on this axis by positive or negative x and y offset.
2934 |       labelOffset: {
2935 |         x: 0,
2936 |         y: 0
2937 |       },
2938 |       // If labels should be shown or not
2939 |       showLabel: true,
2940 |       // If the axis grid should be drawn or not
2941 |       showGrid: true,
2942 |       // Interpolation function that allows you to intercept the value from the axis label
2943 |       labelInterpolationFnc: Chartist.noop,
2944 |       // Set the axis type to be used to project values on this axis. If not defined, Chartist.StepAxis will be used for the X-Axis, where the ticks option will be set to the labels in the data and the stretch option will be set to the global fullWidth option. This type can be changed to any axis constructor available (e.g. Chartist.FixedScaleAxis), where all axis options should be present here.
2945 |       type: undefined
2946 |     },
2947 |     // Options for Y-Axis
2948 |     axisY: {
2949 |       // The offset of the labels to the chart area
2950 |       offset: 40,
2951 |       // Position where labels are placed. Can be set to `start` or `end` where `start` is equivalent to left or top on vertical axis and `end` is equivalent to right or bottom on horizontal axis.
2952 |       position: 'start',
2953 |       // Allows you to correct label positioning on this axis by positive or negative x and y offset.
2954 |       labelOffset: {
2955 |         x: 0,
2956 |         y: 0
2957 |       },
2958 |       // If labels should be shown or not
2959 |       showLabel: true,
2960 |       // If the axis grid should be drawn or not
2961 |       showGrid: true,
2962 |       // Interpolation function that allows you to intercept the value from the axis label
2963 |       labelInterpolationFnc: Chartist.noop,
2964 |       // Set the axis type to be used to project values on this axis. If not defined, Chartist.AutoScaleAxis will be used for the Y-Axis, where the high and low options will be set to the global high and low options. This type can be changed to any axis constructor available (e.g. Chartist.FixedScaleAxis), where all axis options should be present here.
2965 |       type: undefined,
2966 |       // This value specifies the minimum height in pixel of the scale steps
2967 |       scaleMinSpace: 20,
2968 |       // Use only integer values (whole numbers) for the scale steps
2969 |       onlyInteger: false
2970 |     },
2971 |     // Specify a fixed width for the chart as a string (i.e. '100px' or '50%')
2972 |     width: undefined,
2973 |     // Specify a fixed height for the chart as a string (i.e. '100px' or '50%')
2974 |     height: undefined,
2975 |     // If the line should be drawn or not
2976 |     showLine: true,
2977 |     // If dots should be drawn or not
2978 |     showPoint: true,
2979 |     // If the line chart should draw an area
2980 |     showArea: false,
2981 |     // The base for the area chart that will be used to close the area shape (is normally 0)
2982 |     areaBase: 0,
2983 |     // Specify if the lines should be smoothed. This value can be true or false where true will result in smoothing using the default smoothing interpolation function Chartist.Interpolation.cardinal and false results in Chartist.Interpolation.none. You can also choose other smoothing / interpolation functions available in the Chartist.Interpolation module, or write your own interpolation function. Check the examples for a brief description.
2984 |     lineSmooth: true,
2985 |     // Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value
2986 |     low: undefined,
2987 |     // Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value
2988 |     high: undefined,
2989 |     // Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5}
2990 |     chartPadding: {
2991 |       top: 15,
2992 |       right: 15,
2993 |       bottom: 5,
2994 |       left: 10
2995 |     },
2996 |     // When set to true, the last grid line on the x-axis is not drawn and the chart elements will expand to the full available width of the chart. For the last label to be drawn correctly you might need to add chart padding or offset the last label with a draw event handler.
2997 |     fullWidth: false,
2998 |     // If true the whole data is reversed including labels, the series order as well as the whole series data arrays.
2999 |     reverseData: false,
3000 |     // Override the class names that get used to generate the SVG structure of the chart
3001 |     classNames: {
3002 |       chart: 'ct-chart-line',
3003 |       label: 'ct-label',
3004 |       labelGroup: 'ct-labels',
3005 |       series: 'ct-series',
3006 |       line: 'ct-line',
3007 |       point: 'ct-point',
3008 |       area: 'ct-area',
3009 |       grid: 'ct-grid',
3010 |       gridGroup: 'ct-grids',
3011 |       vertical: 'ct-vertical',
3012 |       horizontal: 'ct-horizontal',
3013 |       start: 'ct-start',
3014 |       end: 'ct-end'
3015 |     }
3016 |   };
3017 | 
3018 |   /**
3019 |    * Creates a new chart
3020 |    *
3021 |    */
3022 |   function createChart(options) {
3023 |     var data = {
3024 |       raw: this.data,
3025 |       normalized: Chartist.getDataArray(this.data, options.reverseData, true)
3026 |     };
3027 | 
3028 |     // Create new svg object
3029 |     this.svg = Chartist.createSvg(this.container, options.width, options.height, options.classNames.chart);
3030 |     // Create groups for labels, grid and series
3031 |     var gridGroup = this.svg.elem('g').addClass(options.classNames.gridGroup);
3032 |     var seriesGroup = this.svg.elem('g');
3033 |     var labelGroup = this.svg.elem('g').addClass(options.classNames.labelGroup);
3034 | 
3035 |     var chartRect = Chartist.createChartRect(this.svg, options, defaultOptions.padding);
3036 |     var axisX, axisY;
3037 | 
3038 |     if(options.axisX.type === undefined) {
3039 |       axisX = new Chartist.StepAxis(Chartist.Axis.units.x, data, chartRect, Chartist.extend({}, options.axisX, {
3040 |         ticks: data.raw.labels,
3041 |         stretch: options.fullWidth
3042 |       }));
3043 |     } else {
3044 |       axisX = options.axisX.type.call(Chartist, Chartist.Axis.units.x, data, chartRect, options.axisX);
3045 |     }
3046 | 
3047 |     if(options.axisY.type === undefined) {
3048 |       axisY = new Chartist.AutoScaleAxis(Chartist.Axis.units.y, data, chartRect, Chartist.extend({}, options.axisY, {
3049 |         high: Chartist.isNum(options.high) ? options.high : options.axisY.high,
3050 |         low: Chartist.isNum(options.low) ? options.low : options.axisY.low
3051 |       }));
3052 |     } else {
3053 |       axisY = options.axisY.type.call(Chartist, Chartist.Axis.units.y, data, chartRect, options.axisY);
3054 |     }
3055 | 
3056 |     axisX.createGridAndLabels(gridGroup, labelGroup, this.supportsForeignObject, options, this.eventEmitter);
3057 |     axisY.createGridAndLabels(gridGroup, labelGroup, this.supportsForeignObject, options, this.eventEmitter);
3058 | 
3059 |     // Draw the series
3060 |     data.raw.series.forEach(function(series, seriesIndex) {
3061 |       var seriesElement = seriesGroup.elem('g');
3062 | 
3063 |       // Write attributes to series group element. If series name or meta is undefined the attributes will not be written
3064 |       seriesElement.attr({
3065 |         'series-name': series.name,
3066 |         'meta': Chartist.serialize(series.meta)
3067 |       }, Chartist.xmlNs.uri);
3068 | 
3069 |       // Use series class from series data or if not set generate one
3070 |       seriesElement.addClass([
3071 |         options.classNames.series,
3072 |         (series.className || options.classNames.series + '-' + Chartist.alphaNumerate(seriesIndex))
3073 |       ].join(' '));
3074 | 
3075 |       var pathCoordinates = [],
3076 |         pathData = [];
3077 | 
3078 |       data.normalized[seriesIndex].forEach(function(value, valueIndex) {
3079 |         var p = {
3080 |           x: chartRect.x1 + axisX.projectValue(value, valueIndex, data.normalized[seriesIndex]),
3081 |           y: chartRect.y1 - axisY.projectValue(value, valueIndex, data.normalized[seriesIndex])
3082 |         };
3083 |         pathCoordinates.push(p.x, p.y);
3084 |         pathData.push({
3085 |           value: value,
3086 |           valueIndex: valueIndex,
3087 |           meta: Chartist.getMetaData(series, valueIndex)
3088 |         });
3089 |       }.bind(this));
3090 | 
3091 |       var seriesOptions = {
3092 |         lineSmooth: Chartist.getSeriesOption(series, options, 'lineSmooth'),
3093 |         showPoint: Chartist.getSeriesOption(series, options, 'showPoint'),
3094 |         showLine: Chartist.getSeriesOption(series, options, 'showLine'),
3095 |         showArea: Chartist.getSeriesOption(series, options, 'showArea'),
3096 |         areaBase: Chartist.getSeriesOption(series, options, 'areaBase')
3097 |       };
3098 | 
3099 |       var smoothing = typeof seriesOptions.lineSmooth === 'function' ?
3100 |         seriesOptions.lineSmooth : (seriesOptions.lineSmooth ? Chartist.Interpolation.cardinal() : Chartist.Interpolation.none());
3101 |       // Interpolating path where pathData will be used to annotate each path element so we can trace back the original
3102 |       // index, value and meta data
3103 |       var path = smoothing(pathCoordinates, pathData);
3104 | 
3105 |       // If we should show points we need to create them now to avoid secondary loop
3106 |       // Points are drawn from the pathElements returned by the interpolation function
3107 |       // Small offset for Firefox to render squares correctly
3108 |       if (seriesOptions.showPoint) {
3109 | 
3110 |         path.pathElements.forEach(function(pathElement) {
3111 |           var point = seriesElement.elem('line', {
3112 |             x1: pathElement.x,
3113 |             y1: pathElement.y,
3114 |             x2: pathElement.x + 0.01,
3115 |             y2: pathElement.y
3116 |           }, options.classNames.point).attr({
3117 |             'value': [pathElement.data.value.x, pathElement.data.value.y].filter(function(v) {
3118 |                 return v;
3119 |               }).join(','),
3120 |             'meta': pathElement.data.meta
3121 |           }, Chartist.xmlNs.uri);
3122 | 
3123 |           this.eventEmitter.emit('draw', {
3124 |             type: 'point',
3125 |             value: pathElement.data.value,
3126 |             index: pathElement.data.valueIndex,
3127 |             meta: pathElement.data.meta,
3128 |             series: series,
3129 |             seriesIndex: seriesIndex,
3130 |             axisX: axisX,
3131 |             axisY: axisY,
3132 |             group: seriesElement,
3133 |             element: point,
3134 |             x: pathElement.x,
3135 |             y: pathElement.y
3136 |           });
3137 |         }.bind(this));
3138 |       }
3139 | 
3140 |       if(seriesOptions.showLine) {
3141 |         var line = seriesElement.elem('path', {
3142 |           d: path.stringify()
3143 |         }, options.classNames.line, true);
3144 | 
3145 |         this.eventEmitter.emit('draw', {
3146 |           type: 'line',
3147 |           values: data.normalized[seriesIndex],
3148 |           path: path.clone(),
3149 |           chartRect: chartRect,
3150 |           index: seriesIndex,
3151 |           series: series,
3152 |           seriesIndex: seriesIndex,
3153 |           axisX: axisX,
3154 |           axisY: axisY,
3155 |           group: seriesElement,
3156 |           element: line
3157 |         });
3158 |       }
3159 | 
3160 |       // Area currently only works with axes that support a range!
3161 |       if(seriesOptions.showArea && axisY.range) {
3162 |         // If areaBase is outside the chart area (< min or > max) we need to set it respectively so that
3163 |         // the area is not drawn outside the chart area.
3164 |         var areaBase = Math.max(Math.min(seriesOptions.areaBase, axisY.range.max), axisY.range.min);
3165 | 
3166 |         // We project the areaBase value into screen coordinates
3167 |         var areaBaseProjected = chartRect.y1 - axisY.projectValue(areaBase);
3168 | 
3169 |         // In order to form the area we'll first split the path by move commands so we can chunk it up into segments
3170 |         path.splitByCommand('M').filter(function onlySolidSegments(pathSegment) {
3171 |           // We filter only "solid" segments that contain more than one point. Otherwise there's no need for an area
3172 |           return pathSegment.pathElements.length > 1;
3173 |         }).map(function convertToArea(solidPathSegments) {
3174 |           // Receiving the filtered solid path segments we can now convert those segments into fill areas
3175 |           var firstElement = solidPathSegments.pathElements[0];
3176 |           var lastElement = solidPathSegments.pathElements[solidPathSegments.pathElements.length - 1];
3177 | 
3178 |           // Cloning the solid path segment with closing option and removing the first move command from the clone
3179 |           // We then insert a new move that should start at the area base and draw a straight line up or down
3180 |           // at the end of the path we add an additional straight line to the projected area base value
3181 |           // As the closing option is set our path will be automatically closed
3182 |           return solidPathSegments.clone(true)
3183 |             .position(0)
3184 |             .remove(1)
3185 |             .move(firstElement.x, areaBaseProjected)
3186 |             .line(firstElement.x, firstElement.y)
3187 |             .position(solidPathSegments.pathElements.length + 1)
3188 |             .line(lastElement.x, areaBaseProjected);
3189 | 
3190 |         }).forEach(function createArea(areaPath) {
3191 |           // For each of our newly created area paths, we'll now create path elements by stringifying our path objects
3192 |           // and adding the created DOM elements to the correct series group
3193 |           var area = seriesElement.elem('path', {
3194 |             d: areaPath.stringify()
3195 |           }, options.classNames.area, true).attr({
3196 |             'values': data.normalized[seriesIndex]
3197 |           }, Chartist.xmlNs.uri);
3198 | 
3199 |           // Emit an event for each area that was drawn
3200 |           this.eventEmitter.emit('draw', {
3201 |             type: 'area',
3202 |             values: data.normalized[seriesIndex],
3203 |             path: areaPath.clone(),
3204 |             series: series,
3205 |             seriesIndex: seriesIndex,
3206 |             axisX: axisX,
3207 |             axisY: axisY,
3208 |             chartRect: chartRect,
3209 |             index: seriesIndex,
3210 |             group: seriesElement,
3211 |             element: area
3212 |           });
3213 |         }.bind(this));
3214 |       }
3215 |     }.bind(this));
3216 | 
3217 |     this.eventEmitter.emit('created', {
3218 |       bounds: axisY.bounds,
3219 |       chartRect: chartRect,
3220 |       axisX: axisX,
3221 |       axisY: axisY,
3222 |       svg: this.svg,
3223 |       options: options
3224 |     });
3225 |   }
3226 | 
3227 |   /**
3228 |    * This method creates a new line chart.
3229 |    *
3230 |    * @memberof Chartist.Line
3231 |    * @param {String|Node} query A selector query string or directly a DOM element
3232 |    * @param {Object} data The data object that needs to consist of a labels and a series array
3233 |    * @param {Object} [options] The options object with options that override the default options. Check the examples for a detailed list.
3234 |    * @param {Array} [responsiveOptions] Specify an array of responsive option arrays which are a media query and options object pair => [[mediaQueryString, optionsObject],[more...]]
3235 |    * @return {Object} An object which exposes the API for the created chart
3236 |    *
3237 |    * @example
3238 |    * // Create a simple line chart
3239 |    * var data = {
3240 |    *   // A labels array that can contain any sort of values
3241 |    *   labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
3242 |    *   // Our series array that contains series objects or in this case series data arrays
3243 |    *   series: [
3244 |    *     [5, 2, 4, 2, 0]
3245 |    *   ]
3246 |    * };
3247 |    *
3248 |    * // As options we currently only set a static size of 300x200 px
3249 |    * var options = {
3250 |    *   width: '300px',
3251 |    *   height: '200px'
3252 |    * };
3253 |    *
3254 |    * // In the global name space Chartist we call the Line function to initialize a line chart. As a first parameter we pass in a selector where we would like to get our chart created. Second parameter is the actual data object and as a third parameter we pass in our options
3255 |    * new Chartist.Line('.ct-chart', data, options);
3256 |    *
3257 |    * @example
3258 |    * // Use specific interpolation function with configuration from the Chartist.Interpolation module
3259 |    *
3260 |    * var chart = new Chartist.Line('.ct-chart', {
3261 |    *   labels: [1, 2, 3, 4, 5],
3262 |    *   series: [
3263 |    *     [1, 1, 8, 1, 7]
3264 |    *   ]
3265 |    * }, {
3266 |    *   lineSmooth: Chartist.Interpolation.cardinal({
3267 |    *     tension: 0.2
3268 |    *   })
3269 |    * });
3270 |    *
3271 |    * @example
3272 |    * // Create a line chart with responsive options
3273 |    *
3274 |    * var data = {
3275 |    *   // A labels array that can contain any sort of values
3276 |    *   labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
3277 |    *   // Our series array that contains series objects or in this case series data arrays
3278 |    *   series: [
3279 |    *     [5, 2, 4, 2, 0]
3280 |    *   ]
3281 |    * };
3282 |    *
3283 |    * // In adition to the regular options we specify responsive option overrides that will override the default configutation based on the matching media queries.
3284 |    * var responsiveOptions = [
3285 |    *   ['screen and (min-width: 641px) and (max-width: 1024px)', {
3286 |    *     showPoint: false,
3287 |    *     axisX: {
3288 |    *       labelInterpolationFnc: function(value) {
3289 |    *         // Will return Mon, Tue, Wed etc. on medium screens
3290 |    *         return value.slice(0, 3);
3291 |    *       }
3292 |    *     }
3293 |    *   }],
3294 |    *   ['screen and (max-width: 640px)', {
3295 |    *     showLine: false,
3296 |    *     axisX: {
3297 |    *       labelInterpolationFnc: function(value) {
3298 |    *         // Will return M, T, W etc. on small screens
3299 |    *         return value[0];
3300 |    *       }
3301 |    *     }
3302 |    *   }]
3303 |    * ];
3304 |    *
3305 |    * new Chartist.Line('.ct-chart', data, null, responsiveOptions);
3306 |    *
3307 |    */
3308 |   function Line(query, data, options, responsiveOptions) {
3309 |     Chartist.Line.super.constructor.call(this,
3310 |       query,
3311 |       data,
3312 |       defaultOptions,
3313 |       Chartist.extend({}, defaultOptions, options),
3314 |       responsiveOptions);
3315 |   }
3316 | 
3317 |   // Creating line chart type in Chartist namespace
3318 |   Chartist.Line = Chartist.Base.extend({
3319 |     constructor: Line,
3320 |     createChart: createChart
3321 |   });
3322 | 
3323 | }(window, document, Chartist));
3324 | ;/**
3325 |  * The bar chart module of Chartist that can be used to draw unipolar or bipolar bar and grouped bar charts.
3326 |  *
3327 |  * @module Chartist.Bar
3328 |  */
3329 | /* global Chartist */
3330 | (function(window, document, Chartist){
3331 |   'use strict';
3332 | 
3333 |   /**
3334 |    * Default options in bar charts. Expand the code view to see a detailed list of options with comments.
3335 |    *
3336 |    * @memberof Chartist.Bar
3337 |    */
3338 |   var defaultOptions = {
3339 |     // Options for X-Axis
3340 |     axisX: {
3341 |       // The offset of the chart drawing area to the border of the container
3342 |       offset: 30,
3343 |       // Position where labels are placed. Can be set to `start` or `end` where `start` is equivalent to left or top on vertical axis and `end` is equivalent to right or bottom on horizontal axis.
3344 |       position: 'end',
3345 |       // Allows you to correct label positioning on this axis by positive or negative x and y offset.
3346 |       labelOffset: {
3347 |         x: 0,
3348 |         y: 0
3349 |       },
3350 |       // If labels should be shown or not
3351 |       showLabel: true,
3352 |       // If the axis grid should be drawn or not
3353 |       showGrid: true,
3354 |       // Interpolation function that allows you to intercept the value from the axis label
3355 |       labelInterpolationFnc: Chartist.noop,
3356 |       // This value specifies the minimum width in pixel of the scale steps
3357 |       scaleMinSpace: 30,
3358 |       // Use only integer values (whole numbers) for the scale steps
3359 |       onlyInteger: false
3360 |     },
3361 |     // Options for Y-Axis
3362 |     axisY: {
3363 |       // The offset of the chart drawing area to the border of the container
3364 |       offset: 40,
3365 |       // Position where labels are placed. Can be set to `start` or `end` where `start` is equivalent to left or top on vertical axis and `end` is equivalent to right or bottom on horizontal axis.
3366 |       position: 'start',
3367 |       // Allows you to correct label positioning on this axis by positive or negative x and y offset.
3368 |       labelOffset: {
3369 |         x: 0,
3370 |         y: 0
3371 |       },
3372 |       // If labels should be shown or not
3373 |       showLabel: true,
3374 |       // If the axis grid should be drawn or not
3375 |       showGrid: true,
3376 |       // Interpolation function that allows you to intercept the value from the axis label
3377 |       labelInterpolationFnc: Chartist.noop,
3378 |       // This value specifies the minimum height in pixel of the scale steps
3379 |       scaleMinSpace: 20,
3380 |       // Use only integer values (whole numbers) for the scale steps
3381 |       onlyInteger: false
3382 |     },
3383 |     // Specify a fixed width for the chart as a string (i.e. '100px' or '50%')
3384 |     width: undefined,
3385 |     // Specify a fixed height for the chart as a string (i.e. '100px' or '50%')
3386 |     height: undefined,
3387 |     // Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value
3388 |     high: undefined,
3389 |     // Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value
3390 |     low: undefined,
3391 |     // Use only integer values (whole numbers) for the scale steps
3392 |     onlyInteger: false,
3393 |     // Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5}
3394 |     chartPadding: {
3395 |       top: 15,
3396 |       right: 15,
3397 |       bottom: 5,
3398 |       left: 10
3399 |     },
3400 |     // Specify the distance in pixel of bars in a group
3401 |     seriesBarDistance: 15,
3402 |     // If set to true this property will cause the series bars to be stacked and form a total for each series point. This will also influence the y-axis and the overall bounds of the chart. In stacked mode the seriesBarDistance property will have no effect.
3403 |     stackBars: false,
3404 |     // Inverts the axes of the bar chart in order to draw a horizontal bar chart. Be aware that you also need to invert your axis settings as the Y Axis will now display the labels and the X Axis the values.
3405 |     horizontalBars: false,
3406 |     // If set to true then each bar will represent a series and the data array is expected to be a one dimensional array of data values rather than a series array of series. This is useful if the bar chart should represent a profile rather than some data over time.
3407 |     distributeSeries: false,
3408 |     // If true the whole data is reversed including labels, the series order as well as the whole series data arrays.
3409 |     reverseData: false,
3410 |     // Override the class names that get used to generate the SVG structure of the chart
3411 |     classNames: {
3412 |       chart: 'ct-chart-bar',
3413 |       horizontalBars: 'ct-horizontal-bars',
3414 |       label: 'ct-label',
3415 |       labelGroup: 'ct-labels',
3416 |       series: 'ct-series',
3417 |       bar: 'ct-bar',
3418 |       grid: 'ct-grid',
3419 |       gridGroup: 'ct-grids',
3420 |       vertical: 'ct-vertical',
3421 |       horizontal: 'ct-horizontal',
3422 |       start: 'ct-start',
3423 |       end: 'ct-end'
3424 |     }
3425 |   };
3426 | 
3427 |   /**
3428 |    * Creates a new chart
3429 |    *
3430 |    */
3431 |   function createChart(options) {
3432 |     var data = {
3433 |       raw: this.data,
3434 |       normalized: options.distributeSeries ? Chartist.getDataArray(this.data, options.reverseData, options.horizontalBars ? 'x' : 'y').map(function(value) {
3435 |         return [value];
3436 |       }) : Chartist.getDataArray(this.data, options.reverseData, options.horizontalBars ? 'x' : 'y')
3437 |     };
3438 | 
3439 |     var highLow;
3440 | 
3441 |     // Create new svg element
3442 |     this.svg = Chartist.createSvg(
3443 |       this.container,
3444 |       options.width,
3445 |       options.height,
3446 |       options.classNames.chart + (options.horizontalBars ? ' ' + options.classNames.horizontalBars : '')
3447 |     );
3448 | 
3449 |     // Drawing groups in correct order
3450 |     var gridGroup = this.svg.elem('g').addClass(options.classNames.gridGroup);
3451 |     var seriesGroup = this.svg.elem('g');
3452 |     var labelGroup = this.svg.elem('g').addClass(options.classNames.labelGroup);
3453 | 
3454 |     if(options.stackBars) {
3455 |       // If stacked bars we need to calculate the high low from stacked values from each series
3456 |       var serialSums = Chartist.serialMap(data.normalized, function serialSums() {
3457 |         return Array.prototype.slice.call(arguments).map(function(value) {
3458 |           return value;
3459 |         }).reduce(function(prev, curr) {
3460 |           return {
3461 |             x: prev.x + curr.x || 0,
3462 |             y: prev.y + curr.y || 0
3463 |           };
3464 |         }, {x: 0, y: 0});
3465 |       });
3466 | 
3467 |       highLow = Chartist.getHighLow([serialSums], Chartist.extend({}, options, {
3468 |         referenceValue: 0
3469 |       }), options.horizontalBars ? 'x' : 'y');
3470 |     } else {
3471 |       highLow = Chartist.getHighLow(data.normalized, Chartist.extend({}, options, {
3472 |         referenceValue: 0
3473 |       }), options.horizontalBars ? 'x' : 'y');
3474 |     }
3475 |     // Overrides of high / low from settings
3476 |     highLow.high = +options.high || (options.high === 0 ? 0 : highLow.high);
3477 |     highLow.low = +options.low || (options.low === 0 ? 0 : highLow.low);
3478 | 
3479 |     var chartRect = Chartist.createChartRect(this.svg, options, defaultOptions.padding);
3480 | 
3481 |     var valueAxis,
3482 |       labelAxisTicks,
3483 |       labelAxis,
3484 |       axisX,
3485 |       axisY;
3486 | 
3487 |     // We need to set step count based on some options combinations
3488 |     if(options.distributeSeries && options.stackBars) {
3489 |       // If distributed series are enabled and bars need to be stacked, we'll only have one bar and therefore should
3490 |       // use only the first label for the step axis
3491 |       labelAxisTicks = data.raw.labels.slice(0, 1);
3492 |     } else {
3493 |       // If distributed series are enabled but stacked bars aren't, we should use the series labels
3494 |       // If we are drawing a regular bar chart with two dimensional series data, we just use the labels array
3495 |       // as the bars are normalized
3496 |       labelAxisTicks = data.raw.labels;
3497 |     }
3498 | 
3499 |     // Set labelAxis and valueAxis based on the horizontalBars setting. This setting will flip the axes if necessary.
3500 |     if(options.horizontalBars) {
3501 |       if(options.axisX.type === undefined) {
3502 |         valueAxis = axisX = new Chartist.AutoScaleAxis(Chartist.Axis.units.x, data, chartRect, Chartist.extend({}, options.axisX, {
3503 |           highLow: highLow,
3504 |           referenceValue: 0
3505 |         }));
3506 |       } else {
3507 |         valueAxis = axisX = options.axisX.type.call(Chartist, Chartist.Axis.units.x, data, chartRect, Chartist.extend({}, options.axisX, {
3508 |           highLow: highLow,
3509 |           referenceValue: 0
3510 |         }));
3511 |       }
3512 | 
3513 |       if(options.axisY.type === undefined) {
3514 |         labelAxis = axisY = new Chartist.StepAxis(Chartist.Axis.units.y, data, chartRect, {
3515 |           ticks: labelAxisTicks
3516 |         });
3517 |       } else {
3518 |         labelAxis = axisY = options.axisY.type.call(Chartist, Chartist.Axis.units.y, data, chartRect, options.axisY);
3519 |       }
3520 |     } else {
3521 |       if(options.axisX.type === undefined) {
3522 |         labelAxis = axisX = new Chartist.StepAxis(Chartist.Axis.units.x, data, chartRect, {
3523 |           ticks: labelAxisTicks
3524 |         });
3525 |       } else {
3526 |         labelAxis = axisX = options.axisX.type.call(Chartist, Chartist.Axis.units.x, data, chartRect, options.axisX);
3527 |       }
3528 | 
3529 |       if(options.axisY.type === undefined) {
3530 |         valueAxis = axisY = new Chartist.AutoScaleAxis(Chartist.Axis.units.y, data, chartRect, Chartist.extend({}, options.axisY, {
3531 |           highLow: highLow,
3532 |           referenceValue: 0
3533 |         }));
3534 |       } else {
3535 |         valueAxis = axisY = options.axisY.type.call(Chartist, Chartist.Axis.units.y, data, chartRect, Chartist.extend({}, options.axisY, {
3536 |           highLow: highLow,
3537 |           referenceValue: 0
3538 |         }));
3539 |       }
3540 |     }
3541 | 
3542 |     // Projected 0 point
3543 |     var zeroPoint = options.horizontalBars ? (chartRect.x1 + valueAxis.projectValue(0)) : (chartRect.y1 - valueAxis.projectValue(0));
3544 |     // Used to track the screen coordinates of stacked bars
3545 |     var stackedBarValues = [];
3546 | 
3547 |     labelAxis.createGridAndLabels(gridGroup, labelGroup, this.supportsForeignObject, options, this.eventEmitter);
3548 |     valueAxis.createGridAndLabels(gridGroup, labelGroup, this.supportsForeignObject, options, this.eventEmitter);
3549 | 
3550 |     // Draw the series
3551 |     data.raw.series.forEach(function(series, seriesIndex) {
3552 |       // Calculating bi-polar value of index for seriesOffset. For i = 0..4 biPol will be -1.5, -0.5, 0.5, 1.5 etc.
3553 |       var biPol = seriesIndex - (data.raw.series.length - 1) / 2;
3554 |       // Half of the period width between vertical grid lines used to position bars
3555 |       var periodHalfLength;
3556 |       // Current series SVG element
3557 |       var seriesElement;
3558 | 
3559 |       // We need to set periodHalfLength based on some options combinations
3560 |       if(options.distributeSeries && !options.stackBars) {
3561 |         // If distributed series are enabled but stacked bars aren't, we need to use the length of the normaizedData array
3562 |         // which is the series count and divide by 2
3563 |         periodHalfLength = labelAxis.axisLength / data.normalized.length / 2;
3564 |       } else if(options.distributeSeries && options.stackBars) {
3565 |         // If distributed series and stacked bars are enabled we'll only get one bar so we should just divide the axis
3566 |         // length by 2
3567 |         periodHalfLength = labelAxis.axisLength / 2;
3568 |       } else {
3569 |         // On regular bar charts we should just use the series length
3570 |         periodHalfLength = labelAxis.axisLength / data.normalized[seriesIndex].length / 2;
3571 |       }
3572 | 
3573 |       // Adding the series group to the series element
3574 |       seriesElement = seriesGroup.elem('g');
3575 | 
3576 |       // Write attributes to series group element. If series name or meta is undefined the attributes will not be written
3577 |       seriesElement.attr({
3578 |         'series-name': series.name,
3579 |         'meta': Chartist.serialize(series.meta)
3580 |       }, Chartist.xmlNs.uri);
3581 | 
3582 |       // Use series class from series data or if not set generate one
3583 |       seriesElement.addClass([
3584 |         options.classNames.series,
3585 |         (series.className || options.classNames.series + '-' + Chartist.alphaNumerate(seriesIndex))
3586 |       ].join(' '));
3587 | 
3588 |       data.normalized[seriesIndex].forEach(function(value, valueIndex) {
3589 |         var projected,
3590 |           bar,
3591 |           previousStack,
3592 |           labelAxisValueIndex;
3593 | 
3594 |         // We need to set labelAxisValueIndex based on some options combinations
3595 |         if(options.distributeSeries && !options.stackBars) {
3596 |           // If distributed series are enabled but stacked bars aren't, we can use the seriesIndex for later projection
3597 |           // on the step axis for label positioning
3598 |           labelAxisValueIndex = seriesIndex;
3599 |         } else if(options.distributeSeries && options.stackBars) {
3600 |           // If distributed series and stacked bars are enabled, we will only get one bar and therefore always use
3601 |           // 0 for projection on the label step axis
3602 |           labelAxisValueIndex = 0;
3603 |         } else {
3604 |           // On regular bar charts we just use the value index to project on the label step axis
3605 |           labelAxisValueIndex = valueIndex;
3606 |         }
3607 | 
3608 |         // We need to transform coordinates differently based on the chart layout
3609 |         if(options.horizontalBars) {
3610 |           projected = {
3611 |             x: chartRect.x1 + valueAxis.projectValue(value && value.x ? value.x : 0, valueIndex, data.normalized[seriesIndex]),
3612 |             y: chartRect.y1 - labelAxis.projectValue(value && value.y ? value.y : 0, labelAxisValueIndex, data.normalized[seriesIndex])
3613 |           };
3614 |         } else {
3615 |           projected = {
3616 |             x: chartRect.x1 + labelAxis.projectValue(value && value.x ? value.x : 0, labelAxisValueIndex, data.normalized[seriesIndex]),
3617 |             y: chartRect.y1 - valueAxis.projectValue(value && value.y ? value.y : 0, valueIndex, data.normalized[seriesIndex])
3618 |           }
3619 |         }
3620 | 
3621 |         // If the label axis is a step based axis we will offset the bar into the middle of between two steps using
3622 |         // the periodHalfLength value. Also we do arrange the different series so that they align up to each other using
3623 |         // the seriesBarDistance. If we don't have a step axis, the bar positions can be chosen freely so we should not
3624 |         // add any automated positioning.
3625 |         if(labelAxis instanceof Chartist.StepAxis) {
3626 |           // Offset to center bar between grid lines, but only if the step axis is not stretched
3627 |           if(!labelAxis.options.stretch) {
3628 |             projected[labelAxis.units.pos] += periodHalfLength * (options.horizontalBars ? -1 : 1);
3629 |           }
3630 |           // Using bi-polar offset for multiple series if no stacked bars or series distribution is used
3631 |           projected[labelAxis.units.pos] += (options.stackBars || options.distributeSeries) ? 0 : biPol * options.seriesBarDistance * (options.horizontalBars ? -1 : 1);
3632 |         }
3633 | 
3634 |         // Enter value in stacked bar values used to remember previous screen value for stacking up bars
3635 |         previousStack = stackedBarValues[valueIndex] || zeroPoint;
3636 |         stackedBarValues[valueIndex] = previousStack - (zeroPoint - projected[labelAxis.counterUnits.pos]);
3637 | 
3638 |         // Skip if value is undefined
3639 |         if(value === undefined) {
3640 |           return;
3641 |         }
3642 | 
3643 |         var positions = {};
3644 |         positions[labelAxis.units.pos + '1'] = projected[labelAxis.units.pos];
3645 |         positions[labelAxis.units.pos + '2'] = projected[labelAxis.units.pos];
3646 |         // If bars are stacked we use the stackedBarValues reference and otherwise base all bars off the zero line
3647 |         positions[labelAxis.counterUnits.pos + '1'] = options.stackBars ? previousStack : zeroPoint;
3648 |         positions[labelAxis.counterUnits.pos + '2'] = options.stackBars ? stackedBarValues[valueIndex] : projected[labelAxis.counterUnits.pos];
3649 | 
3650 |         // Limit x and y so that they are within the chart rect
3651 |         positions.x1 = Math.min(Math.max(positions.x1, chartRect.x1), chartRect.x2);
3652 |         positions.x2 = Math.min(Math.max(positions.x2, chartRect.x1), chartRect.x2);
3653 |         positions.y1 = Math.min(Math.max(positions.y1, chartRect.y2), chartRect.y1);
3654 |         positions.y2 = Math.min(Math.max(positions.y2, chartRect.y2), chartRect.y1);
3655 | 
3656 |         // Create bar element
3657 |         bar = seriesElement.elem('line', positions, options.classNames.bar).attr({
3658 |           'value': [value.x, value.y].filter(function(v) {
3659 |             return v;
3660 |           }).join(','),
3661 |           'meta': Chartist.getMetaData(series, valueIndex)
3662 |         }, Chartist.xmlNs.uri);
3663 | 
3664 |         this.eventEmitter.emit('draw', Chartist.extend({
3665 |           type: 'bar',
3666 |           value: value,
3667 |           index: valueIndex,
3668 |           meta: Chartist.getMetaData(series, valueIndex),
3669 |           series: series,
3670 |           seriesIndex: seriesIndex,
3671 |           axisX: axisX,
3672 |           axisY: axisY,
3673 |           chartRect: chartRect,
3674 |           group: seriesElement,
3675 |           element: bar
3676 |         }, positions));
3677 |       }.bind(this));
3678 |     }.bind(this));
3679 | 
3680 |     this.eventEmitter.emit('created', {
3681 |       bounds: valueAxis.bounds,
3682 |       chartRect: chartRect,
3683 |       axisX: axisX,
3684 |       axisY: axisY,
3685 |       svg: this.svg,
3686 |       options: options
3687 |     });
3688 |   }
3689 | 
3690 |   /**
3691 |    * This method creates a new bar chart and returns API object that you can use for later changes.
3692 |    *
3693 |    * @memberof Chartist.Bar
3694 |    * @param {String|Node} query A selector query string or directly a DOM element
3695 |    * @param {Object} data The data object that needs to consist of a labels and a series array
3696 |    * @param {Object} [options] The options object with options that override the default options. Check the examples for a detailed list.
3697 |    * @param {Array} [responsiveOptions] Specify an array of responsive option arrays which are a media query and options object pair => [[mediaQueryString, optionsObject],[more...]]
3698 |    * @return {Object} An object which exposes the API for the created chart
3699 |    *
3700 |    * @example
3701 |    * // Create a simple bar chart
3702 |    * var data = {
3703 |    *   labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
3704 |    *   series: [
3705 |    *     [5, 2, 4, 2, 0]
3706 |    *   ]
3707 |    * };
3708 |    *
3709 |    * // In the global name space Chartist we call the Bar function to initialize a bar chart. As a first parameter we pass in a selector where we would like to get our chart created and as a second parameter we pass our data object.
3710 |    * new Chartist.Bar('.ct-chart', data);
3711 |    *
3712 |    * @example
3713 |    * // This example creates a bipolar grouped bar chart where the boundaries are limitted to -10 and 10
3714 |    * new Chartist.Bar('.ct-chart', {
3715 |    *   labels: [1, 2, 3, 4, 5, 6, 7],
3716 |    *   series: [
3717 |    *     [1, 3, 2, -5, -3, 1, -6],
3718 |    *     [-5, -2, -4, -1, 2, -3, 1]
3719 |    *   ]
3720 |    * }, {
3721 |    *   seriesBarDistance: 12,
3722 |    *   low: -10,
3723 |    *   high: 10
3724 |    * });
3725 |    *
3726 |    */
3727 |   function Bar(query, data, options, responsiveOptions) {
3728 |     Chartist.Bar.super.constructor.call(this,
3729 |       query,
3730 |       data,
3731 |       defaultOptions,
3732 |       Chartist.extend({}, defaultOptions, options),
3733 |       responsiveOptions);
3734 |   }
3735 | 
3736 |   // Creating bar chart type in Chartist namespace
3737 |   Chartist.Bar = Chartist.Base.extend({
3738 |     constructor: Bar,
3739 |     createChart: createChart
3740 |   });
3741 | 
3742 | }(window, document, Chartist));
3743 | ;/**
3744 |  * The pie chart module of Chartist that can be used to draw pie, donut or gauge charts
3745 |  *
3746 |  * @module Chartist.Pie
3747 |  */
3748 | /* global Chartist */
3749 | (function(window, document, Chartist) {
3750 |   'use strict';
3751 | 
3752 |   /**
3753 |    * Default options in line charts. Expand the code view to see a detailed list of options with comments.
3754 |    *
3755 |    * @memberof Chartist.Pie
3756 |    */
3757 |   var defaultOptions = {
3758 |     // Specify a fixed width for the chart as a string (i.e. '100px' or '50%')
3759 |     width: undefined,
3760 |     // Specify a fixed height for the chart as a string (i.e. '100px' or '50%')
3761 |     height: undefined,
3762 |     // Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5}
3763 |     chartPadding: 5,
3764 |     // Override the class names that are used to generate the SVG structure of the chart
3765 |     classNames: {
3766 |       chartPie: 'ct-chart-pie',
3767 |       chartDonut: 'ct-chart-donut',
3768 |       series: 'ct-series',
3769 |       slicePie: 'ct-slice-pie',
3770 |       sliceDonut: 'ct-slice-donut',
3771 |       label: 'ct-label'
3772 |     },
3773 |     // The start angle of the pie chart in degrees where 0 points north. A higher value offsets the start angle clockwise.
3774 |     startAngle: 0,
3775 |     // An optional total you can specify. By specifying a total value, the sum of the values in the series must be this total in order to draw a full pie. You can use this parameter to draw only parts of a pie or gauge charts.
3776 |     total: undefined,
3777 |     // If specified the donut CSS classes will be used and strokes will be drawn instead of pie slices.
3778 |     donut: false,
3779 |     // Specify the donut stroke width, currently done in javascript for convenience. May move to CSS styles in the future.
3780 |     donutWidth: 60,
3781 |     // If a label should be shown or not
3782 |     showLabel: true,
3783 |     // Label position offset from the standard position which is half distance of the radius. This value can be either positive or negative. Positive values will position the label away from the center.
3784 |     labelOffset: 0,
3785 |     // This option can be set to 'inside', 'outside' or 'center'. Positioned with 'inside' the labels will be placed on half the distance of the radius to the border of the Pie by respecting the 'labelOffset'. The 'outside' option will place the labels at the border of the pie and 'center' will place the labels in the absolute center point of the chart. The 'center' option only makes sense in conjunction with the 'labelOffset' option.
3786 |     labelPosition: 'inside',
3787 |     // An interpolation function for the label value
3788 |     labelInterpolationFnc: Chartist.noop,
3789 |     // Label direction can be 'neutral', 'explode' or 'implode'. The labels anchor will be positioned based on those settings as well as the fact if the labels are on the right or left side of the center of the chart. Usually explode is useful when labels are positioned far away from the center.
3790 |     labelDirection: 'neutral',
3791 |     // If true the whole data is reversed including labels, the series order as well as the whole series data arrays.
3792 |     reverseData: false
3793 |   };
3794 | 
3795 |   /**
3796 |    * Determines SVG anchor position based on direction and center parameter
3797 |    *
3798 |    * @param center
3799 |    * @param label
3800 |    * @param direction
3801 |    * @return {string}
3802 |    */
3803 |   function determineAnchorPosition(center, label, direction) {
3804 |     var toTheRight = label.x > center.x;
3805 | 
3806 |     if(toTheRight && direction === 'explode' ||
3807 |       !toTheRight && direction === 'implode') {
3808 |       return 'start';
3809 |     } else if(toTheRight && direction === 'implode' ||
3810 |       !toTheRight && direction === 'explode') {
3811 |       return 'end';
3812 |     } else {
3813 |       return 'middle';
3814 |     }
3815 |   }
3816 | 
3817 |   /**
3818 |    * Creates the pie chart
3819 |    *
3820 |    * @param options
3821 |    */
3822 |   function createChart(options) {
3823 |     var seriesGroups = [],
3824 |       labelsGroup,
3825 |       chartRect,
3826 |       radius,
3827 |       labelRadius,
3828 |       totalDataSum,
3829 |       startAngle = options.startAngle,
3830 |       dataArray = Chartist.getDataArray(this.data, options.reverseData);
3831 | 
3832 |     // Create SVG.js draw
3833 |     this.svg = Chartist.createSvg(this.container, options.width, options.height,options.donut ? options.classNames.chartDonut : options.classNames.chartPie);
3834 |     // Calculate charting rect
3835 |     chartRect = Chartist.createChartRect(this.svg, options, defaultOptions.padding);
3836 |     // Get biggest circle radius possible within chartRect
3837 |     radius = Math.min(chartRect.width() / 2, chartRect.height() / 2);
3838 |     // Calculate total of all series to get reference value or use total reference from optional options
3839 |     totalDataSum = options.total || dataArray.reduce(function(previousValue, currentValue) {
3840 |       return previousValue + currentValue;
3841 |     }, 0);
3842 | 
3843 |     // If this is a donut chart we need to adjust our radius to enable strokes to be drawn inside
3844 |     // Unfortunately this is not possible with the current SVG Spec
3845 |     // See this proposal for more details: http://lists.w3.org/Archives/Public/www-svg/2003Oct/0000.html
3846 |     radius -= options.donut ? options.donutWidth / 2  : 0;
3847 | 
3848 |     // If labelPosition is set to `outside` or a donut chart is drawn then the label position is at the radius,
3849 |     // if regular pie chart it's half of the radius
3850 |     if(options.labelPosition === 'outside' || options.donut) {
3851 |       labelRadius = radius;
3852 |     } else if(options.labelPosition === 'center') {
3853 |       // If labelPosition is center we start with 0 and will later wait for the labelOffset
3854 |       labelRadius = 0;
3855 |     } else {
3856 |       // Default option is 'inside' where we use half the radius so the label will be placed in the center of the pie
3857 |       // slice
3858 |       labelRadius = radius / 2;
3859 |     }
3860 |     // Add the offset to the labelRadius where a negative offset means closed to the center of the chart
3861 |     labelRadius += options.labelOffset;
3862 | 
3863 |     // Calculate end angle based on total sum and current data value and offset with padding
3864 |     var center = {
3865 |       x: chartRect.x1 + chartRect.width() / 2,
3866 |       y: chartRect.y2 + chartRect.height() / 2
3867 |     };
3868 | 
3869 |     // Check if there is only one non-zero value in the series array.
3870 |     var hasSingleValInSeries = this.data.series.filter(function(val) {
3871 |       return val.hasOwnProperty('value') ? val.value !== 0 : val !== 0;
3872 |     }).length === 1;
3873 | 
3874 |     //if we need to show labels we create the label group now
3875 |     if(options.showLabel) {
3876 |       labelsGroup = this.svg.elem('g', null, null, true);
3877 |     }
3878 | 
3879 |     // Draw the series
3880 |     // initialize series groups
3881 |     for (var i = 0; i < this.data.series.length; i++) {
3882 |       var series = this.data.series[i];
3883 |       seriesGroups[i] = this.svg.elem('g', null, null, true);
3884 | 
3885 |       // If the series is an object and contains a name or meta data we add a custom attribute
3886 |       seriesGroups[i].attr({
3887 |         'series-name': series.name
3888 |       }, Chartist.xmlNs.uri);
3889 | 
3890 |       // Use series class from series data or if not set generate one
3891 |       seriesGroups[i].addClass([
3892 |         options.classNames.series,
3893 |         (series.className || options.classNames.series + '-' + Chartist.alphaNumerate(i))
3894 |       ].join(' '));
3895 | 
3896 |       var endAngle = startAngle + dataArray[i] / totalDataSum * 360;
3897 |       // If we need to draw the arc for all 360 degrees we need to add a hack where we close the circle
3898 |       // with Z and use 359.99 degrees
3899 |       if(endAngle - startAngle === 360) {
3900 |         endAngle -= 0.01;
3901 |       }
3902 | 
3903 |       var start = Chartist.polarToCartesian(center.x, center.y, radius, startAngle - (i === 0 || hasSingleValInSeries ? 0 : 0.2)),
3904 |         end = Chartist.polarToCartesian(center.x, center.y, radius, endAngle);
3905 | 
3906 |       // Create a new path element for the pie chart. If this isn't a donut chart we should close the path for a correct stroke
3907 |       var path = new Chartist.Svg.Path(!options.donut)
3908 |         .move(end.x, end.y)
3909 |         .arc(radius, radius, 0, endAngle - startAngle > 180, 0, start.x, start.y);
3910 | 
3911 |       // If regular pie chart (no donut) we add a line to the center of the circle for completing the pie
3912 |       if(!options.donut) {
3913 |         path.line(center.x, center.y);
3914 |       }
3915 | 
3916 |       // Create the SVG path
3917 |       // If this is a donut chart we add the donut class, otherwise just a regular slice
3918 |       var pathElement = seriesGroups[i].elem('path', {
3919 |         d: path.stringify()
3920 |       }, options.donut ? options.classNames.sliceDonut : options.classNames.slicePie);
3921 | 
3922 |       // Adding the pie series value to the path
3923 |       pathElement.attr({
3924 |         'value': dataArray[i],
3925 |         'meta': Chartist.serialize(series.meta)
3926 |       }, Chartist.xmlNs.uri);
3927 | 
3928 |       // If this is a donut, we add the stroke-width as style attribute
3929 |       if(options.donut) {
3930 |         pathElement.attr({
3931 |           'style': 'stroke-width: ' + (+options.donutWidth) + 'px'
3932 |         });
3933 |       }
3934 | 
3935 |       // Fire off draw event
3936 |       this.eventEmitter.emit('draw', {
3937 |         type: 'slice',
3938 |         value: dataArray[i],
3939 |         totalDataSum: totalDataSum,
3940 |         index: i,
3941 |         meta: series.meta,
3942 |         series: series,
3943 |         group: seriesGroups[i],
3944 |         element: pathElement,
3945 |         path: path.clone(),
3946 |         center: center,
3947 |         radius: radius,
3948 |         startAngle: startAngle,
3949 |         endAngle: endAngle
3950 |       });
3951 | 
3952 |       // If we need to show labels we need to add the label for this slice now
3953 |       if(options.showLabel) {
3954 |         // Position at the labelRadius distance from center and between start and end angle
3955 |         var labelPosition = Chartist.polarToCartesian(center.x, center.y, labelRadius, startAngle + (endAngle - startAngle) / 2),
3956 |           interpolatedValue = options.labelInterpolationFnc(this.data.labels ? this.data.labels[i] : dataArray[i], i);
3957 | 
3958 |         if(interpolatedValue || interpolatedValue === 0) {
3959 |           var labelElement = labelsGroup.elem('text', {
3960 |             dx: labelPosition.x,
3961 |             dy: labelPosition.y,
3962 |             'text-anchor': determineAnchorPosition(center, labelPosition, options.labelDirection)
3963 |           }, options.classNames.label).text('' + interpolatedValue);
3964 | 
3965 |           // Fire off draw event
3966 |           this.eventEmitter.emit('draw', {
3967 |             type: 'label',
3968 |             index: i,
3969 |             group: labelsGroup,
3970 |             element: labelElement,
3971 |             text: '' + interpolatedValue,
3972 |             x: labelPosition.x,
3973 |             y: labelPosition.y
3974 |           });
3975 |         }
3976 |       }
3977 | 
3978 |       // Set next startAngle to current endAngle. Use slight offset so there are no transparent hairline issues
3979 |       // (except for last slice)
3980 |       startAngle = endAngle;
3981 |     }
3982 | 
3983 |     this.eventEmitter.emit('created', {
3984 |       chartRect: chartRect,
3985 |       svg: this.svg,
3986 |       options: options
3987 |     });
3988 |   }
3989 | 
3990 |   /**
3991 |    * This method creates a new pie chart and returns an object that can be used to redraw the chart.
3992 |    *
3993 |    * @memberof Chartist.Pie
3994 |    * @param {String|Node} query A selector query string or directly a DOM element
3995 |    * @param {Object} data The data object in the pie chart needs to have a series property with a one dimensional data array. The values will be normalized against each other and don't necessarily need to be in percentage. The series property can also be an array of value objects that contain a value property and a className property to override the CSS class name for the series group.
3996 |    * @param {Object} [options] The options object with options that override the default options. Check the examples for a detailed list.
3997 |    * @param {Array} [responsiveOptions] Specify an array of responsive option arrays which are a media query and options object pair => [[mediaQueryString, optionsObject],[more...]]
3998 |    * @return {Object} An object with a version and an update method to manually redraw the chart
3999 |    *
4000 |    * @example
4001 |    * // Simple pie chart example with four series
4002 |    * new Chartist.Pie('.ct-chart', {
4003 |    *   series: [10, 2, 4, 3]
4004 |    * });
4005 |    *
4006 |    * @example
4007 |    * // Drawing a donut chart
4008 |    * new Chartist.Pie('.ct-chart', {
4009 |    *   series: [10, 2, 4, 3]
4010 |    * }, {
4011 |    *   donut: true
4012 |    * });
4013 |    *
4014 |    * @example
4015 |    * // Using donut, startAngle and total to draw a gauge chart
4016 |    * new Chartist.Pie('.ct-chart', {
4017 |    *   series: [20, 10, 30, 40]
4018 |    * }, {
4019 |    *   donut: true,
4020 |    *   donutWidth: 20,
4021 |    *   startAngle: 270,
4022 |    *   total: 200
4023 |    * });
4024 |    *
4025 |    * @example
4026 |    * // Drawing a pie chart with padding and labels that are outside the pie
4027 |    * new Chartist.Pie('.ct-chart', {
4028 |    *   series: [20, 10, 30, 40]
4029 |    * }, {
4030 |    *   chartPadding: 30,
4031 |    *   labelOffset: 50,
4032 |    *   labelDirection: 'explode'
4033 |    * });
4034 |    *
4035 |    * @example
4036 |    * // Overriding the class names for individual series as well as a name and meta data.
4037 |    * // The name will be written as ct:series-name attribute and the meta data will be serialized and written
4038 |    * // to a ct:meta attribute.
4039 |    * new Chartist.Pie('.ct-chart', {
4040 |    *   series: [{
4041 |    *     value: 20,
4042 |    *     name: 'Series 1',
4043 |    *     className: 'my-custom-class-one',
4044 |    *     meta: 'Meta One'
4045 |    *   }, {
4046 |    *     value: 10,
4047 |    *     name: 'Series 2',
4048 |    *     className: 'my-custom-class-two',
4049 |    *     meta: 'Meta Two'
4050 |    *   }, {
4051 |    *     value: 70,
4052 |    *     name: 'Series 3',
4053 |    *     className: 'my-custom-class-three',
4054 |    *     meta: 'Meta Three'
4055 |    *   }]
4056 |    * });
4057 |    */
4058 |   function Pie(query, data, options, responsiveOptions) {
4059 |     Chartist.Pie.super.constructor.call(this,
4060 |       query,
4061 |       data,
4062 |       defaultOptions,
4063 |       Chartist.extend({}, defaultOptions, options),
4064 |       responsiveOptions);
4065 |   }
4066 | 
4067 |   // Creating pie chart type in Chartist namespace
4068 |   Chartist.Pie = Chartist.Base.extend({
4069 |     constructor: Pie,
4070 |     createChart: createChart,
4071 |     determineAnchorPosition: determineAnchorPosition
4072 |   });
4073 | 
4074 | }(window, document, Chartist));
4075 | 
4076 | return Chartist;
4077 | 
4078 | }));
4079 | 


--------------------------------------------------------------------------------