- Added axes to all events where they are available in context to provide better API convenience when developing plugins\n
- Consider additional parameters of SVG elem when called with DOM node\n
\n
v0.9.3 - 05 Aug 2015\n
--------------------\n
- Added better check for undefined values in bar chart, fixes #400\n
- Fixed issue with SVG feature check within Svg module (Thanks to Markus Gruber !)\n
\n
v0.9.2 - 02 Aug 2015\n
--------------------\n
- Enabled bar charts to use dynamic axes fixes #363, fixes #355\n
- Added axis title plugin to plugins page (Thanks to @alexstanbury !)\n
- Added a label group for Pie charts to prevent occlusion by slices (Thanks to Anthony Jimenez!)\n
- Added better handling for multi values when writing custom attributes, fixes #379\n
\n
v0.9.1 - 24 Jun 2015\n
--------------------\n
- Fixed bug with areaBase narrowing process in area charts, fixes #364\n
- Fixed bug on bar chart where wrong offset was used (axis offset), fixes #347 (Thanks to @amsardesai !)\n
- Fixed bug with namespace attributes that caused duplication of SVG element on updates in old browsers (Thanks to @radist2s !)\n
\n
v0.9.0 - 10 Jun 2015\n
--------------------\n
- Major refactoring of axis and projection code, added possibility to configure axes when creating a chart\n
- Added areaBase to series options override in line chart, fixes #342\n
- Throwing up in infinite loop for edge cases and during development\n
- Documentation: Added documentation for axis configuration and getting started guide for custom axes\n
\n
v0.8.3 - 07 Jun 2015\n
--------------------\n
- Greatly reduced CSS selector complexity and split slice into slice-pie and slice-donut\n
- Added more robust detach mechanism that takes async initialization into account\n
- Added better handling for area drawing with segmented paths, fixes #340\n
- Documentation: Added getting started guide for styling charts\n
\n
v0.8.2 - 02 Jun 2015\n
--------------------\n
- Fixed broken release 0.8.1\n
\n
v0.8.1 - 02 Jun 2015 (BROKEN!)\n
------------------------------\n
- Added new option labelPosition for Pie charts to have better control over label placement, fixes #315\n
- Added default styles for alignment-baseline\n
- Added better support for undefined values in bar charts\n
- Refactored getHighLow to use recursion in order to enable more dynamic array structures and better edge case management\n
- Fixed issue with Chartist.rho that caused endless loop when called with 1, fixes #318\n
\n
v0.8.0 - 10 May 2015\n
--------------------\n
- Added new option to bar charts to allow a series distribution and use a simple one dimensional array for data (#209)\n
- Added option for label placement and refactored label positioning code (#302)\n
- Added option to only use integer numbers in linear scale axis (#77)\n
- Added possibility to add series configuration on line chart to override specific options on series level (#289, #168)\n
- Added functionality to handle holes in line charts (#294)\n
- Added step interpolation for line charts\n
- Added default styles for bar and horizontal bar labels that make more sense (#303)\n
- Added series data and meta information to events (#293)\n
- Changed line chart behavior to draw points from interpolated values (#295)\n
- Removed restriction to SVGElements so Chartist.Svg can be used for HTML DOM elements (#261)\n
- Refactored and simplified axis creation, also includes updated CSS label handling\n
- Refactored getDataArray for simplification and fixed type conversion issue with data arrays for pie charts\n
- Centralized high/low calculations in getHighLow() method and added support for empty charts. Thanks @scthi !\n
- Fixed bug in pie chart where meta was only added when series name was specified\n
- Fixed bug where special condition to check single value should also include object value notation (#265)\n
- Fixed bug with Chartist.extend when null property is extended\n
- Fixed bug with Firefox dying with a DOM exception when calling getBBox() on an invisible node. Thanks @scthi !\n
- Switched from object literal accessor definition to regular function (#278)\n
\n
v0.7.4 - 19 Apr 2015\n
--------------------\n
- Enhanced documentation site (Accessibility plugin, live example eval, fixed path to Sass settings, better HTML example of how to include Chartist, example how to include multiple charts on one page)\n
- Added Arc to Chartist.Svg.Path\n
- Refactored Chartist.Pie to make use of Svg.Path and expose path in events\n
- Closing path of Pie if not a donut for correct strokes\n
- Exposing axis objects in created event\n
- Changed grid event to use axis object instead of string\n
\n
v0.7.3 - 27 Feb 2015\n
--------------------\n
- Fixed bugs in the chart.update method \n
- Fixed rounding precision issues in order of magnitude calculation\n
- Fixed bug in Chartist.extend which caused merge problems from object properties into non-objects\n
- Added possibility to use chartPadding with a padding object that contains top, right, bottom and left properties\n
\n
v0.7.2 - 12 Feb 2015\n
--------------------\n
- Added new line smoothing / interpolation module for configurable line smoothing\n
- Added simple line smoothing. Thanks @danieldiekmeier !\n
- Removed some unused internal code\n
\n
v0.7.1 - 02 Feb 2015\n
--------------------\n
- Bug fix where some files where not included in dist version of Chartist which made v0.7.0 unusable.\n
\n
v0.7.0 - 01 Feb 2015\n
--------------------\n
- This version introduces a new option in the bar charts to draw them horizontally\n
- Underlying changes for axis model that allows flexible value projection and removes code duplication\n
- Added SVG Path API for manipulating SVG paths. This can be used in animations or to transform the output by Chartist further.\n
- The fullWidth and centerBars options were removed from the bar chart\n
- Updating chart after options update enables the use of \'print\' media query in responsive options to have a quick redraw before printing. This only works in Chrome 40 so far\n
- Fixed issues with 0 values in series object data notation\n
\n
v0.6.1 - 23 Jan 2015\n
--------------------\n
- Fixed bug that prevented data events to be captured\n
- Fixed bug with update function called in the same call stack as chart constructor\n
\n
v0.6.0 - 17 Jan 2015\n
--------------------\n
- Added 14 default colors for colored series\n
- Added data event that allows you to transform the data before it gets rendered in Chartist. This is also useful for plugin authors that would like to create plugins which modify data.\n
- Possibility to specify meta data in the data object passed to Chartist that will be written to custom attributes into the DOM.\n
- Possibility to specify options when calling chart.update in order to override the current options with new ones\n
- Fixed some missing entries in the bower ignore section to exclude the documentation site as well as the grunt tasks\n
- Fixed issue when Chartist is initialized in a container that already contains SVG\n
\n
v0.5.0 - 14 Dec 2014\n
--------------------\n
- Added new option for line and bar chart to use full width of the chart area by skipping the last grid line\n
- Added new option for bar chart to create stacked bar charts\n
- All chart update functions now accepts an optional data parameter that allows to update an existing chart with new data\n
- Fix for an error when charts get re-constructed on the same element and in the same call stack\n
\n
v0.4.4 - 11 Dec 2014\n
--------------------\n
- Fixed NS_ERROR_FAILURE error in Firefox and added graceful handling of unsupported SMIL animations (i.e. in foreignObjects)\n
\n
v0.4.3 - 27 Nov 2014\n
--------------------\n
- Updated plugin architecture for convenience reasons and better support for modularization\n
\n
v0.4.2 - 27 Nov 2014\n
--------------------\n
\n
- Included first version of Chartist.js Plugin mechanism\n
- Major refactoring of development stack (thanks @Autarc !)\n
- Removed unused functions in Chartist.Core\n
\n
v0.4.1 - 21 Nov 2014\n
--------------------\n
\n
- Added more functionality to Chartist.Svg: select child elements, parent, root as well as a Svg list wrapper with delegation functions\n
- Fixed bug in strip unit\n
- Added classes to the label and grid gorups\n
- Added this as return value so calls to chart can be chained up easily\n
\n
\n
v0.4.0 - 17 Nov 2014\n
--------------------\n
\n
- Added new animation API for SMIL animations\n
- Added possibility to add event handlers with asterisk that will be triggerd on all events including the event name in the cb function\n
- Added possibility to pass DOM node to SVG constructor so you can wrap existing SVG nodes into a Chartist.Svg element\n
- Fixed svg recycling on re-creation\n
- Fixed resize listener detach that wasn\'t working properly\n
- Refactored Chartist.Svg to use Chartist.Class\n
- Including event when line and area is drawn\n
- Changed default scaleMinSpace to 20 to be more mobile friendly\n
Comments are the only way others and **YOURSELF** know why a particular code was written and why it was written in the\n
way it was. It\'s crucial that you comment your code parts and specially code that is not trivial.\n
\n
Self explaining code is a **MYTH**. There is no such thing as self explaining code. Also there is no such thing as too\n
many comments. There is only too little comments.\n
\n
When you comment code don\'t comment what\'s coded, comment why it was coded this way and comment the thinking behind.\n
Also include links in your comments to open issues, specifications etc.\n
\n
**Not recommended**\n
```\n
var offset = 0;\n
\n
if(includeLabels) {\n
// Add offset of 20\n
offset = 20;\n
}\n
```\n
\n
**Recommended**\n
```\n
var offset = 0;\n
\n
if(includeLabels) {\n
// If the labels are included we need to have a minimum offset of 20 pixels\n
// We need to set it explicitly because of the following bug: http://somebrowservendor.com/issue-tracker/ISSUE-1\n
offset = 20;\n
}\n
```\n
\n
Consider using annotations in your comments that help to structure commends and add meta information. For Javascript\n
use [JSDoc](http://usejsdoc.org/) or [YUIDoc](http://yui.github.io/yuidoc/). You can also use tools to generate\n
documentation from these comments. This is also a great way to encourage developers to write comments. Once comments\n
will be used to generate a living documentation they often start to spend more time for detailed comments.\n
\n
***\n
\n
### Code linting\n
\n
For programming languages with less strictness it\'s important to enforce style rules and formatting guidelines.\n
Writing and following a style guide is a good practice but having an automated process that is enforcing it is even\n
better. Trust is good, control is better.\n
\n
For Javascript we recommend to use JSLint / JSHint. In the repository for this styleguide you can also find a\n
[dotfile for jshint (.jshintrc)](.jshintrc). You can use this file with JSHint to enforce style\n
checking in your Javascript projects.\n
\n
***\n
\n
## HTML style rules\n
\n
***\n
\n
### Document type\n
\n
HTML5 (HTML syntax) is preferred for all HTML documents: `<!DOCTYPE html>`.\n
\n
(It’s recommended to use HTML, as text/html. Do not use XHTML. XHTML, as application/xhtml+xml,\n
lacks both browser and infrastructure support and offers less room for optimization than HTML.)\n
\n
Although fine with HTML, do not close void elements, i.e. write `<br>`, not `<br/>`.\n
\n
***\n
\n
### HTML validity\n
\n
Use valid HTML code unless that is not possible due to otherwise unattainable performance goals regarding file size.\n
\n
Use tools such as the W3C HTML validator to test.\n
\n
Using valid HTML is a measurable baseline quality attribute that contributes to learning about technical requirements\n
and constraints, and that ensures proper HTML usage.\n
\n
**Not recommended**\n
```\n
<title>Test</title>\n
<article>This is only a test.\n
```\n
\n
**Recommended**\n
```\n
<!DOCTYPE html>\n
<metacharset="utf-8">\n
<title>Test</title>\n
<article>This is only a test.</article>\n
```\n
\n
***\n
\n
### Optional Tags\n
\n
The HTML5 specification defines what tags can be omitted in the HTML markup. For readability purpose the raw source\n
file should **NOT** omit optional tags. Omitting optional tags can lead to readability and scannability issues, and\n
therefore should not be used in the raw source files.\n
\n
Omitting tags can lead to significant page size reductions specially on large scale sites. For this purpose you should\n
consider an HTML minification post processing of your raw files for distribution purpose.\n
\n
***\n
\n
### Script loading\n
\n
For performance reasons it\'s important to load scripts asynchronously. A script loaded in the `<head>` like this\n
`<scriptsrc="main.js"></script>` will block the whole DOM parsing until the script has fully loaded and executed. This\n
will delay the page to be displayed until the script has fully loaded. With larger scripts this can have a big impact\n
on user experience.\n
\n
Asynchronous script loading helps to minimize this performance impact. If browser support is only concerned about IE10+\n
the HTML5 async attribute on scripts should be used. This will prevent DOM parser blocking and you can even place your\n
script element into the `<head>` element.\n
\n
If you need to support older browsers it\'s common practice to use script loaders that will make use of dynamic script\n
injection. You should consider [yepnope](http://yepnopejs.com/) or [labjs](http://labjs.com/). The problem with injected\n
scripts though is that [they will not start loading until CSS Object Model is ready](https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/)\n
(shortly after the CSS from the head is loaded). This can also load to delay of your behavior added by these javascript\n
which can again affect the user experience.\n
\n
As a result of the above described behaviors you should always consider the following best practice if you need to\n
support old browsers (IE9-).\n
\n
Add your script element just before the body close tag and add them with a async attribute. This will not load the\n
scripts asynchronously on old browsers but they will only block the DOM parser just before the body close which is not\n
affecting the user experience too much. On modern browsers this will delay the script load until the DOM parser\n
discovers the script element at the end of the body, but they will then asynchronously load the script and don\'t wait\n
for CSSOM to complete before loading (execution will still happen after CSSOM).\n
\n
**Recommended for modern and old browsers**\n
```\n
<html>\n
<head>\n
<linkrel="stylesheet"href="main.css">\n
</head>\n
<body>\n
<!-- body goes here -->\n
\n
<scriptsrc="main.js"async></script>\n
</body>\n
</html>\n
```\n
\n
**Recommended for only modern browsers**\n
```\n
<html>\n
<head>\n
<linkrel="stylesheet"href="main.css">\n
<scriptsrc="main.js"async></script>\n
</head>\n
<body>\n
<!-- body goes here -->\n
</body>\n
</html>\n
```\n
\n
***\n
\n
### Semantics\n
\n
Use elements (sometimes incorrectly called “tags”) for what they have been created for. For example, use heading\n
elements for headings, p elements for paragraphs, a elements for anchors, etc.\n
\n
Using HTML according to its purpose is important for accessibility, reuse, and code efficiency reasons.\n
\n
The following bad / good example should outline some of the major important semantic HTML cases:\n
If you find a bug in the source code or a mistake in the documentation, you can help us by\n
submitting an issue to our [GitHub Repository][github]. Even better you can submit a Pull Request\n
with a fix.\n
\n
## Pre-requisites\n
\n
You will need the following to run a local development enviroment.\n
\n
- Node.js & npm\n
- Bower (`sudo npm install bower -g`)\n
- Grunt (`sudo npm install grunt-cli -g`)\n
- Text editor of your choice\n
\n
\n
## How to Run a Local Distribution\n
\n
1. `cd` into your local copy of the repository.\n
2. Run `npm install` to install dependencies located in `package.json`.\n
3. Run `bower install` to install bower dependencies.\n
5. Run `grunt preview` to start the watch task, and the web server should automatically open. Congrats, you should now be able to see your local copy of the demo site.\n
\n
## <aname="submit"></a> Submission Guidelines\n
\n
If you are creating a Pull Request, fork the repository and make any changes on the `develop` branch.\n
\n
### <aname="conventions"></a> Conventions\n
\n
Check out the [Coding Style document](CODINGSTYLE.md)\n
\n
### Grunt\n
\n
We have five grunt tasks:\n
\n
1. `grunt build` - Combines the scripts and creates the library for distribution\n
2. `grunt public` - Creates the distribution of the example / demo site which is used as visual development help of the charts but also serves as the documentation site / gh-pages.\n
3. `grunt dev` - Starts watch with livereload that is executing the same things as the site build default task but for live development.\n
4. `grunt preview` - Executes a dist and serves the directory statically in order to serve with the production example / demo site.\n
5. `grunt test` - Executes jasmine tests separately, although we have a very big lack of tests.\n
\n
`dist` should **not** be included in any Pull Requests. So please ensure that code is not being committed as part of the Pull Request.\n
\n
### Documentation\n
\n
- Everything is already in place and in the `sitedist` there is a `apidoc` folder generated by [doxication](https://github.com/gionkunz/grunt-doxication) generator that uses JSDoc like comments to generate documentation meta files. Always use proper JSDoc comments when documenting methods and API interfaces. Also assign documentation blocks using @memberof to the virtual module they belong to.\n
- The site documentation is built with [Assemble.io](http://assemble.io/). Generally a component based approach should be followed where there are already Handlebar partials / helpers in order to create whole sites based on components that can be specified by type and with their data in yaml files.\n
\n
### Important missing stuff \n
\n
1. Jasmine Tests!\n
2. Documentation: JSDoc, Getting started documentation and landing page\n
3. Better accessibility using ARIA and other optimizations\n
4. Better interfaces to the library (i.e. jQuery with data-* attributes for configuration), Angular.js directive etc.\n
<value><string>/* Donut charts get built from Pie charts but with a fundamentally difference in the drawing approach. The donut is drawn using arc strokes for maximum freedom in styling */\n
.ct-series-a .ct-slice-donut {\n
/* give the donut slice a custom colour */\n
stroke: blue;\n
/* customize stroke width of the donut slices in CSS. Note that this property is already set in JavaScript and label positioning also relies on this. In the right situation though it can be very useful to style this property. You need to use !important to override the style attribute */\n
stroke-width: 5px !important;\n
/* create modern looking rounded donut charts */\n
<value><string>/* Use this selector to override the line style on a given series */\n
.ct-series-a .ct-line {\n
/* Set the colour of this series line */\n
stroke: red;\n
/* Control the thikness of your lines */\n
stroke-width: 5px;\n
/* Create a dashed line with a pattern */\n
stroke-dasharray: 10px 20px;\n
}\n
\n
/* This selector overrides the points style on line charts. Points on line charts are actually just very short strokes. This allows you to customize even the point size in CSS */\n
text: These projects and wrapper libraries are known to me right now that either use Chartist.js or wrap them into a library for usage in a framework. <strong>If you know other projects that use Chartist.js please let us know or make a <ahref="https://github.com/gionkunz/chartist-js/blob/develop/site/data/pages/index.yml#L206"target="_blank">pull request for this file</a>.</strong>\n
text: Note that CSS3 animations on SVG CSS attributes are not supported on all browsers and the appearance may vary.\n
side-notes:\n
- type: text\n
data:\n
text: Specifying the style of your chart in CSS is not only cleaner but also enables you to use awesome CSS animations and transitions to be applied to your SVG elements!\n
\n
- title: Crazy Animations with SMIL!\n
level: 3\n
items:\n
- type: example-chart\n
data:\n
id: example-line-svg-animation\n
classes: ct-golden-section\n
side-notes:\n
- type: text\n
data:\n
text: >\n
Almost limitless animation possibilities with the Chartist.Svg animation API. Checkout the\n
<ahref="getting-started.html#animations-using-chartistsvg">advanced getting started guide about SVG\n
animations</a> with SMIL.\n
\n
- title: Responsive charts configuration\n
level: 3\n
items:\n
- type: example-chart\n
data:\n
id: example-line-simple-responsive\n
classes: ct-golden-section\n
show-code-button: Show code\n
- type: sub-section\n
data:\n
title: Configuration overrides based on media queries\n
level: 4\n
items:\n
- type: text\n
data:\n
text: Configuring different chart behavior for various media is made simple with an override mechanism. The priority of the override mechanism is based on order of specification of the matching media queries.\n
- type: hint\n
data:\n
title: Cross-browser support\n
classes: hint-cross-browser\n
text: For IE9 you need to use a matchMedia polyfill. You should take a look at <ahref="https://github.com/paulirish/matchMedia.js/">Paul Irish\'s matchMedia polyfill</a>.\n
side-notes:\n
- type: text\n
data:\n
text: With the clear separation of concerns within Chartist.js you\'re able to style your charts with CSS in @media queries. However, sometimes it requires to also control the behaviour of your charts depending on the media. For this purpose Chartist.js provides you with a simple configuration override mechanism based on media queries.\n
// If this draw event is of type bar we can use the data to create additional content\n
if(data.type === \'bar\') {\n
// We use the group element of the current series to append a simple circle with the bar peek coordinates and a circle radius that is depending on the value\n
// Creating a bar chart with no labels and a series array with one series. For the series we generate random data with `count` elements and random data ranging from 0 to `max`.\n
// This is the bit we are actually interested in. By registering a callback for `draw` events, we can actually intercept the drawing process of each element on the chart.\n
chart.on(\'draw\', function(context) {\n
// First we want to make sure that only do something when the draw event is for bars. Draw events do get fired for labels and grids too.\n
if(context.type === \'bar\') {\n
// With the Chartist.Svg API we can easily set an attribute on our bar that just got drawn\n
context.element.attr({\n
// Now we set the style attribute on our bar to override the default color of the bar. By using a HSL colour we can easily set the hue of the colour dynamically while keeping the same saturation and lightness. From the context we can also get the current value of the bar. We use that value to calculate a hue between 0 and 100 degree. This will make our bars appear green when close to the maximum and red when close to zero.\n
/* Set some base options (settings will override the default settings in Chartist.js *see default settings*). We are adding a basic label interpolation function for the xAxis labels. */\n
var options = {\n
axisX: {\n
labelInterpolationFnc: function(value) {\n
return \'Calendar Week \' + value;\n
}\n
}\n
};\n
\n
/* Now we can specify multiple responsive settings that will override the base settings based on order and if the media queries match. In this example we are changing the visibility of dots and lines as well as use different label interpolations for space reasons. */\n
var responsiveOptions = [\n
[\'screen and (min-width: 641px) and (max-width: 1024px)\', {\n
showPoint: false,\n
axisX: {\n
labelInterpolationFnc: function(value) {\n
return \'Week \' + value;\n
}\n
}\n
}],\n
[\'screen and (max-width: 640px)\', {\n
showLine: false,\n
axisX: {\n
labelInterpolationFnc: function(value) {\n
return \'W\' + value;\n
}\n
}\n
}]\n
];\n
\n
/* Initialize the chart with the above settings */\n
new Chartist.Line(\'#my-chart\', data, options, responsiveOptions);</string></value>
module.exports.register = function (Handlebars, opt, params) {\n
var loremText = \'Lorem ipsum dolor sit amet, consectetur adipiscing elit Nullam in pharetra nisl Mauris dictum fermentum malesuada Donec tincidunt, lectus nec tempor eleifend, sem enim rhoncus nibh, nec ultricies ante lectus sit amet mi Proin cursus dolor in nisl varius elementum Aliquam blandit lobortis adipiscing Proin euismod est non feugiat venenatis Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ac neque consectetur, ullamcorper neque quis, commodo ligula In ornare tempus feugiat Suspendisse ut pretium dui, at egestas velit Etiam ultricies, nisl quis gravida condimentum, dui nisl congue ligula, porta consectetur est sapien viverra est Donec quis ipsum quis metus luctus porttitor sed id justo Proin ultricies adipiscing dolor, luctus interdum urna ullamcorper sit amet Phasellus mollis erat egestas urna tincidunt viverra Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas Nam est ante, blandit vitae porta sed, consectetur vitae libero Sed sit amet auctor diam, eu ullamcorper nulla Aenean interdum, augue nec ullamcorper aliquam, libero justo pellentesque libero, vitae venenatis velit justo pellentesque enim Nam lobortis tortor non sagittis mollis Integer commodo eget nulla vel tincidunt Cras vitae vestibulum ipsum, a sollicitudin erat Cras feugiat vehicula magna, nec vehicula massa lacinia in Nam cursus arcu cursus felis feugiat, vel tincidunt eros aliquet Sed magna est, tincidunt a porta id, aliquam eu orci Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus Donec nec tempus eros Mauris placerat, nisi sit amet varius venenatis, arcu felis cursus risus, ut ultricies tortor lorem nec massa Integer molestie mattis tortor, nec pretium augue accumsan at Mauris nisi risus, hendrerit in libero a, accumsan tincidunt nunc Ut id volutpat massa Duis mattis tellus ut massa ultricies volutpat Curabitur non ante vel odio tempor condimentum Duis eu sollicitudin risus Pellentesque eget metus\';\n
var loremWords = loremText.split(\' \');\n
var random = seed(loremText);\n
\n
function initCap(str) {\n
return str.toLowerCase().replace(/(?:^|\\s)[a-z]/g, function (m) {\n
return m.toUpperCase();\n
});\n
}\n
\n
function randomInt(min, max) {\n
min = min || (min === 0 ? 0 : -Math.pow(2, 53));\n
max = max || (max === 0 ? 0 : Math.pow(2, 53));\n
\n
return Math.floor(random() * (max - min + 1)) + min;\n
* 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.\n
* **Options**\n
* 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.\n
* ```javascript\n
* var options = {\n
* // If high is specified then the axis will display values explicitly up to this value and the computed maximum from the data is ignored\n
* high: 100,\n
* // If low is specified then the axis will display values explicitly down to this value and the computed minimum from the data is ignored\n
* low: 0,\n
* // 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).\n
* scaleMinSpace: 20,\n
* // Can be set to true or false. If set to true, the scale will be generated with whole numbers only.\n
* onlyInteger: true,\n
* // 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.\n
* referenceValue: 5\n
* };\n
* ```\n
*\n
* @module Chartist.AutoScaleAxis\n
*/\n
/* global Chartist */\n
(function (window, document, Chartist) {\n
\'use strict\';\n
\n
function AutoScaleAxis(axisUnit, data, chartRect, options) {\n
// Usually we calculate highLow based on the data but this can be overriden by a highLow object in the options\n
var highLow = options.highLow || Chartist.getHighLow(data.normalized, options, axisUnit.pos);\n
* 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.\n
* **Options**\n
* 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.\n
* ```javascript\n
* var options = {\n
* // If high is specified then the axis will display values explicitly up to this value and the computed maximum from the data is ignored\n
* high: 100,\n
* // If low is specified then the axis will display values explicitly down to this value and the computed minimum from the data is ignored\n
* low: 0,\n
* // 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.\n
* divisor: 4,\n
* // 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.\n
* ticks: [1, 10, 20, 30]\n
* };\n
* ```\n
*\n
* @module Chartist.FixedScaleAxis\n
*/\n
/* global Chartist */\n
(function (window, document, Chartist) {\n
\'use strict\';\n
\n
function FixedScaleAxis(axisUnit, data, chartRect, options) {\n
var highLow = options.highLow || Chartist.getHighLow(data.normalized, options, axisUnit.pos);\n
* 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.\n
* **Options**\n
* 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.\n
* ```javascript\n
* var options = {\n
* // 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.\n
* ticks: [\'One\', \'Two\', \'Three\'],\n
* // 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.\n
* stretch: true\n
* };\n
* ```\n
*\n
* @module Chartist.StepAxis\n
*/\n
/* global Chartist */\n
(function (window, document, Chartist) {\n
\'use strict\';\n
\n
function StepAxis(axisUnit, data, chartRect, options) {\n
* Base for all chart types. The methods in Chartist.Base are inherited to all chart types.\n
*\n
* @module Chartist.Base\n
*/\n
/* global Chartist */\n
(function(window, document, Chartist) {\n
\'use strict\';\n
\n
// TODO: Currently we need to re-draw the chart on window resize. This is usually very bad and will affect performance.\n
// This is done because we can\'t work with relative coordinates when drawing the chart because SVG Path does not\n
// work with relative positions yet. We need to check if we can do a viewBox hack to switch to percentage.\n
// See http://mozilla.6506.n7.nabble.com/Specyfing-paths-with-percentages-unit-td247474.html\n
// Update: can be done using the above method tested here: http://codepen.io/gionkunz/pen/KDvLj\n
// The problem is with the label offsets that can\'t be converted into percentage and affecting the chart container\n
/**\n
* Updates the chart which currently does a full reconstruction of the SVG DOM\n
*\n
* @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.\n
* @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.\n
* @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\n
* @memberof Chartist.Base\n
*/\n
function update(data, options, override) {\n
if(data) {\n
this.data = data;\n
// Event for data transformation that allows to manipulate the data before it gets rendered in the charts\n
// Return a reference to the chart object to chain up calls\n
return this;\n
}\n
\n
/**\n
* 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.\n
*\n
* @memberof Chartist.Base\n
*/\n
function detach() {\n
// Only detach if initialization already occurred on this chart. If this chart still hasn\'t initialized (therefore\n
// the initializationTimeoutId is still a valid timeout reference, we will clear the timeout\n
* Use this function to register event handlers. The handler callbacks are synchronous and will run in the main thread rather than the event loop.\n
*\n
* @memberof Chartist.Base\n
* @param {String} event Name of the event. Check the examples for supported events.\n
* @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.\n
* 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.\n
*\n
* @memberof Chartist.Base\n
* @param {String} event Name of the event for which a handler should be removed\n
* @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.\n
* The bar chart module of Chartist that can be used to draw unipolar or bipolar bar and grouped bar charts.\n
*\n
* @module Chartist.Bar\n
*/\n
/* global Chartist */\n
(function(window, document, Chartist){\n
\'use strict\';\n
\n
/**\n
* Default options in bar charts. Expand the code view to see a detailed list of options with comments.\n
*\n
* @memberof Chartist.Bar\n
*/\n
var defaultOptions = {\n
// Options for X-Axis\n
axisX: {\n
// The offset of the chart drawing area to the border of the container\n
offset: 30,\n
// 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.\n
position: \'end\',\n
// Allows you to correct label positioning on this axis by positive or negative x and y offset.\n
labelOffset: {\n
x: 0,\n
y: 0\n
},\n
// If labels should be shown or not\n
showLabel: true,\n
// If the axis grid should be drawn or not\n
showGrid: true,\n
// Interpolation function that allows you to intercept the value from the axis label\n
labelInterpolationFnc: Chartist.noop,\n
// This value specifies the minimum width in pixel of the scale steps\n
scaleMinSpace: 30,\n
// Use only integer values (whole numbers) for the scale steps\n
onlyInteger: false\n
},\n
// Options for Y-Axis\n
axisY: {\n
// The offset of the chart drawing area to the border of the container\n
offset: 40,\n
// 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.\n
position: \'start\',\n
// Allows you to correct label positioning on this axis by positive or negative x and y offset.\n
labelOffset: {\n
x: 0,\n
y: 0\n
},\n
// If labels should be shown or not\n
showLabel: true,\n
// If the axis grid should be drawn or not\n
showGrid: true,\n
// Interpolation function that allows you to intercept the value from the axis label\n
labelInterpolationFnc: Chartist.noop,\n
// This value specifies the minimum height in pixel of the scale steps\n
scaleMinSpace: 20,\n
// Use only integer values (whole numbers) for the scale steps\n
onlyInteger: false\n
},\n
// Specify a fixed width for the chart as a string (i.e. \'100px\' or \'50%\')\n
width: undefined,\n
// Specify a fixed height for the chart as a string (i.e. \'100px\' or \'50%\')\n
height: undefined,\n
// Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value\n
high: undefined,\n
// Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value\n
low: undefined,\n
// Use only integer values (whole numbers) for the scale steps\n
onlyInteger: false,\n
// 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}\n
chartPadding: {\n
top: 15,\n
right: 15,\n
bottom: 5,\n
left: 10\n
},\n
// Specify the distance in pixel of bars in a group\n
seriesBarDistance: 15,\n
// 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.\n
stackBars: false,\n
// 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.\n
horizontalBars: false,\n
// 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.\n
distributeSeries: false,\n
// If true the whole data is reversed including labels, the series order as well as the whole series data arrays.\n
reverseData: false,\n
// Override the class names that get used to generate the SVG structure of the chart\n
* This method creates a new bar chart and returns API object that you can use for later changes.\n
*\n
* @memberof Chartist.Bar\n
* @param {String|Node} query A selector query string or directly a DOM element\n
* @param {Object} data The data object that needs to consist of a labels and a series array\n
* @param {Object} [options] The options object with options that override the default options. Check the examples for a detailed list.\n
* @param {Array} [responsiveOptions] Specify an array of responsive option arrays which are a media query and options object pair => [[mediaQueryString, optionsObject],[more...]]\n
* @return {Object} An object which exposes the API for the created chart\n
* // 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.\n
* new Chartist.Bar(\'.ct-chart\', data);\n
*\n
* @example\n
* // This example creates a bipolar grouped bar chart where the boundaries are limitted to -10 and 10\n
* new Chartist.Bar(\'.ct-chart\', {\n
* labels: [1, 2, 3, 4, 5, 6, 7],\n
* series: [\n
* [1, 3, 2, -5, -3, 1, -6],\n
* [-5, -2, -4, -1, 2, -3, 1]\n
* ]\n
* }, {\n
* seriesBarDistance: 12,\n
* low: -10,\n
* high: 10\n
* });\n
*\n
*/\n
function Bar(query, data, options, responsiveOptions) {\n
Chartist.Bar.super.constructor.call(this,\n
query,\n
data,\n
defaultOptions,\n
Chartist.extend({}, defaultOptions, options),\n
responsiveOptions);\n
}\n
\n
// Creating bar chart type in Chartist namespace\n
* 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.\n
*\n
* For examples on how to use the line chart please check the examples of the `Chartist.Line` method.\n
*\n
* @module Chartist.Line\n
*/\n
/* global Chartist */\n
(function(window, document, Chartist){\n
\'use strict\';\n
\n
/**\n
* Default options in line charts. Expand the code view to see a detailed list of options with comments.\n
*\n
* @memberof Chartist.Line\n
*/\n
var defaultOptions = {\n
// Options for X-Axis\n
axisX: {\n
// The offset of the labels to the chart area\n
offset: 30,\n
// 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.\n
position: \'end\',\n
// Allows you to correct label positioning on this axis by positive or negative x and y offset.\n
labelOffset: {\n
x: 0,\n
y: 0\n
},\n
// If labels should be shown or not\n
showLabel: true,\n
// If the axis grid should be drawn or not\n
showGrid: true,\n
// Interpolation function that allows you to intercept the value from the axis label\n
labelInterpolationFnc: Chartist.noop,\n
// 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.\n
type: undefined\n
},\n
// Options for Y-Axis\n
axisY: {\n
// The offset of the labels to the chart area\n
offset: 40,\n
// 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.\n
position: \'start\',\n
// Allows you to correct label positioning on this axis by positive or negative x and y offset.\n
labelOffset: {\n
x: 0,\n
y: 0\n
},\n
// If labels should be shown or not\n
showLabel: true,\n
// If the axis grid should be drawn or not\n
showGrid: true,\n
// Interpolation function that allows you to intercept the value from the axis label\n
labelInterpolationFnc: Chartist.noop,\n
// 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.\n
type: undefined,\n
// This value specifies the minimum height in pixel of the scale steps\n
scaleMinSpace: 20,\n
// Use only integer values (whole numbers) for the scale steps\n
onlyInteger: false\n
},\n
// Specify a fixed width for the chart as a string (i.e. \'100px\' or \'50%\')\n
width: undefined,\n
// Specify a fixed height for the chart as a string (i.e. \'100px\' or \'50%\')\n
height: undefined,\n
// If the line should be drawn or not\n
showLine: true,\n
// If dots should be drawn or not\n
showPoint: true,\n
// If the line chart should draw an area\n
showArea: false,\n
// The base for the area chart that will be used to close the area shape (is normally 0)\n
areaBase: 0,\n
// 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.\n
lineSmooth: true,\n
// Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value\n
low: undefined,\n
// Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value\n
high: undefined,\n
// 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}\n
chartPadding: {\n
top: 15,\n
right: 15,\n
bottom: 5,\n
left: 10\n
},\n
// 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.\n
fullWidth: false,\n
// If true the whole data is reversed including labels, the series order as well as the whole series data arrays.\n
reverseData: false,\n
// Override the class names that get used to generate the SVG structure of the chart\n
// For each of our newly created area paths, we\'ll now create path elements by stringifying our path objects\n
// and adding the created DOM elements to the correct series group\n
var area = seriesElement.elem(\'path\', {\n
d: areaPath.stringify()\n
}, options.classNames.area, true).attr({\n
\'values\': data.normalized[seriesIndex]\n
}, Chartist.xmlNs.uri);\n
\n
// Emit an event for each area that was drawn\n
this.eventEmitter.emit(\'draw\', {\n
type: \'area\',\n
values: data.normalized[seriesIndex],\n
path: areaPath.clone(),\n
series: series,\n
seriesIndex: seriesIndex,\n
axisX: axisX,\n
axisY: axisY,\n
chartRect: chartRect,\n
index: seriesIndex,\n
group: seriesElement,\n
element: area\n
});\n
}.bind(this));\n
}\n
}.bind(this));\n
\n
this.eventEmitter.emit(\'created\', {\n
bounds: axisY.bounds,\n
chartRect: chartRect,\n
axisX: axisX,\n
axisY: axisY,\n
svg: this.svg,\n
options: options\n
});\n
}\n
\n
/**\n
* This method creates a new line chart.\n
*\n
* @memberof Chartist.Line\n
* @param {String|Node} query A selector query string or directly a DOM element\n
* @param {Object} data The data object that needs to consist of a labels and a series array\n
* @param {Object} [options] The options object with options that override the default options. Check the examples for a detailed list.\n
* @param {Array} [responsiveOptions] Specify an array of responsive option arrays which are a media query and options object pair => [[mediaQueryString, optionsObject],[more...]]\n
* @return {Object} An object which exposes the API for the created chart\n
*\n
* @example\n
* // Create a simple line chart\n
* var data = {\n
* // A labels array that can contain any sort of values\n
* // Our series array that contains series objects or in this case series data arrays\n
* series: [\n
* [5, 2, 4, 2, 0]\n
* ]\n
* };\n
*\n
* // As options we currently only set a static size of 300x200 px\n
* var options = {\n
* width: \'300px\',\n
* height: \'200px\'\n
* };\n
*\n
* // 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\n
* new Chartist.Line(\'.ct-chart\', data, options);\n
*\n
* @example\n
* // Use specific interpolation function with configuration from the Chartist.Interpolation module\n
*\n
* var chart = new Chartist.Line(\'.ct-chart\', {\n
* labels: [1, 2, 3, 4, 5],\n
* series: [\n
* [1, 1, 8, 1, 7]\n
* ]\n
* }, {\n
* lineSmooth: Chartist.Interpolation.cardinal({\n
* tension: 0.2\n
* })\n
* });\n
*\n
* @example\n
* // Create a line chart with responsive options\n
*\n
* var data = {\n
* // A labels array that can contain any sort of values\n
* // Our series array that contains series objects or in this case series data arrays\n
* series: [\n
* [5, 2, 4, 2, 0]\n
* ]\n
* };\n
*\n
* // In adition to the regular options we specify responsive option overrides that will override the default configutation based on the matching media queries.\n
* var responsiveOptions = [\n
* [\'screen and (min-width: 641px) and (max-width: 1024px)\', {\n
* showPoint: false,\n
* axisX: {\n
* labelInterpolationFnc: function(value) {\n
* // Will return Mon, Tue, Wed etc. on medium screens\n
* return value.slice(0, 3);\n
* }\n
* }\n
* }],\n
* [\'screen and (max-width: 640px)\', {\n
* showLine: false,\n
* axisX: {\n
* labelInterpolationFnc: function(value) {\n
* // Will return M, T, W etc. on small screens\n
* return value[0];\n
* }\n
* }\n
* }]\n
* ];\n
*\n
* new Chartist.Line(\'.ct-chart\', data, null, responsiveOptions);\n
*\n
*/\n
function Line(query, data, options, responsiveOptions) {\n
Chartist.Line.super.constructor.call(this,\n
query,\n
data,\n
defaultOptions,\n
Chartist.extend({}, defaultOptions, options),\n
responsiveOptions);\n
}\n
\n
// Creating line chart type in Chartist namespace\n
* The pie chart module of Chartist that can be used to draw pie, donut or gauge charts\n
*\n
* @module Chartist.Pie\n
*/\n
/* global Chartist */\n
(function(window, document, Chartist) {\n
\'use strict\';\n
\n
/**\n
* Default options in line charts. Expand the code view to see a detailed list of options with comments.\n
*\n
* @memberof Chartist.Pie\n
*/\n
var defaultOptions = {\n
// Specify a fixed width for the chart as a string (i.e. \'100px\' or \'50%\')\n
width: undefined,\n
// Specify a fixed height for the chart as a string (i.e. \'100px\' or \'50%\')\n
height: undefined,\n
// 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}\n
chartPadding: 5,\n
// Override the class names that are used to generate the SVG structure of the chart\n
classNames: {\n
chartPie: \'ct-chart-pie\',\n
chartDonut: \'ct-chart-donut\',\n
series: \'ct-series\',\n
slicePie: \'ct-slice-pie\',\n
sliceDonut: \'ct-slice-donut\',\n
label: \'ct-label\'\n
},\n
// The start angle of the pie chart in degrees where 0 points north. A higher value offsets the start angle clockwise.\n
startAngle: 0,\n
// 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.\n
total: undefined,\n
// If specified the donut CSS classes will be used and strokes will be drawn instead of pie slices.\n
donut: false,\n
// Specify the donut stroke width, currently done in javascript for convenience. May move to CSS styles in the future.\n
donutWidth: 60,\n
// If a label should be shown or not\n
showLabel: true,\n
// 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.\n
labelOffset: 0,\n
// 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.\n
labelPosition: \'inside\',\n
// An interpolation function for the label value\n
labelInterpolationFnc: Chartist.noop,\n
// 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.\n
labelDirection: \'neutral\',\n
// If true the whole data is reversed including labels, the series order as well as the whole series data arrays.\n
reverseData: false\n
};\n
\n
/**\n
* Determines SVG anchor position based on direction and center parameter\n
*\n
* @param center\n
* @param label\n
* @param direction\n
* @return {string}\n
*/\n
function determineAnchorPosition(center, label, direction) {\n
var toTheRight = label.x > center.x;\n
\n
if(toTheRight && direction === \'explode\' ||\n
!toTheRight && direction === \'implode\') {\n
return \'start\';\n
} else if(toTheRight && direction === \'implode\' ||\n
// Set next startAngle to current endAngle. Use slight offset so there are no transparent hairline issues\n
// (except for last slice)\n
startAngle = endAngle;\n
}\n
\n
this.eventEmitter.emit(\'created\', {\n
chartRect: chartRect,\n
svg: this.svg,\n
options: options\n
});\n
}\n
\n
/**\n
* This method creates a new pie chart and returns an object that can be used to redraw the chart.\n
*\n
* @memberof Chartist.Pie\n
* @param {String|Node} query A selector query string or directly a DOM element\n
* @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.\n
* @param {Object} [options] The options object with options that override the default options. Check the examples for a detailed list.\n
* @param {Array} [responsiveOptions] Specify an array of responsive option arrays which are a media query and options object pair => [[mediaQueryString, optionsObject],[more...]]\n
* @return {Object} An object with a version and an update method to manually redraw the chart\n
*\n
* @example\n
* // Simple pie chart example with four series\n
* new Chartist.Pie(\'.ct-chart\', {\n
* series: [10, 2, 4, 3]\n
* });\n
*\n
* @example\n
* // Drawing a donut chart\n
* new Chartist.Pie(\'.ct-chart\', {\n
* series: [10, 2, 4, 3]\n
* }, {\n
* donut: true\n
* });\n
*\n
* @example\n
* // Using donut, startAngle and total to draw a gauge chart\n
* new Chartist.Pie(\'.ct-chart\', {\n
* series: [20, 10, 30, 40]\n
* }, {\n
* donut: true,\n
* donutWidth: 20,\n
* startAngle: 270,\n
* total: 200\n
* });\n
*\n
* @example\n
* // Drawing a pie chart with padding and labels that are outside the pie\n
* new Chartist.Pie(\'.ct-chart\', {\n
* series: [20, 10, 30, 40]\n
* }, {\n
* chartPadding: 30,\n
* labelOffset: 50,\n
* labelDirection: \'explode\'\n
* });\n
*\n
* @example\n
* // Overriding the class names for individual series as well as a name and meta data.\n
* // The name will be written as ct:series-name attribute and the meta data will be serialized and written\n
* // to a ct:meta attribute.\n
* new Chartist.Pie(\'.ct-chart\', {\n
* series: [{\n
* value: 20,\n
* name: \'Series 1\',\n
* className: \'my-custom-class-one\',\n
* meta: \'Meta One\'\n
* }, {\n
* value: 10,\n
* name: \'Series 2\',\n
* className: \'my-custom-class-two\',\n
* meta: \'Meta Two\'\n
* }, {\n
* value: 70,\n
* name: \'Series 3\',\n
* className: \'my-custom-class-three\',\n
* meta: \'Meta Three\'\n
* }]\n
* });\n
*/\n
function Pie(query, data, options, responsiveOptions) {\n
Chartist.Pie.super.constructor.call(this,\n
query,\n
data,\n
defaultOptions,\n
Chartist.extend({}, defaultOptions, options),\n
responsiveOptions);\n
}\n
\n
// Creating pie chart type in Chartist namespace\n
* This module provides some basic prototype inheritance utilities.\n
*\n
* @module Chartist.Class\n
*/\n
/* global Chartist */\n
(function(window, document, Chartist) {\n
\'use strict\';\n
\n
function listToArray(list) {\n
var arr = [];\n
if (list.length) {\n
for (var i = 0; i < list.length; i++) {\n
arr.push(list[i]);\n
}\n
}\n
return arr;\n
}\n
\n
/**\n
* Method to extend from current prototype.\n
*\n
* @memberof Chartist.Class\n
* @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.\n
* @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.\n
* @return {Function} Constructor function of the new class\n
* Functional style helper to produce array with given length initialized with undefined values\n
*\n
* @memberof Chartist.Core\n
* @param length\n
* @return {Array}\n
*/\n
Chartist.times = function(length) {\n
return Array.apply(null, new Array(length));\n
};\n
\n
/**\n
* Sum helper to be used in reduce functions\n
*\n
* @memberof Chartist.Core\n
* @param previous\n
* @param current\n
* @return {*}\n
*/\n
Chartist.sum = function(previous, current) {\n
return previous + (current ? current : 0);\n
};\n
\n
/**\n
* Multiply helper to be used in `Array.map` for multiplying each value of an array with a factor.\n
*\n
* @memberof Chartist.Core\n
* @param {Number} factor\n
* @returns {Function} Function that can be used in `Array.map` to multiply each value in an array\n
*/\n
Chartist.mapMultiply = function(factor) {\n
return function(num) {\n
return num * factor;\n
};\n
};\n
\n
/**\n
* Add helper to be used in `Array.map` for adding a addend to each value of an array.\n
*\n
* @memberof Chartist.Core\n
* @param {Number} addend\n
* @returns {Function} Function that can be used in `Array.map` to add a addend to each value in an array\n
*/\n
Chartist.mapAdd = function(addend) {\n
return function(num) {\n
return num + addend;\n
};\n
};\n
\n
/**\n
* 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).\n
* 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.\n
*\n
* @memberof Chartist.Core\n
* @param {Number} value The value that should be rounded with precision\n
* @param {Number} [digits] The number of digits after decimal used to do the rounding\n
* Precision level used internally in Chartist for rounding. If you require more decimal places you can increase this number.\n
*\n
* @memberof Chartist.Core\n
* @type {number}\n
*/\n
Chartist.precision = 8;\n
\n
/**\n
* A map with characters to escape for strings to be safely used as attribute values.\n
*\n
* @memberof Chartist.Core\n
* @type {Object}\n
*/\n
Chartist.escapingMap = {\n
\'&\': \'&\',\n
\'<\': \'<\',\n
\'>\': \'>\',\n
\'"\': \'"\',\n
\'\\\'\': \''\'\n
};\n
\n
/**\n
* 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.\n
* If called with null or undefined the function will return immediately with null or undefined.\n
* 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.\n
*\n
* @memberof Chartist.Core\n
* @param {String} data\n
* @return {String|Number|Object}\n
*/\n
Chartist.deserialize = function(data) {\n
if(typeof data !== \'string\') {\n
return data;\n
}\n
\n
data = Object.keys(Chartist.escapingMap).reduce(function(result, key) {\n
* @param {Number} [fallback] This value is used to fill missing values if a incomplete padding object was passed\n
* @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.\n
* A very basic event module that helps to generate and catch events.\n
*\n
* @module Chartist.Event\n
*/\n
/* global Chartist */\n
(function (window, document, Chartist) {\n
\'use strict\';\n
\n
Chartist.EventEmitter = function () {\n
var handlers = [];\n
\n
/**\n
* Add an event handler for a specific event\n
*\n
* @memberof Chartist.Event\n
* @param {String} event The event name\n
* @param {Function} handler A event handler function\n
*/\n
function addEventHandler(event, handler) {\n
handlers[event] = handlers[event] || [];\n
handlers[event].push(handler);\n
}\n
\n
/**\n
* Remove an event handler of a specific event name or remove all event handlers for a specific event.\n
*\n
* @memberof Chartist.Event\n
* @param {String} event The event name where a specific or all handlers should be removed\n
* @param {Function} [handler] An optional event handler function. If specified only this specific handler will be removed and otherwise all handlers are removed.\n
*/\n
function removeEventHandler(event, handler) {\n
// Only do something if there are event handlers with this name existing\n
if(handlers[event]) {\n
// If handler is set we will look for a specific handler and only remove this\n
* 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.\n
*\n
* 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.\n
*\n
* 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.\n
*\n
* @example\n
* var chart = new Chartist.Line(\'.ct-chart\', {\n
* labels: [1, 2, 3, 4, 5],\n
* series: [[1, 2, 8, 1, 7]]\n
* }, {\n
* lineSmooth: Chartist.Interpolation.simple({\n
* divisor: 2\n
* })\n
* });\n
*\n
*\n
* @memberof Chartist.Interpolation\n
* @param {Object} options The options of the simple interpolation factory function.\n
return function simple(pathCoordinates, valueData) {\n
var path = new Chartist.Svg.Path();\n
var hole = true;\n
\n
for(var i = 2; i < pathCoordinates.length; i += 2) {\n
var prevX = pathCoordinates[i - 2];\n
var prevY = pathCoordinates[i - 1];\n
var currX = pathCoordinates[i];\n
var currY = pathCoordinates[i + 1];\n
var length = (currX - prevX) * d;\n
var prevData = valueData[(i / 2) - 1];\n
var currData = valueData[i / 2];\n
\n
if(prevData.value === undefined) {\n
hole = true;\n
} else {\n
\n
if(hole) {\n
path.move(prevX, prevY, false, prevData);\n
}\n
\n
if(currData.value !== undefined) {\n
path.curve(\n
prevX + length,\n
prevY,\n
currX - length,\n
currY,\n
currX,\n
currY,\n
false,\n
currData\n
);\n
\n
hole = false;\n
}\n
}\n
}\n
\n
return path;\n
};\n
};\n
\n
/**\n
* 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.\n
*\n
* 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`.\n
*\n
* 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.\n
*\n
* @example\n
* var chart = new Chartist.Line(\'.ct-chart\', {\n
* labels: [1, 2, 3, 4, 5],\n
* series: [[1, 2, 8, 1, 7]]\n
* }, {\n
* lineSmooth: Chartist.Interpolation.cardinal({\n
* tension: 1\n
* })\n
* });\n
*\n
* @memberof Chartist.Interpolation\n
* @param {Object} options The options of the cardinal factory function.\n
* 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.\n
*\n
* 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`.\n
*\n
* @example\n
* var chart = new Chartist.Line(\'.ct-chart\', {\n
* Default options for newly created SVG path objects.\n
*\n
* @memberof Chartist.Svg.Path\n
* @type {Object}\n
*/\n
var defaultOptions = {\n
// 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.\n
accuracy: 3\n
};\n
\n
function element(command, params, pathElements, pos, relative, data) {\n
* 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.\n
*\n
* @memberof Chartist.Svg.Path\n
* @param {Number} [pos] If a number is passed then the cursor is set to this position in the path element array.\n
* @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.\n
* 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.\n
*\n
* @memberof Chartist.Svg.Path\n
* @param {String} path Any SVG path that contains move (m), line (l) or curve (c) components.\n
* @return {Chartist.Svg.Path} The current path object for easy call chaining.\n
*/\n
function parse(path) {\n
// Parsing the SVG path string into an array of arrays [[\'M\', \'10\', \'10\'], [\'L\', \'100\', \'100\']]\n
var chunks = path.replace(/([A-Za-z])([0-9])/g, \'$1 $2\')\n
.replace(/([0-9])([A-Za-z])/g, \'$1 $2\')\n
.split(/[\\s,]+/)\n
.reduce(function(result, element) {\n
if(element.match(/[A-Za-z]/)) {\n
result.push([]);\n
}\n
\n
result[result.length - 1].push(element);\n
return result;\n
}, []);\n
\n
// If this is a closed path we remove the Z at the end because this is determined by the close option\n
// Increase the internal position by the element count\n
this.pos += elements.length;\n
\n
return this;\n
}\n
\n
/**\n
* 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.\n
*\n
* @memberof Chartist.Svg.Path\n
* @return {String}\n
*/\n
function stringify() {\n
var accuracyMultiplier = Math.pow(10, this.options.accuracy);\n
* 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.\n
*\n
* @memberof Chartist.Svg.Path\n
* @param {Number} x The number which will be used to scale the x, x1 and x2 of all path elements.\n
* @param {Number} y The number which will be used to scale the y, y1 and y2 of all path elements.\n
* @return {Chartist.Svg.Path} The current path object for easy call chaining.\n
pathElement[paramName] *= paramName[0] === \'x\' ? x : y;\n
});\n
return this;\n
}\n
\n
/**\n
* 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.\n
*\n
* @memberof Chartist.Svg.Path\n
* @param {Number} x The number which will be used to translate the x, x1 and x2 of all path elements.\n
* @param {Number} y The number which will be used to translate the y, y1 and y2 of all path elements.\n
* @return {Chartist.Svg.Path} The current path object for easy call chaining.\n
pathElement[paramName] += paramName[0] === \'x\' ? x : y;\n
});\n
return this;\n
}\n
\n
/**\n
* 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.\n
* The method signature of the callback function looks like this:\n
* 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.\n
*\n
* @memberof Chartist.Svg.Path\n
* @param {Function} transformFnc The callback function for the transformation. Check the signature in the function description.\n
* @return {Chartist.Svg.Path} The current path object for easy call chaining.\n
var transformed = transformFnc(pathElement, paramName, pathElementIndex, paramIndex, pathElements);\n
if(transformed || transformed === 0) {\n
pathElement[paramName] = transformed;\n
}\n
});\n
return this;\n
}\n
\n
/**\n
* This function clones a whole path object with all its properties. This is a deep clone and path element objects will also be cloned.\n
*\n
* @memberof Chartist.Svg.Path\n
* @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.\n
* @return {Chartist.Svg.Path}\n
*/\n
function clone(close) {\n
var c = new Chartist.Svg.Path(close || this.close);\n
* 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.\n
*\n
* @memberof Chartist.Svg.Path\n
* @param {String} command The command you\'d like to use to split the path\n
* 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.\n
*\n
* @memberof Chartist.Svg\n
* @constructor\n
* @param {String|Element} name The name of the SVG element to create or an SVG dom element which should be wrapped into Chartist.Svg\n
* @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.\n
* @param {String} className This class or class list will be added to the SVG element\n
* @param {Object} parent The parent SVG wrapper object where this newly created wrapper and it\'s element will be attached to as child\n
* @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\n
*/\n
function Svg(name, attributes, className, parent, insertFirst) {\n
// If Svg is getting called with an SVG element we just return the wrapper\n
* Set attributes on the current SVG element of the wrapper you\'re currently working on.\n
*\n
* @memberof Chartist.Svg\n
* @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.\n
* @param {String} ns If specified, the attributes will be set as namespace attributes with ns as prefix.\n
* @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.\n
* Create a new SVG element whose wrapper object will be selected for further operations. This way you can also create nested groups easily.\n
*\n
* @memberof Chartist.Svg\n
* @param {String} name The name of the SVG element that should be created as child element of the currently selected element wrapper\n
* @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.\n
* @param {String} [className] This class or class list will be added to the SVG element\n
* @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\n
* @return {Chartist.Svg} Returns a Chartist.Svg wrapper object that can be used to modify the containing SVG data\n
*/\n
function elem(name, attributes, className, insertFirst) {\n
return new Chartist.Svg(name, attributes, className, this, insertFirst);\n
}\n
\n
/**\n
* Returns the parent Chartist.SVG wrapper object\n
*\n
* @memberof Chartist.Svg\n
* @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.\n
*/\n
function parent() {\n
return this._node.parentNode instanceof SVGElement ? new Chartist.Svg(this._node.parentNode) : null;\n
}\n
\n
/**\n
* This method returns a Chartist.Svg wrapper around the root SVG element of the current tree.\n
*\n
* @memberof Chartist.Svg\n
* @return {Chartist.Svg} The root SVG element wrapped in a Chartist.Svg element\n
*/\n
function root() {\n
var node = this._node;\n
while(node.nodeName !== \'svg\') {\n
node = node.parentNode;\n
}\n
return new Chartist.Svg(node);\n
}\n
\n
/**\n
* Find the first child SVG element of the current element that matches a CSS selector. The returned object is a Chartist.Svg wrapper.\n
*\n
* @memberof Chartist.Svg\n
* @param {String} selector A CSS selector that is used to query for child SVG elements\n
* @return {Chartist.Svg} The SVG wrapper for the element found or null if no element was found\n
*/\n
function querySelector(selector) {\n
var foundNode = this._node.querySelector(selector);\n
return foundNode ? new Chartist.Svg(foundNode) : null;\n
}\n
\n
/**\n
* Find the all child SVG elements of the current element that match a CSS selector. The returned object is a Chartist.Svg.List wrapper.\n
*\n
* @memberof Chartist.Svg\n
* @param {String} selector A CSS selector that is used to query for child SVG elements\n
* @return {Chartist.Svg.List} The SVG wrapper list for the element found or null if no element was found\n
*/\n
function querySelectorAll(selector) {\n
var foundNodes = this._node.querySelectorAll(selector);\n
return foundNodes.length ? new Chartist.Svg.List(foundNodes) : null;\n
}\n
\n
/**\n
* 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.\n
*\n
* @memberof Chartist.Svg\n
* @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\n
* @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.\n
* @param {String} [className] This class or class list will be added to the SVG element\n
* @param {Boolean} [insertFirst] Specifies if the foreignObject should be inserted as first child\n
* @return {Chartist.Svg} New wrapper object that wraps the foreignObject element\n
*/\n
function foreignObject(content, attributes, className, insertFirst) {\n
// If content is string then we convert it to DOM\n
// TODO: Handle case where content is not a string nor a DOM Node\n
if(typeof content === \'string\') {\n
var container = document.createElement(\'div\');\n
container.innerHTML = content;\n
content = container.firstChild;\n
}\n
\n
// Adding namespace to content element\n
content.setAttribute(\'xmlns\', xhtmlNs);\n
\n
// Creating the foreignObject without required extension attribute (as described here\n
* This method will clear all child nodes of the current wrapper object.\n
*\n
* @memberof Chartist.Svg\n
* @return {Chartist.Svg} The same wrapper object that got emptied\n
*/\n
function empty() {\n
while (this._node.firstChild) {\n
this._node.removeChild(this._node.firstChild);\n
}\n
\n
return this;\n
}\n
\n
/**\n
* 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.\n
*\n
* @memberof Chartist.Svg\n
* @return {Chartist.Svg} The parent wrapper object of the element that got removed\n
*/\n
function remove() {\n
this._node.parentNode.removeChild(this._node);\n
return this.parent();\n
}\n
\n
/**\n
* This method will replace the element with a new element that can be created outside of the current DOM.\n
*\n
* @memberof Chartist.Svg\n
* @param {Chartist.Svg} newElement The new Chartist.Svg object that will be used to replace the current wrapper object\n
* @return {Chartist.Svg} The wrapper of the new element\n
* 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.\n
* **An animations object could look like this:**\n
* ```javascript\n
* element.animate({\n
* opacity: {\n
* dur: 1000,\n
* from: 0,\n
* to: 1\n
* },\n
* x1: {\n
* dur: \'1000ms\',\n
* from: 100,\n
* to: 200,\n
* easing: \'easeOutQuart\'\n
* },\n
* y1: {\n
* dur: \'2s\',\n
* from: 0,\n
* to: 100\n
* }\n
* });\n
* ```\n
* **Automatic unit conversion**\n
* 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.\n
* **Guided mode**\n
* 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.\n
* If guided mode is enabled the following behavior is added:\n
* - Before the animation starts (even when delayed with `begin`) the animated attribute will be set already to the `from` value of the animation\n
* - `begin` is explicitly set to `indefinite` so it can be started manually without relying on document begin time (creation)\n
* - The animate element will be forced to use `fill="freeze"`\n
* - 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.\n
* - After the animation the element attribute value will be set to the `to` value of the animation\n
* - The animate element is deleted from the DOM\n
*\n
* @memberof Chartist.Svg\n
* @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.\n
* @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.\n
* @param {Object} eventEmitter If specified, this event emitter will be notified when an animation starts or ends.\n
* @return {Chartist.Svg} The current element where the animation was added\n
*/\n
function animate(animations, guided, eventEmitter) {\n
* 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.\n
*\n
* @memberof Chartist.Svg\n
* @param {String} feature The SVG 1.1 feature that should be checked for support.\n
* @return {Boolean} True of false if the feature is supported or not\n
* 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.\n
*\n
* @memberof Chartist.Svg\n
*/\n
var easingCubicBeziers = {\n
easeInSine: [0.47, 0, 0.745, 0.715],\n
easeOutSine: [0.39, 0.575, 0.565, 1],\n
easeInOutSine: [0.445, 0.05, 0.55, 0.95],\n
easeInQuad: [0.55, 0.085, 0.68, 0.53],\n
easeOutQuad: [0.25, 0.46, 0.45, 0.94],\n
easeInOutQuad: [0.455, 0.03, 0.515, 0.955],\n
easeInCubic: [0.55, 0.055, 0.675, 0.19],\n
easeOutCubic: [0.215, 0.61, 0.355, 1],\n
easeInOutCubic: [0.645, 0.045, 0.355, 1],\n
easeInQuart: [0.895, 0.03, 0.685, 0.22],\n
easeOutQuart: [0.165, 0.84, 0.44, 1],\n
easeInOutQuart: [0.77, 0, 0.175, 1],\n
easeInQuint: [0.755, 0.05, 0.855, 0.06],\n
easeOutQuint: [0.23, 1, 0.32, 1],\n
easeInOutQuint: [0.86, 0, 0.07, 1],\n
easeInExpo: [0.95, 0.05, 0.795, 0.035],\n
easeOutExpo: [0.19, 1, 0.22, 1],\n
easeInOutExpo: [1, 0, 0, 1],\n
easeInCirc: [0.6, 0.04, 0.98, 0.335],\n
easeOutCirc: [0.075, 0.82, 0.165, 1],\n
easeInOutCirc: [0.785, 0.135, 0.15, 0.86],\n
easeInBack: [0.6, -0.28, 0.735, 0.045],\n
easeOutBack: [0.175, 0.885, 0.32, 1.275],\n
easeInOutBack: [0.68, -0.55, 0.265, 1.55]\n
};\n
\n
Chartist.Svg.Easing = easingCubicBeziers;\n
\n
/**\n
* 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.\n
* An instance of this class is also returned by `Chartist.Svg.querySelectorAll`.\n
*\n
* @memberof Chartist.Svg\n
* @param {Array<Node>|NodeList} nodeList An Array of SVG DOM nodes or a SVG DOM NodeList (as returned by document.querySelectorAll)\n
