1451 lines
114 KiB
HTML
1451 lines
114 KiB
HTML
<!doctype html><!--[if lt IE 7]>
|
|
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]>
|
|
<html class="no-js lt-ie9 lt-ie8"> <![endif]--><!--[if IE 8]>
|
|
<html class="no-js lt-ie9"> <![endif]--><!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Chartist - API Documentation</title><meta name="description" content="Detailed documentation of the Chartist.js code and API"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="stylesheet" href="styles/vendor.css"><link rel="stylesheet" href="styles/main.css"><body><section class="page-content api-documentation"><div class="contain-to-grid sticky"><nav class="top-bar" data-topbar data-options="sticky_on: large"><ul class="title-area"><li class="name"><h1><a href="index.html">Chartist.js</a></h1></li><li class="toggle-topbar menu-icon"><a href="#">Menu</a></li></ul><section class="top-bar-section"><ul class="right"><li><a href="//github.com/gionkunz/chartist-js/tree/master/dist" target="_blank">Download</a></li></ul><ul class="left"><li><a href="getting-started.html">Getting started</a></li><li><a href="api-documentation.html">API Documentation</a></li><li><a href="examples.html">Examples (live coding!)</a></li><li><a href="plugins.html">Plugins</a></li><li><a href="//github.com/gionkunz/chartist-js" target="_blank">Contribute</a></li></ul></section></nav></div><article class="main" role="main"><header><h2>Chartist - API Documentation</h2></header><aside class="side-navigation"><nav><ul class="side-nav"><li class="heading">Chartist.Base</li><li><a class="text-clipping" href="#chartistbase-function-update">update()</a></li><li><a class="text-clipping" href="#chartistbase-function-detach">detach()</a></li><li><a class="text-clipping" href="#chartistbase-function-on">on()</a></li><li><a class="text-clipping" href="#chartistbase-function-off">off()</a></li><li class="heading">Chartist.Bar</li><li><a class="text-clipping" href="#chartistbar-function-bar">Bar()</a></li><li class="heading">Chartist.Line</li><li><a class="text-clipping" href="#chartistline-function-line">Line()</a></li><li class="heading">Chartist.Pie</li><li><a class="text-clipping" href="#chartistpie-function-pie">Pie()</a></li><li class="heading">Chartist.Class</li><li><a class="text-clipping" href="#chartistclass-function-extend">extend()</a></li><li><a class="text-clipping" href="#chartistclass-function-mix">mix()</a></li><li class="heading">Chartist.Core</li><li><a class="text-clipping" href="#chartistcore-method-noop">Chartist.noop()</a></li><li><a class="text-clipping" href="#chartistcore-method-alphanumerate">Chartist.alphaNumerate()</a></li><li><a class="text-clipping" href="#chartistcore-method-extend">Chartist.extend()</a></li><li><a class="text-clipping" href="#chartistcore-method-stripunit">Chartist.stripUnit()</a></li><li><a class="text-clipping" href="#chartistcore-method-ensureunit">Chartist.ensureUnit()</a></li><li><a class="text-clipping" href="#chartistcore-method-queryselector">Chartist.querySelector()</a></li><li><a class="text-clipping" href="#chartistcore-method-createsvg">Chartist.createSvg()</a></li><li><a class="text-clipping" href="#chartistcore-method-getdataarray">Chartist.getDataArray()</a></li><li><a class="text-clipping" href="#chartistcore-method-normalizedataarray">Chartist.normalizeDataArray()</a></li><li><a class="text-clipping" href="#chartistcore-method-orderofmagnitude">Chartist.orderOfMagnitude()</a></li><li><a class="text-clipping" href="#chartistcore-method-projectlength">Chartist.projectLength()</a></li><li><a class="text-clipping" href="#chartistcore-method-getavailableheight">Chartist.getAvailableHeight()</a></li><li><a class="text-clipping" href="#chartistcore-method-gethighlow">Chartist.getHighLow()</a></li><li><a class="text-clipping" href="#chartistcore-method-getbounds">Chartist.getBounds()</a></li><li><a class="text-clipping" href="#chartistcore-method-polartocartesian">Chartist.polarToCartesian()</a></li><li><a class="text-clipping" href="#chartistcore-method-createchartrect">Chartist.createChartRect()</a></li><li><a class="text-clipping" href="#chartistcore-method-createxaxis">Chartist.createXAxis()</a></li><li><a class="text-clipping" href="#chartistcore-method-createyaxis">Chartist.createYAxis()</a></li><li><a class="text-clipping" href="#chartistcore-method-projectpoint">Chartist.projectPoint()</a></li><li><a class="text-clipping" href="#chartistcore-method-optionsprovider">Chartist.optionsProvider()</a></li><li class="heading">Chartist.Event</li><li><a class="text-clipping" href="#chartistevent-function-addeventhandler">addEventHandler()</a></li><li><a class="text-clipping" href="#chartistevent-function-removeeventhandler">removeEventHandler()</a></li><li><a class="text-clipping" href="#chartistevent-function-emit">emit()</a></li><li class="heading">Chartist.Svg</li><li><a class="text-clipping" href="#chartistsvg-constructor-svg">Svg()</a></li><li><a class="text-clipping" href="#chartistsvg-function-attr">attr()</a></li><li><a class="text-clipping" href="#chartistsvg-function-elem">elem()</a></li><li><a class="text-clipping" href="#chartistsvg-function-foreignobject">foreignObject()</a></li><li><a class="text-clipping" href="#chartistsvg-function-text">text()</a></li><li><a class="text-clipping" href="#chartistsvg-function-empty">empty()</a></li><li><a class="text-clipping" href="#chartistsvg-function-remove">remove()</a></li><li><a class="text-clipping" href="#chartistsvg-function-replace">replace()</a></li><li><a class="text-clipping" href="#chartistsvg-function-append">append()</a></li><li><a class="text-clipping" href="#chartistsvg-function-classes">classes()</a></li><li><a class="text-clipping" href="#chartistsvg-function-addclass">addClass()</a></li><li><a class="text-clipping" href="#chartistsvg-function-removeclass">removeClass()</a></li><li><a class="text-clipping" href="#chartistsvg-function-removeallclasses">removeAllClasses()</a></li><li><a class="text-clipping" href="#chartistsvg-function-height">height()</a></li><li><a class="text-clipping" href="#chartistsvg-function-animate">animate()</a></li><li><a class="text-clipping" href="#chartistsvg-method-issupported">Chartist.Svg.isSupported()</a></li></ul></nav></aside><div class="content"><section class="documentation-section full"><header><h3>base.js</h3></header><div class="content"><section class="sub-section"><header><h4 id="module-chartistbase">Module Chartist.Base</h4><div class="module-description"><p>Base for all chart types. The methods in Chartist.Base are inherited to all chart types.</p></div><div class="module-members"><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistbase-function-update"><span class="member-tag">function</span> update()</h5><button class="api-code-button" data-toggle-visible="#chartistbase-function-update-code">Show code</button></header><pre id="chartistbase-function-update-code">
|
|
<code class="javascript">function update() {
|
|
this.createChart(this.optionsProvider.currentOptions);
|
|
return this;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Updates the chart which currently does a full reconstruction of the SVG DOM</p></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistbase-function-detach"><span class="member-tag">function</span> detach()</h5><button class="api-code-button" data-toggle-visible="#chartistbase-function-detach-code">Show code</button></header><pre id="chartistbase-function-detach-code">
|
|
<code class="javascript">function detach() {
|
|
window.removeEventListener('resize', this.resizeListener);
|
|
this.optionsProvider.removeMediaQueryListeners();
|
|
return this;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>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.</p></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistbase-function-on"><span class="member-tag">function</span> on()</h5><button class="api-code-button" data-toggle-visible="#chartistbase-function-on-code">Show code</button></header><pre id="chartistbase-function-on-code">
|
|
<code class="javascript">function on(event, handler) {
|
|
this.eventEmitter.addEventHandler(event, handler);
|
|
return this;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Use this function to register event handlers. The handler callbacks are synchronous and will run in the main thread rather than the event loop.</p></div><h6>Parameters</h6><div class="param"><code>event</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">Name of the event. Check the examples for supported events.</div></div><div class="param"><code>handler</code> ( <span class="param-type"><code>Function</code></span> )<div class="param-description">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.</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistbase-function-off"><span class="member-tag">function</span> off()</h5><button class="api-code-button" data-toggle-visible="#chartistbase-function-off-code">Show code</button></header><pre id="chartistbase-function-off-code">
|
|
<code class="javascript">function off(event, handler) {
|
|
this.eventEmitter.removeEventHandler(event, handler);
|
|
return this;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>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.</p></div><h6>Parameters</h6><div class="param"><code>event</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">Name of the event for which a handler should be removed</div></div><div class="param"><code>[handler]</code> ( <span class="param-type"><code>Function</code></span> )<div class="param-description">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.</div></div></div></article></div></header></section></div><aside class="side-notes"></aside></section><section class="documentation-section full"><header><h3>bar.js</h3></header><div class="content"><section class="sub-section"><header><h4 id="module-chartistbar">Module Chartist.Bar</h4><div class="module-description"><p>The bar chart module of Chartist that can be used to draw unipolar or bipolar bar and grouped bar charts.</p></div><div class="module-members"><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistbar-function-bar"><span class="member-tag">function</span> Bar()</h5><button class="api-code-button" data-toggle-visible="#chartistbar-function-bar-code">Show code</button></header><pre id="chartistbar-function-bar-code">
|
|
<code class="javascript">function Bar(query, data, options, responsiveOptions) {
|
|
Chartist.Bar.super.constructor.call(this,
|
|
query,
|
|
data,
|
|
Chartist.extend({}, defaultOptions, options),
|
|
responsiveOptions);
|
|
}
|
|
|
|
// Creating bar chart type in Chartist namespace
|
|
Chartist.Bar = Chartist.Base.extend({
|
|
constructor: Bar,
|
|
createChart: createChart
|
|
});
|
|
|
|
}(window, document, Chartist));</code>
|
|
</pre><div class="member-content"><div class="description"><p>This method creates a new bar chart and returns API object that you can use for later changes.</p></div><h6>Parameters</h6><div class="param"><code>query</code> ( <span class="param-type"><code>String</code></span> <span class="param-type"><code>Node</code></span> )<div class="param-description">A selector query string or directly a DOM element</div></div><div class="param"><code>data</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The data object that needs to consist of a labels and a series array</div></div><div class="param"><code>[options]</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The options object with options that override the default options. Check the examples for a detailed list.</div></div><div class="param"><code>[responsiveOptions]</code> ( <span class="param-type"><code>Array</code></span> )<div class="param-description">Specify an array of responsive option arrays which are a media query and options object pair => [[mediaQueryString, optionsObject],[more...]]</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Object</code></span> )<div class="param-description">An object which exposes the API for the created chart</div></div><h6>Examples</h6><pre class="api-example"><code class="js">// These are the default options of the bar chart
|
|
var options = {
|
|
// Options for X-Axis
|
|
axisX: {
|
|
// The offset of the chart drawing area to the border of the container
|
|
offset: 30,
|
|
// Allows you to correct label positioning on this axis by positive or negative x and y offset.
|
|
labelOffset: {
|
|
x: 0,
|
|
y: 0
|
|
},
|
|
// If labels should be shown or not
|
|
showLabel: true,
|
|
// If the axis grid should be drawn or not
|
|
showGrid: true,
|
|
// Interpolation function that allows you to intercept the value from the axis label
|
|
labelInterpolationFnc: function(value){return value;}
|
|
},
|
|
// Options for Y-Axis
|
|
axisY: {
|
|
// The offset of the chart drawing area to the border of the container
|
|
offset: 40,
|
|
// Allows you to correct label positioning on this axis by positive or negative x and y offset.
|
|
labelOffset: {
|
|
x: 0,
|
|
y: 0
|
|
},
|
|
// If labels should be shown or not
|
|
showLabel: true,
|
|
// If the axis grid should be drawn or not
|
|
showGrid: true,
|
|
// Interpolation function that allows you to intercept the value from the axis label
|
|
labelInterpolationFnc: function(value){return value;},
|
|
// This value specifies the minimum height in pixel of the scale steps
|
|
scaleMinSpace: 30
|
|
},
|
|
// Specify a fixed width for the chart as a string (i.e. '100px' or '50%')
|
|
width: undefined,
|
|
// Specify a fixed height for the chart as a string (i.e. '100px' or '50%')
|
|
height: undefined,
|
|
// Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value
|
|
low: undefined,
|
|
// Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value
|
|
high: undefined,
|
|
// Padding of the chart drawing area to the container element and labels
|
|
chartPadding: 5,
|
|
// Specify the distance in pixel of bars in a group
|
|
seriesBarDistance: 15,
|
|
// Override the class names that get used to generate the SVG structure of the chart
|
|
classNames: {
|
|
chart: 'ct-chart-bar',
|
|
label: 'ct-label',
|
|
labelGroup: 'ct-labels',
|
|
series: 'ct-series',
|
|
bar: 'ct-bar',
|
|
grid: 'ct-grid',
|
|
gridGroup: 'ct-grids',
|
|
vertical: 'ct-vertical',
|
|
horizontal: 'ct-horizontal'
|
|
}
|
|
};
|
|
</code></pre><pre class="api-example"><code class="js">// Create a simple bar chart
|
|
var data = {
|
|
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
|
|
series: [
|
|
[5, 2, 4, 2, 0]
|
|
]
|
|
};
|
|
|
|
// 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.
|
|
new Chartist.Bar('.ct-chart', data);
|
|
</code></pre><pre class="api-example"><code class="js">// This example creates a bipolar grouped bar chart where the boundaries are limitted to -10 and 10
|
|
new Chartist.Bar('.ct-chart', {
|
|
labels: [1, 2, 3, 4, 5, 6, 7],
|
|
series: [
|
|
[1, 3, 2, -5, -3, 1, -6],
|
|
[-5, -2, -4, -1, 2, -3, 1]
|
|
]
|
|
}, {
|
|
seriesBarDistance: 12,
|
|
low: -10,
|
|
high: 10
|
|
});</code></pre></div></article></div></header></section></div><aside class="side-notes"></aside></section><section class="documentation-section full"><header><h3>line.js</h3></header><div class="content"><section class="sub-section"><header><h4 id="module-chartistline">Module Chartist.Line</h4><div class="module-description"><p>The Chartist line chart can be used to draw Line or Scatter charts. If used in the browser you can access the global <code>Chartist</code> namespace where you find the <code>Line</code> function as a main entry point.</p></div><div class="module-members"><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistline-function-line"><span class="member-tag">function</span> Line()</h5><button class="api-code-button" data-toggle-visible="#chartistline-function-line-code">Show code</button></header><pre id="chartistline-function-line-code">
|
|
<code class="javascript">function Line(query, data, options, responsiveOptions) {
|
|
Chartist.Line.super.constructor.call(this,
|
|
query,
|
|
data,
|
|
Chartist.extend({}, defaultOptions, options),
|
|
responsiveOptions);
|
|
}
|
|
|
|
// Creating line chart type in Chartist namespace
|
|
Chartist.Line = Chartist.Base.extend({
|
|
constructor: Line,
|
|
createChart: createChart
|
|
});
|
|
|
|
}(window, document, Chartist));</code>
|
|
</pre><div class="member-content"><div class="description"><p>This method creates a new line chart.</p></div><h6>Parameters</h6><div class="param"><code>query</code> ( <span class="param-type"><code>String</code></span> <span class="param-type"><code>Node</code></span> )<div class="param-description">A selector query string or directly a DOM element</div></div><div class="param"><code>data</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The data object that needs to consist of a labels and a series array</div></div><div class="param"><code>[options]</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The options object with options that override the default options. Check the examples for a detailed list.</div></div><div class="param"><code>[responsiveOptions]</code> ( <span class="param-type"><code>Array</code></span> )<div class="param-description">Specify an array of responsive option arrays which are a media query and options object pair => [[mediaQueryString, optionsObject],[more...]]</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Object</code></span> )<div class="param-description">An object which exposes the API for the created chart</div></div><h6>Examples</h6><pre class="api-example"><code class="js">// These are the default options of the line chart
|
|
var options = {
|
|
// Options for X-Axis
|
|
axisX: {
|
|
// The offset of the labels to the chart area
|
|
offset: 30,
|
|
// Allows you to correct label positioning on this axis by positive or negative x and y offset.
|
|
labelOffset: {
|
|
x: 0,
|
|
y: 0
|
|
},
|
|
// If labels should be shown or not
|
|
showLabel: true,
|
|
// If the axis grid should be drawn or not
|
|
showGrid: true,
|
|
// Interpolation function that allows you to intercept the value from the axis label
|
|
labelInterpolationFnc: function(value){return value;}
|
|
},
|
|
// Options for Y-Axis
|
|
axisY: {
|
|
// The offset of the labels to the chart area
|
|
offset: 40,
|
|
// Allows you to correct label positioning on this axis by positive or negative x and y offset.
|
|
labelOffset: {
|
|
x: 0,
|
|
y: 0
|
|
},
|
|
// If labels should be shown or not
|
|
showLabel: true,
|
|
// If the axis grid should be drawn or not
|
|
showGrid: true,
|
|
// Interpolation function that allows you to intercept the value from the axis label
|
|
labelInterpolationFnc: function(value){return value;},
|
|
// This value specifies the minimum height in pixel of the scale steps
|
|
scaleMinSpace: 30
|
|
},
|
|
// Specify a fixed width for the chart as a string (i.e. '100px' or '50%')
|
|
width: undefined,
|
|
// Specify a fixed height for the chart as a string (i.e. '100px' or '50%')
|
|
height: undefined,
|
|
// If the line should be drawn or not
|
|
showLine: true,
|
|
// If dots should be drawn or not
|
|
showPoint: true,
|
|
// If the line chart should draw an area
|
|
showArea: false,
|
|
// The base for the area chart that will be used to close the area shape (is normally 0)
|
|
areaBase: 0,
|
|
// Specify if the lines should be smoothed (Catmull-Rom-Splines will be used)
|
|
lineSmooth: true,
|
|
// Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value
|
|
low: undefined,
|
|
// Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value
|
|
high: undefined,
|
|
// Padding of the chart drawing area to the container element and labels
|
|
chartPadding: 5,
|
|
// Override the class names that get used to generate the SVG structure of the chart
|
|
classNames: {
|
|
chart: 'ct-chart-line',
|
|
label: 'ct-label',
|
|
labelGroup: 'ct-labels',
|
|
series: 'ct-series',
|
|
line: 'ct-line',
|
|
point: 'ct-point',
|
|
area: 'ct-area',
|
|
grid: 'ct-grid',
|
|
gridGroup: 'ct-grids',
|
|
vertical: 'ct-vertical',
|
|
horizontal: 'ct-horizontal'
|
|
}
|
|
};
|
|
</code></pre><pre class="api-example"><code class="js">// Create a simple line chart
|
|
var data = {
|
|
// A labels array that can contain any sort of values
|
|
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
|
|
// Our series array that contains series objects or in this case series data arrays
|
|
series: [
|
|
[5, 2, 4, 2, 0]
|
|
]
|
|
};
|
|
|
|
// As options we currently only set a static size of 300x200 px
|
|
var options = {
|
|
width: '300px',
|
|
height: '200px'
|
|
};
|
|
|
|
// 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
|
|
new Chartist.Line('.ct-chart', data, options);
|
|
</code></pre><pre class="api-example"><code class="js">// Create a line chart with responsive options
|
|
|
|
var data = {
|
|
// A labels array that can contain any sort of values
|
|
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
|
|
// Our series array that contains series objects or in this case series data arrays
|
|
series: [
|
|
[5, 2, 4, 2, 0]
|
|
]
|
|
};
|
|
|
|
// In adition to the regular options we specify responsive option overrides that will override the default configutation based on the matching media queries.
|
|
var responsiveOptions = [
|
|
['screen and (min-width: 641px) and (max-width: 1024px)', {
|
|
showPoint: false,
|
|
axisX: {
|
|
labelInterpolationFnc: function(value) {
|
|
// Will return Mon, Tue, Wed etc. on medium screens
|
|
return value.slice(0, 3);
|
|
}
|
|
}
|
|
}],
|
|
['screen and (max-width: 640px)', {
|
|
showLine: false,
|
|
axisX: {
|
|
labelInterpolationFnc: function(value) {
|
|
// Will return M, T, W etc. on small screens
|
|
return value[0];
|
|
}
|
|
}
|
|
}]
|
|
];
|
|
|
|
new Chartist.Line('.ct-chart', data, null, responsiveOptions);</code></pre></div></article></div></header></section></div><aside class="side-notes"></aside></section><section class="documentation-section full"><header><h3>pie.js</h3></header><div class="content"><section class="sub-section"><header><h4 id="module-chartistpie">Module Chartist.Pie</h4><div class="module-description"><p>The pie chart module of Chartist that can be used to draw pie, donut or gauge charts</p></div><div class="module-members"><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistpie-function-pie"><span class="member-tag">function</span> Pie()</h5><button class="api-code-button" data-toggle-visible="#chartistpie-function-pie-code">Show code</button></header><pre id="chartistpie-function-pie-code">
|
|
<code class="javascript">function Pie(query, data, options, responsiveOptions) {
|
|
Chartist.Pie.super.constructor.call(this,
|
|
query,
|
|
data,
|
|
Chartist.extend({}, defaultOptions, options),
|
|
responsiveOptions);
|
|
}
|
|
|
|
// Creating pie chart type in Chartist namespace
|
|
Chartist.Pie = Chartist.Base.extend({
|
|
constructor: Pie,
|
|
createChart: createChart,
|
|
determineAnchorPosition: determineAnchorPosition
|
|
});
|
|
|
|
}(window, document, Chartist));</code>
|
|
</pre><div class="member-content"><div class="description"><p>This method creates a new pie chart and returns an object that can be used to redraw the chart.</p></div><h6>Parameters</h6><div class="param"><code>query</code> ( <span class="param-type"><code>String</code></span> <span class="param-type"><code>Node</code></span> )<div class="param-description">A selector query string or directly a DOM element</div></div><div class="param"><code>data</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">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.</div></div><div class="param"><code>[options]</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The options object with options that override the default options. Check the examples for a detailed list.</div></div><div class="param"><code>[responsiveOptions]</code> ( <span class="param-type"><code>Array</code></span> )<div class="param-description">Specify an array of responsive option arrays which are a media query and options object pair => [[mediaQueryString, optionsObject],[more...]]</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Object</code></span> )<div class="param-description">An object with a version and an update method to manually redraw the chart</div></div><h6>Examples</h6><pre class="api-example"><code class="js">// Default options of the pie chart
|
|
var defaultOptions = {
|
|
// Specify a fixed width for the chart as a string (i.e. '100px' or '50%')
|
|
width: undefined,
|
|
// Specify a fixed height for the chart as a string (i.e. '100px' or '50%')
|
|
height: undefined,
|
|
// Padding of the chart drawing area to the container element and labels
|
|
chartPadding: 5,
|
|
// Override the class names that get used to generate the SVG structure of the chart
|
|
classNames: {
|
|
chart: 'ct-chart-pie',
|
|
series: 'ct-series',
|
|
slice: 'ct-slice',
|
|
donut: 'ct-donut',
|
|
label: 'ct-label'
|
|
},
|
|
// The start angle of the pie chart in degrees where 0 points north. A higher value offsets the start angle clockwise.
|
|
startAngle: 0,
|
|
// 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.
|
|
total: undefined,
|
|
// If specified the donut CSS classes will be used and strokes will be drawn instead of pie slices.
|
|
donut: false,
|
|
// Specify the donut stroke width, currently done in javascript for convenience. May move to CSS styles in the future.
|
|
donutWidth: 60,
|
|
// If a label should be shown or not
|
|
showLabel: true,
|
|
// 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.
|
|
labelOffset: 0,
|
|
// An interpolation function for the label value
|
|
labelInterpolationFnc: function(value, index) {return value;},
|
|
// 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.
|
|
labelDirection: 'neutral'
|
|
};
|
|
</code></pre><pre class="api-example"><code class="js">// Simple pie chart example with four series
|
|
new Chartist.Pie('.ct-chart', {
|
|
series: [10, 2, 4, 3]
|
|
});
|
|
</code></pre><pre class="api-example"><code class="js">// Drawing a donut chart
|
|
new Chartist.Pie('.ct-chart', {
|
|
series: [10, 2, 4, 3]
|
|
}, {
|
|
donut: true
|
|
});
|
|
</code></pre><pre class="api-example"><code class="js">// Using donut, startAngle and total to draw a gauge chart
|
|
new Chartist.Pie('.ct-chart', {
|
|
series: [20, 10, 30, 40]
|
|
}, {
|
|
donut: true,
|
|
donutWidth: 20,
|
|
startAngle: 270,
|
|
total: 200
|
|
});
|
|
</code></pre><pre class="api-example"><code class="js">// Drawing a pie chart with padding and labels that are outside the pie
|
|
new Chartist.Pie('.ct-chart', {
|
|
series: [20, 10, 30, 40]
|
|
}, {
|
|
chartPadding: 30,
|
|
labelOffset: 50,
|
|
labelDirection: 'explode'
|
|
});</code></pre></div></article></div></header></section></div><aside class="side-notes"></aside></section><section class="documentation-section full"><header><h3>class.js</h3></header><div class="content"><section class="sub-section"><header><h4 id="module-chartistclass">Module Chartist.Class</h4><div class="module-description"><p>This module provides some basic prototype inheritance utilities.</p></div><div class="module-members"><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistclass-function-extend"><span class="member-tag">function</span> extend()</h5><button class="api-code-button" data-toggle-visible="#chartistclass-function-extend-code">Show code</button></header><pre id="chartistclass-function-extend-code">
|
|
<code class="javascript">function extend(properties, superProtoOverride) {
|
|
var superProto = superProtoOverride || this.prototype || Chartist.Class;
|
|
var proto = Object.create(superProto);
|
|
|
|
Chartist.Class.cloneDefinitions(proto, properties);
|
|
|
|
var constr = function() {
|
|
var fn = proto.constructor || function () {},
|
|
instance;
|
|
|
|
// If this is linked to the Chartist namespace the constructor was not called with new
|
|
// To provide a fallback we will instantiate here and return the instance
|
|
instance = this === Chartist ? Object.create(proto) : this;
|
|
fn.apply(instance, Array.prototype.slice.call(arguments, 0));
|
|
|
|
// If this constructor was not called with new we need to return the instance
|
|
// This will not harm when the constructor has been called with new as the returned value is ignored
|
|
return instance;
|
|
};
|
|
|
|
constr.prototype = proto;
|
|
constr.super = superProto;
|
|
constr.extend = this.extend;
|
|
|
|
return constr;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Method to extend from current prototype.</p></div><h6>Parameters</h6><div class="param"><code>properties</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">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.</div></div><div class="param"><code>[superProtoOverride]</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">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.</div></div><h6>Examples</h6><pre class="api-example"><code class="js">var Fruit = Class.extend({
|
|
color: undefined,
|
|
sugar: undefined,
|
|
|
|
constructor: function(color, sugar) {
|
|
this.color = color;
|
|
this.sugar = sugar;
|
|
},
|
|
|
|
eat: function() {
|
|
this.sugar = 0;
|
|
return this;
|
|
}
|
|
});
|
|
|
|
var Banana = Fruit.extend({
|
|
length: undefined,
|
|
|
|
constructor: function(length, sugar) {
|
|
Banana.super.constructor.call(this, 'Yellow', sugar);
|
|
this.length = length;
|
|
}
|
|
});
|
|
|
|
var banana = new Banana(20, 40);
|
|
console.log('banana instanceof Fruit', banana instanceof Fruit);
|
|
console.log('Fruit is prototype of banana', Fruit.prototype.isPrototypeOf(banana));
|
|
console.log('bananas prototype is Fruit', Object.getPrototypeOf(banana) === Fruit.prototype);
|
|
console.log(banana.sugar);
|
|
console.log(banana.eat().sugar);
|
|
console.log(banana.color);</code></pre></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistclass-function-mix"><span class="member-tag">function</span> mix()</h5><button class="api-code-button" data-toggle-visible="#chartistclass-function-mix-code">Show code</button></header><pre id="chartistclass-function-mix-code">
|
|
<code class="javascript">function mix(mixProtoArr, properties) {
|
|
if(this !== Chartist.Class) {
|
|
throw new Error('Chartist.Class.mix should only be called on the type and never on an instance!');
|
|
}
|
|
|
|
// Make sure our mixin prototypes are the class objects and not the constructors
|
|
var superPrototypes = [{}]
|
|
.concat(mixProtoArr)
|
|
.map(function (prototype) {
|
|
return prototype instanceof Function ? prototype.prototype : prototype;
|
|
});
|
|
|
|
var mixedSuperProto = Chartist.Class.cloneDefinitions.apply(undefined, superPrototypes);
|
|
// Delete the constructor if present because we don't want to invoke a constructor on a mixed prototype
|
|
delete mixedSuperProto.constructor;
|
|
return this.extend(properties, mixedSuperProto);
|
|
}
|
|
|
|
// Variable argument list clones args > 0 into args[0] and retruns modified args[0]
|
|
function cloneDefinitions() {
|
|
var args = listToArray(arguments);
|
|
var target = args[0];
|
|
|
|
args.splice(1, args.length - 1).forEach(function (source) {
|
|
Object.getOwnPropertyNames(source).forEach(function (propName) {
|
|
// If this property already exist in target we delete it first
|
|
delete target[propName];
|
|
// Define the property with the descriptor from source
|
|
Object.defineProperty(target, propName,
|
|
Object.getOwnPropertyDescriptor(source, propName));
|
|
});
|
|
});
|
|
|
|
return target;
|
|
}
|
|
|
|
Chartist.Class = {
|
|
extend: extend,
|
|
mix: mix,
|
|
cloneDefinitions: cloneDefinitions
|
|
};
|
|
|
|
}(window, document, Chartist));</code>
|
|
</pre><div class="member-content"><div class="description"><p>Creates a mixin from multiple super prototypes.</p></div><h6>Parameters</h6><div class="param"><code>mixProtoArr</code> ( <span class="param-type"><code>Array</code></span> )<div class="param-description">An array of super prototypes or an array of super prototype constructors.</div></div><div class="param"><code>properties</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">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.</div></div><h6>Examples</h6><pre class="api-example"><code class="js">var Fruit = Class.extend({
|
|
color: undefined,
|
|
sugar: undefined,
|
|
|
|
constructor: function(color, sugar) {
|
|
this.color = color;
|
|
this.sugar = sugar;
|
|
},
|
|
|
|
eat: function() {
|
|
this.sugar = 0;
|
|
return this;
|
|
}
|
|
});
|
|
|
|
var Banana = Fruit.extend({
|
|
length: undefined,
|
|
|
|
constructor: function(length, sugar) {
|
|
Banana.super.constructor.call(this, 'Yellow', sugar);
|
|
this.length = length;
|
|
}
|
|
});
|
|
|
|
var banana = new Banana(20, 40);
|
|
console.log('banana instanceof Fruit', banana instanceof Fruit);
|
|
console.log('Fruit is prototype of banana', Fruit.prototype.isPrototypeOf(banana));
|
|
console.log('bananas prototype is Fruit', Object.getPrototypeOf(banana) === Fruit.prototype);
|
|
console.log(banana.sugar);
|
|
console.log(banana.eat().sugar);
|
|
console.log(banana.color);
|
|
|
|
|
|
var KCal = Class.extend({
|
|
sugar: 0,
|
|
|
|
constructor: function(sugar) {
|
|
this.sugar = sugar;
|
|
},
|
|
|
|
get kcal() {
|
|
return [this.sugar * 4, 'kcal'].join('');
|
|
}
|
|
});
|
|
|
|
var Nameable = Class.extend({
|
|
name: undefined,
|
|
|
|
constructor: function(name) {
|
|
this.name = name;
|
|
}
|
|
});
|
|
|
|
var NameableKCalBanana = Class.mix([Banana, KCal, Nameable], {
|
|
constructor: function(name, length, sugar) {
|
|
Nameable.prototype.constructor.call(this, name);
|
|
Banana.prototype.constructor.call(this, length, sugar);
|
|
},
|
|
|
|
toString: function() {
|
|
return [this.name, 'with', this.length + 'cm', 'and', this.kcal].join(' ');
|
|
}
|
|
});
|
|
|
|
|
|
|
|
var banana = new Banana(20, 40);
|
|
console.log('banana instanceof Fruit', banana instanceof Fruit);
|
|
console.log('Fruit is prototype of banana', Fruit.prototype.isPrototypeOf(banana));
|
|
console.log('bananas prototype is Fruit', Object.getPrototypeOf(banana) === Fruit.prototype);
|
|
console.log(banana.sugar);
|
|
console.log(banana.eat().sugar);
|
|
console.log(banana.color);
|
|
|
|
var superBanana = new NameableKCalBanana('Super Mixin Banana', 30, 80);
|
|
console.log(superBanana.toString());</code></pre></div></article></div></header></section></div><aside class="side-notes"></aside></section><section class="documentation-section full"><header><h3>core.js</h3></header><div class="content"><section class="sub-section"><header><h4 id="module-chartistcore">Module Chartist.Core</h4><div class="module-description"><p>The core module of Chartist that is mainly providing static functions and higher level functions for chart modules.</p></div><div class="module-members"><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-noop"><span class="member-tag">method</span> Chartist.noop()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-noop-code">Show code</button></header><pre id="chartistcore-method-noop-code">
|
|
<code class="javascript">Chartist.noop = function (n) {
|
|
return n;
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Helps to simplify functional style code</p></div><h6>Parameters</h6><div class="param"><code>n</code> ( <span class="param-type"><code>*</code></span> )<div class="param-description">This exact value will be returned by the noop function</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>*</code></span> )<div class="param-description">The same value that was provided to the n parameter</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-alphanumerate"><span class="member-tag">method</span> Chartist.alphaNumerate()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-alphanumerate-code">Show code</button></header><pre id="chartistcore-method-alphanumerate-code">
|
|
<code class="javascript">Chartist.alphaNumerate = function (n) {
|
|
// Limit to a-z
|
|
return String.fromCharCode(97 + n % 26);
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Generates a-z from a number 0 to 26</p></div><h6>Parameters</h6><div class="param"><code>n</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">A number from 0 to 26 that will result in a letter a-z</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>String</code></span> )<div class="param-description">A character from a-z based on the input number n</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-extend"><span class="member-tag">method</span> Chartist.extend()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-extend-code">Show code</button></header><pre id="chartistcore-method-extend-code">
|
|
<code class="javascript">Chartist.extend = function (target) {
|
|
target = target || {};
|
|
|
|
var sources = Array.prototype.slice.call(arguments, 1);
|
|
sources.forEach(function(source) {
|
|
for (var prop in source) {
|
|
if (typeof source[prop] === 'object' && !(source[prop] instanceof Array)) {
|
|
target[prop] = Chartist.extend(target[prop], source[prop]);
|
|
} else {
|
|
target[prop] = source[prop];
|
|
}
|
|
}
|
|
});
|
|
|
|
return target;
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Simple recursive object extend</p></div><h6>Parameters</h6><div class="param"><code>target</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">Target object where the source will be merged into</div></div><div class="param"><code>sources</code> ( <span class="param-type"><code>Object...</code></span> )<div class="param-description">This object (objects) will be merged into target and then target is returned</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Object</code></span> )<div class="param-description">An object that has the same reference as target but is extended and merged with the properties of source</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-stripunit"><span class="member-tag">method</span> Chartist.stripUnit()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-stripunit-code">Show code</button></header><pre id="chartistcore-method-stripunit-code">
|
|
<code class="javascript">Chartist.stripUnit = function(value) {
|
|
if(typeof value === 'string') {
|
|
value = value.replace(/[^0-9\+-\.]/g, '');
|
|
}
|
|
|
|
return +value;
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Converts a string to a number while removing the unit if present. If a number is passed then this will be returned unmodified.</p></div><h6>Parameters</h6><div class="param"><code>value</code> ( <span class="param-type"><code>String</code></span> <span class="param-type"><code>Number</code></span> )<div class="param-description"></div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-ensureunit"><span class="member-tag">method</span> Chartist.ensureUnit()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-ensureunit-code">Show code</button></header><pre id="chartistcore-method-ensureunit-code">
|
|
<code class="javascript">Chartist.ensureUnit = function(value, unit) {
|
|
if(typeof value === 'number') {
|
|
value = value + unit;
|
|
}
|
|
|
|
return value;
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Converts a number to a string with a unit. If a string is passed then this will be returned unmodified.</p></div><h6>Parameters</h6><div class="param"><code>value</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description"></div></div><div class="param"><code>unit</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description"></div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-queryselector"><span class="member-tag">method</span> Chartist.querySelector()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-queryselector-code">Show code</button></header><pre id="chartistcore-method-queryselector-code">
|
|
<code class="javascript">Chartist.querySelector = function(query) {
|
|
return query instanceof Node ? query : document.querySelector(query);
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>This is a wrapper around document.querySelector that will return the query if it's already of type Node</p></div><h6>Parameters</h6><div class="param"><code>query</code> ( <span class="param-type"><code>String</code></span> <span class="param-type"><code>Node</code></span> )<div class="param-description">The query to use for selecting a Node or a DOM node that will be returned directly</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Node</code></span> )<div class="param-description"></div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-createsvg"><span class="member-tag">method</span> Chartist.createSvg()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-createsvg-code">Show code</button></header><pre id="chartistcore-method-createsvg-code">
|
|
<code class="javascript">Chartist.createSvg = function (container, width, height, className) {
|
|
var svg;
|
|
|
|
width = width || '100%';
|
|
height = height || '100%';
|
|
|
|
svg = container.querySelector('svg');
|
|
if(svg) {
|
|
container.removeChild(svg);
|
|
}
|
|
|
|
// Create svg object with width and height or use 100% as default
|
|
svg = new Chartist.Svg('svg').attr({
|
|
width: width,
|
|
height: height
|
|
}).addClass(className).attr({
|
|
style: 'width: ' + width + '; height: ' + height + ';'
|
|
});
|
|
|
|
// Add the DOM node to our container
|
|
container.appendChild(svg._node);
|
|
|
|
return svg;
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Create or reinitialize the SVG element for the chart</p></div><h6>Parameters</h6><div class="param"><code>container</code> ( <span class="param-type"><code>Node</code></span> )<div class="param-description">The containing DOM Node object that will be used to plant the SVG element</div></div><div class="param"><code>width</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">Set the width of the SVG element. Default is 100%</div></div><div class="param"><code>height</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">Set the height of the SVG element. Default is 100%</div></div><div class="param"><code>className</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">Specify a class to be added to the SVG element</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Object</code></span> )<div class="param-description">The created/reinitialized SVG element</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-getdataarray"><span class="member-tag">method</span> Chartist.getDataArray()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-getdataarray-code">Show code</button></header><pre id="chartistcore-method-getdataarray-code">
|
|
<code class="javascript">Chartist.getDataArray = function (data) {
|
|
var array = [];
|
|
|
|
for (var i = 0; i < data.series.length; i++) {
|
|
// If the series array contains an object with a data property we will use the property
|
|
// otherwise the value directly (array or number)
|
|
array[i] = typeof(data.series[i]) === 'object' && data.series[i].data !== undefined ?
|
|
data.series[i].data : data.series[i];
|
|
|
|
// Convert values to number
|
|
for (var j = 0; j < array[i].length; j++) {
|
|
array[i][j] = +array[i][j];
|
|
}
|
|
}
|
|
|
|
return array;
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Convert data series into plain array</p></div><h6>Parameters</h6><div class="param"><code>data</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The series object that contains the data to be visualized in the chart</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Array</code></span> )<div class="param-description">A plain array that contains the data to be visualized in the chart</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-normalizedataarray"><span class="member-tag">method</span> Chartist.normalizeDataArray()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-normalizedataarray-code">Show code</button></header><pre id="chartistcore-method-normalizedataarray-code">
|
|
<code class="javascript">Chartist.normalizeDataArray = function (dataArray, length) {
|
|
for (var i = 0; i < dataArray.length; i++) {
|
|
if (dataArray[i].length === length) {
|
|
continue;
|
|
}
|
|
|
|
for (var j = dataArray[i].length; j < length; j++) {
|
|
dataArray[i][j] = 0;
|
|
}
|
|
}
|
|
|
|
return dataArray;
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Adds missing values at the end of the array. This array contains the data, that will be visualized in the chart</p></div><h6>Parameters</h6><div class="param"><code>dataArray</code> ( <span class="param-type"><code>Array</code></span> )<div class="param-description">The array that contains the data to be visualized in the chart. The array in this parameter will be modified by function.</div></div><div class="param"><code>length</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The length of the x-axis data array.</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Array</code></span> )<div class="param-description">The array that got updated with missing values.</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-orderofmagnitude"><span class="member-tag">method</span> Chartist.orderOfMagnitude()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-orderofmagnitude-code">Show code</button></header><pre id="chartistcore-method-orderofmagnitude-code">
|
|
<code class="javascript">Chartist.orderOfMagnitude = function (value) {
|
|
return Math.floor(Math.log(Math.abs(value)) / Math.LN10);
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Calculate the order of magnitude for the chart scale</p></div><h6>Parameters</h6><div class="param"><code>value</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The value Range of the chart</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Number</code></span> )<div class="param-description">The order of magnitude</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-projectlength"><span class="member-tag">method</span> Chartist.projectLength()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-projectlength-code">Show code</button></header><pre id="chartistcore-method-projectlength-code">
|
|
<code class="javascript">Chartist.projectLength = function (svg, length, bounds, options) {
|
|
var availableHeight = Chartist.getAvailableHeight(svg, options);
|
|
return (length / bounds.range * availableHeight);
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Project a data length into screen coordinates (pixels)</p></div><h6>Parameters</h6><div class="param"><code>svg</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The svg element for the chart</div></div><div class="param"><code>length</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">Single data value from a series array</div></div><div class="param"><code>bounds</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">All the values to set the bounds of the chart</div></div><div class="param"><code>options</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The Object that contains all the optional values for the chart</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Number</code></span> )<div class="param-description">The projected data length in pixels</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-getavailableheight"><span class="member-tag">method</span> Chartist.getAvailableHeight()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-getavailableheight-code">Show code</button></header><pre id="chartistcore-method-getavailableheight-code">
|
|
<code class="javascript">Chartist.getAvailableHeight = function (svg, options) {
|
|
return Math.max((Chartist.stripUnit(options.height) || svg.height()) - (options.chartPadding * 2) - options.axisX.offset, 0);
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Get the height of the area in the chart for the data series</p></div><h6>Parameters</h6><div class="param"><code>svg</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The svg element for the chart</div></div><div class="param"><code>options</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The Object that contains all the optional values for the chart</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Number</code></span> )<div class="param-description">The height of the area in the chart for the data series</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-gethighlow"><span class="member-tag">method</span> Chartist.getHighLow()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-gethighlow-code">Show code</button></header><pre id="chartistcore-method-gethighlow-code">
|
|
<code class="javascript">Chartist.getHighLow = function (dataArray) {
|
|
var i,
|
|
j,
|
|
highLow = {
|
|
high: -Number.MAX_VALUE,
|
|
low: Number.MAX_VALUE
|
|
};
|
|
|
|
for (i = 0; i < dataArray.length; i++) {
|
|
for (j = 0; j < dataArray[i].length; j++) {
|
|
if (dataArray[i][j] > highLow.high) {
|
|
highLow.high = dataArray[i][j];
|
|
}
|
|
|
|
if (dataArray[i][j] < highLow.low) {
|
|
highLow.low = dataArray[i][j];
|
|
}
|
|
}
|
|
}
|
|
|
|
return highLow;
|
|
};
|
|
|
|
// Find the highest and lowest values in a two dimensional array and calculate scale based on order of magnitude</code>
|
|
</pre><div class="member-content"><div class="description"><p>Get highest and lowest value of data array. This Array contains the data that will be visualized in the chart.</p></div><h6>Parameters</h6><div class="param"><code>dataArray</code> ( <span class="param-type"><code>Array</code></span> )<div class="param-description">The array that contains the data to be visualized in the chart</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Array</code></span> )<div class="param-description">The array that contains the highest and lowest value that will be visualized on the chart.</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-getbounds"><span class="member-tag">method</span> Chartist.getBounds()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-getbounds-code">Show code</button></header><pre id="chartistcore-method-getbounds-code">
|
|
<code class="javascript">Chartist.getBounds = function (svg, normalizedData, options, referenceValue) {
|
|
var i,
|
|
newMin,
|
|
newMax,
|
|
bounds = Chartist.getHighLow(normalizedData);
|
|
|
|
// Overrides of high / low from settings
|
|
bounds.high = +options.high || (options.high === 0 ? 0 : bounds.high);
|
|
bounds.low = +options.low || (options.low === 0 ? 0 : bounds.low);
|
|
|
|
// If high and low are the same because of misconfiguration or flat data (only the same value) we need
|
|
// to set the high or low to 0 depending on the polarity
|
|
if(bounds.high === bounds.low) {
|
|
// If both values are 0 we set high to 1
|
|
if(bounds.low === 0) {
|
|
bounds.high = 1;
|
|
} else if(bounds.low < 0) {
|
|
// If we have the same negative value for the bounds we set bounds.high to 0
|
|
bounds.high = 0;
|
|
} else {
|
|
// If we have the same positive value for the bounds we set bounds.low to 0
|
|
bounds.low = 0;
|
|
}
|
|
}
|
|
|
|
// Overrides of high / low based on reference value, it will make sure that the invisible reference value is
|
|
// used to generate the chart. This is useful when the chart always needs to contain the position of the
|
|
// invisible reference value in the view i.e. for bipolar scales.
|
|
if (referenceValue || referenceValue === 0) {
|
|
bounds.high = Math.max(referenceValue, bounds.high);
|
|
bounds.low = Math.min(referenceValue, bounds.low);
|
|
}
|
|
|
|
bounds.valueRange = bounds.high - bounds.low;
|
|
bounds.oom = Chartist.orderOfMagnitude(bounds.valueRange);
|
|
bounds.min = Math.floor(bounds.low / Math.pow(10, bounds.oom)) * Math.pow(10, bounds.oom);
|
|
bounds.max = Math.ceil(bounds.high / Math.pow(10, bounds.oom)) * Math.pow(10, bounds.oom);
|
|
bounds.range = bounds.max - bounds.min;
|
|
bounds.step = Math.pow(10, bounds.oom);
|
|
bounds.numberOfSteps = Math.round(bounds.range / bounds.step);
|
|
|
|
// Optimize scale step by checking if subdivision is possible based on horizontalGridMinSpace
|
|
// If we are already below the scaleMinSpace value we will scale up
|
|
var length = Chartist.projectLength(svg, bounds.step, bounds, options),
|
|
scaleUp = length < options.axisY.scaleMinSpace;
|
|
|
|
while (true) {
|
|
if (scaleUp && Chartist.projectLength(svg, bounds.step, bounds, options) <= options.axisY.scaleMinSpace) {
|
|
bounds.step *= 2;
|
|
} else if (!scaleUp && Chartist.projectLength(svg, bounds.step / 2, bounds, options) >= options.axisY.scaleMinSpace) {
|
|
bounds.step /= 2;
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Narrow min and max based on new step
|
|
newMin = bounds.min;
|
|
newMax = bounds.max;
|
|
for (i = bounds.min; i <= bounds.max; i += bounds.step) {
|
|
if (i + bounds.step < bounds.low) {
|
|
newMin += bounds.step;
|
|
}
|
|
|
|
if (i - bounds.step >= bounds.high) {
|
|
newMax -= bounds.step;
|
|
}
|
|
}
|
|
bounds.min = newMin;
|
|
bounds.max = newMax;
|
|
bounds.range = bounds.max - bounds.min;
|
|
|
|
bounds.values = [];
|
|
for (i = bounds.min; i <= bounds.max; i += bounds.step) {
|
|
bounds.values.push(i);
|
|
}
|
|
|
|
return bounds;
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Calculate and retrieve all the bounds for the chart and return them in one array</p></div><h6>Parameters</h6><div class="param"><code>svg</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The svg element for the chart</div></div><div class="param"><code>normalizedData</code> ( <span class="param-type"><code>Array</code></span> )<div class="param-description">The array that got updated with missing values.</div></div><div class="param"><code>options</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The Object that contains all the optional values for the chart</div></div><div class="param"><code>referenceValue</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The reference value for the chart.</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Object</code></span> )<div class="param-description">All the values to set the bounds of the chart</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-polartocartesian"><span class="member-tag">method</span> Chartist.polarToCartesian()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-polartocartesian-code">Show code</button></header><pre id="chartistcore-method-polartocartesian-code">
|
|
<code class="javascript">Chartist.polarToCartesian = function (centerX, centerY, radius, angleInDegrees) {
|
|
var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
|
|
|
|
return {
|
|
x: centerX + (radius * Math.cos(angleInRadians)),
|
|
y: centerY + (radius * Math.sin(angleInRadians))
|
|
};
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Calculate cartesian coordinates of polar coordinates</p></div><h6>Parameters</h6><div class="param"><code>centerX</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">X-axis coordinates of center point of circle segment</div></div><div class="param"><code>centerY</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">X-axis coordinates of center point of circle segment</div></div><div class="param"><code>radius</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">Radius of circle segment</div></div><div class="param"><code>angleInDegrees</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">Angle of circle segment in degrees</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Number</code></span> )<div class="param-description">Coordinates of point on circumference</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-createchartrect"><span class="member-tag">method</span> Chartist.createChartRect()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-createchartrect-code">Show code</button></header><pre id="chartistcore-method-createchartrect-code">
|
|
<code class="javascript">Chartist.createChartRect = function (svg, options) {
|
|
var yOffset = options.axisY ? options.axisY.offset : 0,
|
|
xOffset = options.axisX ? options.axisX.offset : 0;
|
|
|
|
return {
|
|
x1: options.chartPadding + yOffset,
|
|
y1: Math.max((Chartist.stripUnit(options.height) || svg.height()) - options.chartPadding - xOffset, options.chartPadding),
|
|
x2: Math.max((Chartist.stripUnit(options.width) || svg.width()) - options.chartPadding, options.chartPadding + yOffset),
|
|
y2: options.chartPadding,
|
|
width: function () {
|
|
return this.x2 - this.x1;
|
|
},
|
|
height: function () {
|
|
return this.y1 - this.y2;
|
|
}
|
|
};
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Initialize chart drawing rectangle (area where chart is drawn) x1,y1 = bottom left / x2,y2 = top right</p></div><h6>Parameters</h6><div class="param"><code>svg</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The svg element for the chart</div></div><div class="param"><code>options</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The Object that contains all the optional values for the chart</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Object</code></span> )<div class="param-description">The chart rectangles coordinates inside the svg element plus the rectangles measurements</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-createxaxis"><span class="member-tag">method</span> Chartist.createXAxis()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-createxaxis-code">Show code</button></header><pre id="chartistcore-method-createxaxis-code">
|
|
<code class="javascript">Chartist.createXAxis = function (chartRect, data, grid, labels, options, eventEmitter, supportsForeignObject) {
|
|
// Create X-Axis
|
|
data.labels.forEach(function (value, index) {
|
|
var interpolatedValue = options.axisX.labelInterpolationFnc(value, index),
|
|
width = chartRect.width() / data.labels.length,
|
|
height = options.axisX.offset,
|
|
pos = chartRect.x1 + width * index;
|
|
|
|
// If interpolated value returns falsey (except 0) we don't draw the grid line
|
|
if (!interpolatedValue && interpolatedValue !== 0) {
|
|
return;
|
|
}
|
|
|
|
if (options.axisX.showGrid) {
|
|
var gridElement = grid.elem('line', {
|
|
x1: pos,
|
|
y1: chartRect.y1,
|
|
x2: pos,
|
|
y2: chartRect.y2
|
|
}, [options.classNames.grid, options.classNames.horizontal].join(' '));
|
|
|
|
// Event for grid draw
|
|
eventEmitter.emit('draw', {
|
|
type: 'grid',
|
|
axis: 'x',
|
|
index: index,
|
|
group: grid,
|
|
element: gridElement,
|
|
x1: pos,
|
|
y1: chartRect.y1,
|
|
x2: pos,
|
|
y2: chartRect.y2
|
|
});
|
|
}
|
|
|
|
if (options.axisX.showLabel) {
|
|
var labelPosition = {
|
|
x: pos + options.axisX.labelOffset.x,
|
|
y: chartRect.y1 + options.axisX.labelOffset.y + (supportsForeignObject ? 5 : 20)
|
|
};
|
|
|
|
var labelElement = Chartist.createLabel(labels, '' + interpolatedValue, {
|
|
x: labelPosition.x,
|
|
y: labelPosition.y,
|
|
width: width,
|
|
height: height,
|
|
style: 'overflow: visible;'
|
|
}, [options.classNames.label, options.classNames.horizontal].join(' '), supportsForeignObject);
|
|
|
|
eventEmitter.emit('draw', {
|
|
type: 'label',
|
|
axis: 'x',
|
|
index: index,
|
|
group: labels,
|
|
element: labelElement,
|
|
text: '' + interpolatedValue,
|
|
x: labelPosition.x,
|
|
y: labelPosition.y,
|
|
width: width,
|
|
height: height,
|
|
// TODO: Remove in next major release
|
|
get space() {
|
|
window.console.warn('EventEmitter: space is deprecated, use width or height instead.');
|
|
return this.width;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Generate grid lines and labels for the x-axis into grid and labels group SVG elements</p></div><h6>Parameters</h6><div class="param"><code>chartRect</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The rectangle that sets the bounds for the chart in the svg element</div></div><div class="param"><code>data</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The Object that contains the data to be visualized in the chart</div></div><div class="param"><code>grid</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">Chartist.Svg wrapper object to be filled with the grid lines of the chart</div></div><div class="param"><code>labels</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">Chartist.Svg wrapper object to be filled with the lables of the chart</div></div><div class="param"><code>options</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The Object that contains all the optional values for the chart</div></div><div class="param"><code>eventEmitter</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The passed event emitter will be used to emit draw events for labels and gridlines</div></div><div class="param"><code>supportsForeignObject</code> ( <span class="param-type"><code>Boolean</code></span> )<div class="param-description">If this is true then a foreignObject will be used instead of a text element</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-createyaxis"><span class="member-tag">method</span> Chartist.createYAxis()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-createyaxis-code">Show code</button></header><pre id="chartistcore-method-createyaxis-code">
|
|
<code class="javascript">Chartist.createYAxis = function (chartRect, bounds, grid, labels, options, eventEmitter, supportsForeignObject) {
|
|
// Create Y-Axis
|
|
bounds.values.forEach(function (value, index) {
|
|
var interpolatedValue = options.axisY.labelInterpolationFnc(value, index),
|
|
width = options.axisY.offset,
|
|
height = chartRect.height() / bounds.values.length,
|
|
pos = chartRect.y1 - height * index;
|
|
|
|
// If interpolated value returns falsey (except 0) we don't draw the grid line
|
|
if (!interpolatedValue && interpolatedValue !== 0) {
|
|
return;
|
|
}
|
|
|
|
if (options.axisY.showGrid) {
|
|
var gridElement = grid.elem('line', {
|
|
x1: chartRect.x1,
|
|
y1: pos,
|
|
x2: chartRect.x2,
|
|
y2: pos
|
|
}, [options.classNames.grid, options.classNames.vertical].join(' '));
|
|
|
|
// Event for grid draw
|
|
eventEmitter.emit('draw', {
|
|
type: 'grid',
|
|
axis: 'y',
|
|
index: index,
|
|
group: grid,
|
|
element: gridElement,
|
|
x1: chartRect.x1,
|
|
y1: pos,
|
|
x2: chartRect.x2,
|
|
y2: pos
|
|
});
|
|
}
|
|
|
|
if (options.axisY.showLabel) {
|
|
var labelPosition = {
|
|
x: options.chartPadding + options.axisY.labelOffset.x + (supportsForeignObject ? -10 : 0),
|
|
y: pos + options.axisY.labelOffset.y + (supportsForeignObject ? -15 : 0)
|
|
};
|
|
|
|
var labelElement = Chartist.createLabel(labels, '' + interpolatedValue, {
|
|
x: labelPosition.x,
|
|
y: labelPosition.y,
|
|
width: width,
|
|
height: height,
|
|
style: 'overflow: visible;'
|
|
}, [options.classNames.label, options.classNames.vertical].join(' '), supportsForeignObject);
|
|
|
|
eventEmitter.emit('draw', {
|
|
type: 'label',
|
|
axis: 'y',
|
|
index: index,
|
|
group: labels,
|
|
element: labelElement,
|
|
text: '' + interpolatedValue,
|
|
x: labelPosition.x,
|
|
y: labelPosition.y,
|
|
width: width,
|
|
height: height,
|
|
// TODO: Remove in next major release
|
|
get space() {
|
|
window.console.warn('EventEmitter: space is deprecated, use width or height instead.');
|
|
return this.height;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Generate grid lines and labels for the y-axis into grid and labels group SVG elements</p></div><h6>Parameters</h6><div class="param"><code>chartRect</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The rectangle that sets the bounds for the chart in the svg element</div></div><div class="param"><code>bounds</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">All the values to set the bounds of the chart</div></div><div class="param"><code>grid</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">Chartist.Svg wrapper object to be filled with the grid lines of the chart</div></div><div class="param"><code>labels</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">Chartist.Svg wrapper object to be filled with the lables of the chart</div></div><div class="param"><code>options</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The Object that contains all the optional values for the chart</div></div><div class="param"><code>eventEmitter</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The passed event emitter will be used to emit draw events for labels and gridlines</div></div><div class="param"><code>supportsForeignObject</code> ( <span class="param-type"><code>Boolean</code></span> )<div class="param-description">If this is true then a foreignObject will be used instead of a text element</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-projectpoint"><span class="member-tag">method</span> Chartist.projectPoint()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-projectpoint-code">Show code</button></header><pre id="chartistcore-method-projectpoint-code">
|
|
<code class="javascript">Chartist.projectPoint = function (chartRect, bounds, data, index) {
|
|
return {
|
|
x: chartRect.x1 + chartRect.width() / data.length * index,
|
|
y: chartRect.y1 - chartRect.height() * (data[index] - bounds.min) / (bounds.range + bounds.step)
|
|
};
|
|
};
|
|
|
|
// TODO: With multiple media queries the handleMediaChange function is triggered too many times, only need one</code>
|
|
</pre><div class="member-content"><div class="description"><p>Determine the current point on the svg element to draw the data series</p></div><h6>Parameters</h6><div class="param"><code>chartRect</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The rectangle that sets the bounds for the chart in the svg element</div></div><div class="param"><code>bounds</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">All the values to set the bounds of the chart</div></div><div class="param"><code>data</code> ( <span class="param-type"><code>Array</code></span> )<div class="param-description">The array that contains the data to be visualized in the chart</div></div><div class="param"><code>index</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The index of the current project point</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Object</code></span> )<div class="param-description">The coordinates object of the current project point containing an x and y number property</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-optionsprovider"><span class="member-tag">method</span> Chartist.optionsProvider()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-optionsprovider-code">Show code</button></header><pre id="chartistcore-method-optionsprovider-code">
|
|
<code class="javascript">Chartist.optionsProvider = function (options, responsiveOptions, eventEmitter) {
|
|
var baseOptions = Chartist.extend({}, options),
|
|
currentOptions,
|
|
mediaQueryListeners = [],
|
|
i;
|
|
|
|
function updateCurrentOptions() {
|
|
var previousOptions = currentOptions;
|
|
currentOptions = Chartist.extend({}, baseOptions);
|
|
|
|
if (responsiveOptions) {
|
|
for (i = 0; i < responsiveOptions.length; i++) {
|
|
var mql = window.matchMedia(responsiveOptions[i][0]);
|
|
if (mql.matches) {
|
|
currentOptions = Chartist.extend(currentOptions, responsiveOptions[i][1]);
|
|
}
|
|
}
|
|
}
|
|
|
|
if(eventEmitter) {
|
|
eventEmitter.emit('optionsChanged', {
|
|
previousOptions: previousOptions,
|
|
currentOptions: currentOptions
|
|
});
|
|
}
|
|
}
|
|
|
|
function removeMediaQueryListeners() {
|
|
mediaQueryListeners.forEach(function(mql) {
|
|
mql.removeListener(updateCurrentOptions);
|
|
});
|
|
}
|
|
|
|
if (!window.matchMedia) {
|
|
throw 'window.matchMedia not found! Make sure you\'re using a polyfill.';
|
|
} else if (responsiveOptions) {
|
|
|
|
for (i = 0; i < responsiveOptions.length; i++) {
|
|
var mql = window.matchMedia(responsiveOptions[i][0]);
|
|
mql.addListener(updateCurrentOptions);
|
|
mediaQueryListeners.push(mql);
|
|
}
|
|
}
|
|
// Execute initially so we get the correct options
|
|
updateCurrentOptions();
|
|
|
|
return {
|
|
get currentOptions() {
|
|
return Chartist.extend({}, currentOptions);
|
|
},
|
|
removeMediaQueryListeners: removeMediaQueryListeners
|
|
};
|
|
};
|
|
|
|
// Plugin registry for plugin authors to register their plugins
|
|
Chartist.plugins = {};
|
|
|
|
//http://schepers.cc/getting-to-the-point
|
|
Chartist.catmullRom2bezier = function (crp, z) {
|
|
var d = [];
|
|
for (var i = 0, iLen = crp.length; iLen - 2 * !z > i; i += 2) {
|
|
var p = [
|
|
{x: +crp[i - 2], y: +crp[i - 1]},
|
|
{x: +crp[i], y: +crp[i + 1]},
|
|
{x: +crp[i + 2], y: +crp[i + 3]},
|
|
{x: +crp[i + 4], y: +crp[i + 5]}
|
|
];
|
|
if (z) {
|
|
if (!i) {
|
|
p[0] = {x: +crp[iLen - 2], y: +crp[iLen - 1]};
|
|
} else if (iLen - 4 === i) {
|
|
p[3] = {x: +crp[0], y: +crp[1]};
|
|
} else if (iLen - 2 === i) {
|
|
p[2] = {x: +crp[0], y: +crp[1]};
|
|
p[3] = {x: +crp[2], y: +crp[3]};
|
|
}
|
|
} else {
|
|
if (iLen - 4 === i) {
|
|
p[3] = p[2];
|
|
} else if (!i) {
|
|
p[0] = {x: +crp[i], y: +crp[i + 1]};
|
|
}
|
|
}
|
|
d.push(
|
|
[
|
|
(-p[0].x + 6 * p[1].x + p[2].x) / 6,
|
|
(-p[0].y + 6 * p[1].y + p[2].y) / 6,
|
|
(p[1].x + 6 * p[2].x - p[3].x) / 6,
|
|
(p[1].y + 6 * p[2].y - p[3].y) / 6,
|
|
p[2].x,
|
|
p[2].y
|
|
]
|
|
);
|
|
}
|
|
|
|
return d;
|
|
};
|
|
|
|
}(window, document, Chartist));</code>
|
|
</pre><div class="member-content"><div class="description"><p>Provides options handling functionality with callback for options changes triggered by responsive options and media query matches</p></div><h6>Parameters</h6><div class="param"><code>defaultOptions</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">Default options from Chartist</div></div><div class="param"><code>options</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">Options set by user</div></div><div class="param"><code>responsiveOptions</code> ( <span class="param-type"><code>Array</code></span> )<div class="param-description">Optional functions to add responsive behavior to chart</div></div><div class="param"><code>eventEmitter</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The event emitter that will be used to emit the options changed events</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Object</code></span> )<div class="param-description">The consolidated options object from the defaults, base and matching responsive options</div></div></div></article></div></header></section></div><aside class="side-notes"></aside></section><section class="documentation-section full"><header><h3>event.js</h3></header><div class="content"><section class="sub-section"><header><h4 id="module-chartistevent">Module Chartist.Event</h4><div class="module-description"><p>A very basic event module that helps to generate and catch events.</p></div><div class="module-members"><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistevent-function-addeventhandler"><span class="member-tag">function</span> addEventHandler()</h5><button class="api-code-button" data-toggle-visible="#chartistevent-function-addeventhandler-code">Show code</button></header><pre id="chartistevent-function-addeventhandler-code">
|
|
<code class="javascript">function addEventHandler(event, handler) {
|
|
handlers[event] = handlers[event] || [];
|
|
handlers[event].push(handler);
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Add an event handler for a specific event</p></div><h6>Parameters</h6><div class="param"><code>event</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">The event name</div></div><div class="param"><code>handler</code> ( <span class="param-type"><code>Function</code></span> )<div class="param-description">A event handler function</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistevent-function-removeeventhandler"><span class="member-tag">function</span> removeEventHandler()</h5><button class="api-code-button" data-toggle-visible="#chartistevent-function-removeeventhandler-code">Show code</button></header><pre id="chartistevent-function-removeeventhandler-code">
|
|
<code class="javascript">function removeEventHandler(event, handler) {
|
|
// Only do something if there are event handlers with this name existing
|
|
if(handlers[event]) {
|
|
// If handler is set we will look for a specific handler and only remove this
|
|
if(handler) {
|
|
handlers[event].splice(handlers[event].indexOf(handler), 1);
|
|
if(handlers[event].length === 0) {
|
|
delete handlers[event];
|
|
}
|
|
} else {
|
|
// If no handler is specified we remove all handlers for this event
|
|
delete handlers[event];
|
|
}
|
|
}
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Remove an event handler of a specific event name or remove all event handlers for a specific event.</p></div><h6>Parameters</h6><div class="param"><code>event</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">The event name where a specific or all handlers should be removed</div></div><div class="param"><code>[handler]</code> ( <span class="param-type"><code>Function</code></span> )<div class="param-description">An optional event handler function. If specified only this specific handler will be removed and otherwise all handlers are removed.</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistevent-function-emit"><span class="member-tag">function</span> emit()</h5><button class="api-code-button" data-toggle-visible="#chartistevent-function-emit-code">Show code</button></header><pre id="chartistevent-function-emit-code">
|
|
<code class="javascript">function emit(event, data) {
|
|
// Only do something if there are event handlers with this name existing
|
|
if(handlers[event]) {
|
|
handlers[event].forEach(function(handler) {
|
|
handler(data);
|
|
});
|
|
}
|
|
|
|
// Emit event to star event handlers
|
|
if(handlers['*']) {
|
|
handlers['*'].forEach(function(starHandler) {
|
|
starHandler(event, data);
|
|
});
|
|
}
|
|
}
|
|
|
|
return {
|
|
addEventHandler: addEventHandler,
|
|
removeEventHandler: removeEventHandler,
|
|
emit: emit
|
|
};
|
|
};
|
|
|
|
}(window, document, Chartist));</code>
|
|
</pre><div class="member-content"><div class="description"><p>Use this function to emit an event. All handlers that are listening for this event will be triggered with the data parameter.</p></div><h6>Parameters</h6><div class="param"><code>event</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">The event name that should be triggered</div></div><div class="param"><code>data</code> ( <span class="param-type"><code>*</code></span> )<div class="param-description">Arbitrary data that will be passed to the event handler callback functions</div></div></div></article></div></header></section></div><aside class="side-notes"></aside></section><section class="documentation-section full"><header><h3>svg.js</h3></header><div class="content"><section class="sub-section"><header><h4 id="module-chartistsvg">Module Chartist.Svg</h4><div class="module-description"><p>Chartist SVG module for simple SVG DOM abstraction</p></div><div class="module-members"><article class="module-member constructor"><header class="member-header"><h5 class="member-title" id="chartistsvg-constructor-svg"><span class="member-tag">constructor</span> Svg()</h5><button class="api-code-button" data-toggle-visible="#chartistsvg-constructor-svg-code">Show code</button></header><pre id="chartistsvg-constructor-svg-code">
|
|
<code class="javascript">function Svg(name, attributes, className, parent, insertFirst) {
|
|
// If Svg is getting called with an SVG element we just return the wrapper
|
|
if(name instanceof SVGElement) {
|
|
this._node = name;
|
|
} else {
|
|
this._node = document.createElementNS(svgNs, name);
|
|
|
|
// If this is an SVG element created then custom namespace
|
|
if(name === 'svg') {
|
|
this._node.setAttributeNS(xmlNs, Chartist.xmlNs.qualifiedName, Chartist.xmlNs.uri);
|
|
}
|
|
|
|
if(attributes) {
|
|
this.attr(attributes);
|
|
}
|
|
|
|
if(className) {
|
|
this.addClass(className);
|
|
}
|
|
|
|
if(parent) {
|
|
if (insertFirst && parent._node.firstChild) {
|
|
parent._node.insertBefore(this._node, parent._node.firstChild);
|
|
} else {
|
|
parent._node.appendChild(this._node);
|
|
}
|
|
}
|
|
}
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>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.</p></div><h6>Parameters</h6><div class="param"><code>name</code> ( <span class="param-type"><code>String</code></span> <span class="param-type"><code>SVGElement</code></span> )<div class="param-description">The name of the SVG element to create or an SVG dom element which should be wrapped into Chartist.Svg</div></div><div class="param"><code>attributes</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">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.</div></div><div class="param"><code>className</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">This class or class list will be added to the SVG element</div></div><div class="param"><code>parent</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The parent SVG wrapper object where this newly created wrapper and it's element will be attached to as child</div></div><div class="param"><code>insertFirst</code> ( <span class="param-type"><code>Boolean</code></span> )<div class="param-description">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</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvg-function-attr"><span class="member-tag">function</span> attr()</h5><button class="api-code-button" data-toggle-visible="#chartistsvg-function-attr-code">Show code</button></header><pre id="chartistsvg-function-attr-code">
|
|
<code class="javascript">function attr(attributes, ns) {
|
|
if(typeof attributes === 'string') {
|
|
if(ns) {
|
|
return this._node.getAttributeNS(ns, attributes);
|
|
} else {
|
|
return this._node.getAttribute(attributes);
|
|
}
|
|
}
|
|
|
|
Object.keys(attributes).forEach(function(key) {
|
|
// If the attribute value is undefined we can skip this one
|
|
if(attributes[key] === undefined) {
|
|
return;
|
|
}
|
|
|
|
if(ns) {
|
|
this._node.setAttributeNS(ns, [Chartist.xmlNs.prefix, ':', key].join(''), attributes[key]);
|
|
} else {
|
|
this._node.setAttribute(key, attributes[key]);
|
|
}
|
|
}.bind(this));
|
|
|
|
return this;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Set attributes on the current SVG element of the wrapper you're currently working on.</p></div><h6>Parameters</h6><div class="param"><code>attributes</code> ( <span class="param-type"><code>Object</code></span> <span class="param-type"><code>String</code></span> )<div class="param-description">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.</div></div><div class="param"><code>ns</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">If specified, the attributes will be set as namespace attributes with ns as prefix.</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvg-function-elem"><span class="member-tag">function</span> elem()</h5><button class="api-code-button" data-toggle-visible="#chartistsvg-function-elem-code">Show code</button></header><pre id="chartistsvg-function-elem-code">
|
|
<code class="javascript">function elem(name, attributes, className, insertFirst) {
|
|
return new Chartist.Svg(name, attributes, className, this, insertFirst);
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Create a new SVG element whose wrapper object will be selected for further operations. This way you can also create nested groups easily.</p></div><h6>Parameters</h6><div class="param"><code>name</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">The name of the SVG element that should be created as child element of the currently selected element wrapper</div></div><div class="param"><code>[attributes]</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">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.</div></div><div class="param"><code>[className]</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">This class or class list will be added to the SVG element</div></div><div class="param"><code>[insertFirst]</code> ( <span class="param-type"><code>Boolean</code></span> )<div class="param-description">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</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvg-function-foreignobject"><span class="member-tag">function</span> foreignObject()</h5><button class="api-code-button" data-toggle-visible="#chartistsvg-function-foreignobject-code">Show code</button></header><pre id="chartistsvg-function-foreignobject-code">
|
|
<code class="javascript">function foreignObject(content, attributes, className, insertFirst) {
|
|
// If content is string then we convert it to DOM
|
|
// TODO: Handle case where content is not a string nor a DOM Node
|
|
if(typeof content === 'string') {
|
|
var container = document.createElement('div');
|
|
container.innerHTML = content;
|
|
content = container.firstChild;
|
|
}
|
|
|
|
// Adding namespace to content element
|
|
content.setAttribute('xmlns', xhtmlNs);
|
|
|
|
// Creating the foreignObject without required extension attribute (as described here
|
|
// http://www.w3.org/TR/SVG/extend.html#ForeignObjectElement)
|
|
var fnObj = this.elem('foreignObject', attributes, className, insertFirst);
|
|
|
|
// Add content to foreignObjectElement
|
|
fnObj._node.appendChild(content);
|
|
|
|
return fnObj;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>This method creates a foreignObject (see <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject">https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject</a>) 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.</p></div><h6>Parameters</h6><div class="param"><code>content</code> ( <span class="param-type"><code>Node</code></span> <span class="param-type"><code>String</code></span> )<div class="param-description">The DOM Node, or HTML string that will be converted to a DOM Node, that is then placed into and wrapped by the foreignObject</div></div><div class="param"><code>[attributes]</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">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.</div></div><div class="param"><code>[className]</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">This class or class list will be added to the SVG element</div></div><div class="param"><code>[insertFirst]</code> ( <span class="param-type"><code>Boolean</code></span> )<div class="param-description">Specifies if the foreignObject should be inserted as first child</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvg-function-text"><span class="member-tag">function</span> text()</h5><button class="api-code-button" data-toggle-visible="#chartistsvg-function-text-code">Show code</button></header><pre id="chartistsvg-function-text-code">
|
|
<code class="javascript">function text(t) {
|
|
this._node.appendChild(document.createTextNode(t));
|
|
return this;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>This method adds a new text element to the current Chartist.Svg wrapper.</p></div><h6>Parameters</h6><div class="param"><code>t</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">The text that should be added to the text element that is created</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvg-function-empty"><span class="member-tag">function</span> empty()</h5><button class="api-code-button" data-toggle-visible="#chartistsvg-function-empty-code">Show code</button></header><pre id="chartistsvg-function-empty-code">
|
|
<code class="javascript">function empty() {
|
|
while (this._node.firstChild) {
|
|
this._node.removeChild(this._node.firstChild);
|
|
}
|
|
|
|
return this;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>This method will clear all child nodes of the current wrapper object.</p></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvg-function-remove"><span class="member-tag">function</span> remove()</h5><button class="api-code-button" data-toggle-visible="#chartistsvg-function-remove-code">Show code</button></header><pre id="chartistsvg-function-remove-code">
|
|
<code class="javascript">function remove() {
|
|
this._node.parentNode.removeChild(this._node);
|
|
return new Chartist.Svg(this._node.parentNode);
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>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.</p></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvg-function-replace"><span class="member-tag">function</span> replace()</h5><button class="api-code-button" data-toggle-visible="#chartistsvg-function-replace-code">Show code</button></header><pre id="chartistsvg-function-replace-code">
|
|
<code class="javascript">function replace(newElement) {
|
|
this._node.parentNode.replaceChild(newElement._node, this._node);
|
|
return newElement;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>This method will replace the element with a new element that can be created outside of the current DOM.</p></div><h6>Parameters</h6><div class="param"><code>newElement</code> ( <span class="param-type"><code>Chartist.Svg</code></span> )<div class="param-description">The new Chartist.Svg object that will be used to replace the current wrapper object</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvg-function-append"><span class="member-tag">function</span> append()</h5><button class="api-code-button" data-toggle-visible="#chartistsvg-function-append-code">Show code</button></header><pre id="chartistsvg-function-append-code">
|
|
<code class="javascript">function append(element, insertFirst) {
|
|
if(insertFirst && this._node.firstChild) {
|
|
this._node.insertBefore(element._node, this._node.firstChild);
|
|
} else {
|
|
this._node.appendChild(element._node);
|
|
}
|
|
|
|
return this;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>This method will append an element to the current element as a child.</p></div><h6>Parameters</h6><div class="param"><code>element</code> ( <span class="param-type"><code>Chartist.Svg</code></span> )<div class="param-description">The Chartist.Svg element that should be added as a child</div></div><div class="param"><code>[insertFirst]</code> ( <span class="param-type"><code>Boolean</code></span> )<div class="param-description">Specifies if the element should be inserted as first child</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvg-function-classes"><span class="member-tag">function</span> classes()</h5><button class="api-code-button" data-toggle-visible="#chartistsvg-function-classes-code">Show code</button></header><pre id="chartistsvg-function-classes-code">
|
|
<code class="javascript">function classes() {
|
|
return this._node.getAttribute('class') ? this._node.getAttribute('class').trim().split(/\s+/) : [];
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Returns an array of class names that are attached to the current wrapper element. This method can not be chained further.</p></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvg-function-addclass"><span class="member-tag">function</span> addClass()</h5><button class="api-code-button" data-toggle-visible="#chartistsvg-function-addclass-code">Show code</button></header><pre id="chartistsvg-function-addclass-code">
|
|
<code class="javascript">function addClass(names) {
|
|
this._node.setAttribute('class',
|
|
this.classes(this._node)
|
|
.concat(names.trim().split(/\s+/))
|
|
.filter(function(elem, pos, self) {
|
|
return self.indexOf(elem) === pos;
|
|
}).join(' ')
|
|
);
|
|
|
|
return this;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Adds one or a space separated list of classes to the current element and ensures the classes are only existing once.</p></div><h6>Parameters</h6><div class="param"><code>names</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">A white space separated list of class names</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvg-function-removeclass"><span class="member-tag">function</span> removeClass()</h5><button class="api-code-button" data-toggle-visible="#chartistsvg-function-removeclass-code">Show code</button></header><pre id="chartistsvg-function-removeclass-code">
|
|
<code class="javascript">function removeClass(names) {
|
|
var removedClasses = names.trim().split(/\s+/);
|
|
|
|
this._node.setAttribute('class', this.classes(this._node).filter(function(name) {
|
|
return removedClasses.indexOf(name) === -1;
|
|
}).join(' '));
|
|
|
|
return this;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Removes one or a space separated list of classes from the current element.</p></div><h6>Parameters</h6><div class="param"><code>names</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">A white space separated list of class names</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvg-function-removeallclasses"><span class="member-tag">function</span> removeAllClasses()</h5><button class="api-code-button" data-toggle-visible="#chartistsvg-function-removeallclasses-code">Show code</button></header><pre id="chartistsvg-function-removeallclasses-code">
|
|
<code class="javascript">function removeAllClasses() {
|
|
this._node.setAttribute('class', '');
|
|
|
|
return this;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Removes all classes from the current element.</p></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvg-function-height"><span class="member-tag">function</span> height()</h5><button class="api-code-button" data-toggle-visible="#chartistsvg-function-height-code">Show code</button></header><pre id="chartistsvg-function-height-code">
|
|
<code class="javascript">function height() {
|
|
return this._node.clientHeight || Math.round(this._node.getBBox().height) || this._node.parentNode.clientHeight;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Get element height with fallback to svg BoundingBox or parent container dimensions:<br>See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=530985">bugzilla.mozilla.org</a></p></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Number</code></span> )<div class="param-description">The elements height in pixels</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvg-function-animate"><span class="member-tag">function</span> animate()</h5><button class="api-code-button" data-toggle-visible="#chartistsvg-function-animate-code">Show code</button></header><pre id="chartistsvg-function-animate-code">
|
|
<code class="javascript">function animate(animations, guided, eventEmitter) {
|
|
if(guided === undefined) {
|
|
guided = true;
|
|
}
|
|
|
|
Object.keys(animations).forEach(function createAnimateForAttributes(attribute) {
|
|
|
|
function createAnimate(animationDefinition, guided) {
|
|
var attributeProperties = {},
|
|
animate,
|
|
timeout,
|
|
easing;
|
|
|
|
// Check if an easing is specified in the definition object and delete it from the object as it will not
|
|
// be part of the animate element attributes.
|
|
if(animationDefinition.easing) {
|
|
// If already an easing Bézier curve array we take it or we lookup a easing array in the Easing object
|
|
easing = animationDefinition.easing instanceof Array ?
|
|
animationDefinition.easing :
|
|
Chartist.Svg.Easing[animationDefinition.easing];
|
|
delete animationDefinition.easing;
|
|
}
|
|
|
|
// If numeric dur or begin was provided we assume milli seconds
|
|
animationDefinition.begin = Chartist.ensureUnit(animationDefinition.begin, 'ms');
|
|
animationDefinition.dur = Chartist.ensureUnit(animationDefinition.dur, 'ms');
|
|
|
|
if(easing) {
|
|
animationDefinition.calcMode = 'spline';
|
|
animationDefinition.keySplines = easing.join(' ');
|
|
animationDefinition.keyTimes = '0;1';
|
|
}
|
|
|
|
// Adding "fill: freeze" if we are in guided mode and set initial attribute values
|
|
if(guided) {
|
|
animationDefinition.fill = 'freeze';
|
|
// Animated property on our element should already be set to the animation from value in guided mode
|
|
attributeProperties[attribute] = animationDefinition.from;
|
|
this.attr(attributeProperties);
|
|
|
|
// In guided mode we also set begin to indefinite so we can trigger the start manually and put the begin
|
|
// which needs to be in ms aside
|
|
timeout = Chartist.stripUnit(animationDefinition.begin || 0);
|
|
animationDefinition.begin = 'indefinite';
|
|
}
|
|
|
|
animate = this.elem('animate', Chartist.extend({
|
|
attributeName: attribute
|
|
}, animationDefinition));
|
|
|
|
if(guided) {
|
|
// If guided we take the value that was put aside in timeout and trigger the animation manually with a timeout
|
|
setTimeout(function() {
|
|
animate._node.beginElement();
|
|
}, timeout);
|
|
}
|
|
|
|
if(eventEmitter) {
|
|
animate._node.addEventListener('beginEvent', function handleBeginEvent() {
|
|
eventEmitter.emit('animationBegin', {
|
|
element: this,
|
|
animate: animate._node,
|
|
params: animationDefinition
|
|
});
|
|
}.bind(this));
|
|
}
|
|
|
|
animate._node.addEventListener('endEvent', function handleEndEvent() {
|
|
if(eventEmitter) {
|
|
eventEmitter.emit('animationEnd', {
|
|
element: this,
|
|
animate: animate._node,
|
|
params: animationDefinition
|
|
});
|
|
}
|
|
|
|
if(guided) {
|
|
// Set animated attribute to current animated value
|
|
attributeProperties[attribute] = animationDefinition.to;
|
|
this.attr(attributeProperties);
|
|
// Remove the animate element as it's no longer required
|
|
animate.remove();
|
|
}
|
|
}.bind(this));
|
|
}
|
|
|
|
// If current attribute is an array of definition objects we create an animate for each and disable guided mode
|
|
if(animations[attribute] instanceof Array) {
|
|
animations[attribute].forEach(function(animationDefinition) {
|
|
createAnimate.bind(this)(animationDefinition, false);
|
|
}.bind(this));
|
|
} else {
|
|
createAnimate.bind(this)(animations[attribute], guided);
|
|
}
|
|
|
|
}.bind(this));
|
|
|
|
return this;
|
|
}
|
|
|
|
Chartist.Svg = Chartist.Class.extend({
|
|
constructor: Svg,
|
|
attr: attr,
|
|
elem: elem,
|
|
parent: parent,
|
|
root: root,
|
|
querySelector: querySelector,
|
|
querySelectorAll: querySelectorAll,
|
|
foreignObject: foreignObject,
|
|
text: text,
|
|
empty: empty,
|
|
remove: remove,
|
|
replace: replace,
|
|
append: append,
|
|
classes: classes,
|
|
addClass: addClass,
|
|
removeClass: removeClass,
|
|
removeAllClasses: removeAllClasses,
|
|
height: height,
|
|
width: width,
|
|
animate: animate
|
|
});</code>
|
|
</pre><div class="member-content"><div class="description"><p>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 <a href="http://www.w3.org/TR/SVG/animate.html">http://www.w3.org/TR/SVG/animate.html</a> 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 <code>Chartist.Svg.Easing</code> or an array with four numbers specifying a cubic Bézier curve.<br><strong>An animations object could look like this:</strong></p><pre><code class="lang-javascript">element.animate({
|
|
opacity: {
|
|
dur: 1000,
|
|
from: 0,
|
|
to: 1
|
|
},
|
|
x1: {
|
|
dur: '1000ms',
|
|
from: 100,
|
|
to: 200,
|
|
easing: 'easeOutQuart'
|
|
},
|
|
y1: {
|
|
dur: '2s',
|
|
from: 0,
|
|
to: 100
|
|
}
|
|
});
|
|
</code></pre><p><strong>Automatic unit conversion</strong><br>For the <code>dur</code> and the <code>begin</code> animate attribute you can also omit a unit by passing a number. The number will automatically be converted to milli seconds.<br><strong>Guided mode</strong><br>The default behavior of SMIL animations with offset using the <code>begin</code> 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 <code>from</code> value even before the animation starts. Also if you don't specify <code>fill="freeze"</code> 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 <code>begin</code> 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.<br>If guided mode is enabled the following behavior is added:</p><ul><li>Before the animation starts (even when delayed with <code>begin</code>) the animated attribute will be set already to the <code>from</code> value of the animation</li><li><code>begin</code> is explicitly set to <code>indefinite</code> so it can be started manually without relying on document begin time (creation)</li><li>The animate element will be forced to use <code>fill="freeze"</code></li><li>The animation will be triggered with <code>beginElement()</code> in a timeout where <code>begin</code> of the definition object is interpreted in milli seconds. If no <code>begin</code> was specified the timeout is triggered immediately.</li><li>After the animation the element attribute value will be set to the <code>to</code> value of the animation</li><li>The animate element is deleted from the DOM</li></ul></div><h6>Parameters</h6><div class="param"><code>animations</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">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.</div></div><div class="param"><code>guided</code> ( <span class="param-type"><code>Boolean</code></span> )<div class="param-description">Specify if guided mode should be activated for this animation (see Guided mode). If not otherwise specified, guided mode will be activated.</div></div><div class="param"><code>eventEmitter</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">If specified, this event emitter will be notified when an animation starts or ends.</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistsvg-method-issupported"><span class="member-tag">method</span> Chartist.Svg.isSupported()</h5><button class="api-code-button" data-toggle-visible="#chartistsvg-method-issupported-code">Show code</button></header><pre id="chartistsvg-method-issupported-code">
|
|
<code class="javascript">Chartist.Svg.isSupported = function(feature) {
|
|
return document.implementation.hasFeature('www.http://w3.org/TR/SVG11/feature#' + feature, '1.1');
|
|
};
|
|
|
|
/**
|
|
* 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.
|
|
*
|
|
* @memberof Chartist.Svg
|
|
*/
|
|
var easingCubicBeziers = {
|
|
easeInSine: [0.47, 0, 0.745, 0.715],
|
|
easeOutSine: [0.39, 0.575, 0.565, 1],
|
|
easeInOutSine: [0.445, 0.05, 0.55, 0.95],
|
|
easeInQuad: [0.55, 0.085, 0.68, 0.53],
|
|
easeOutQuad: [0.25, 0.46, 0.45, 0.94],
|
|
easeInOutQuad: [0.455, 0.03, 0.515, 0.955],
|
|
easeInCubic: [0.55, 0.055, 0.675, 0.19],
|
|
easeOutCubic: [0.215, 0.61, 0.355, 1],
|
|
easeInOutCubic: [0.645, 0.045, 0.355, 1],
|
|
easeInQuart: [0.895, 0.03, 0.685, 0.22],
|
|
easeOutQuart: [0.165, 0.84, 0.44, 1],
|
|
easeInOutQuart: [0.77, 0, 0.175, 1],
|
|
easeInQuint: [0.755, 0.05, 0.855, 0.06],
|
|
easeOutQuint: [0.23, 1, 0.32, 1],
|
|
easeInOutQuint: [0.86, 0, 0.07, 1],
|
|
easeInExpo: [0.95, 0.05, 0.795, 0.035],
|
|
easeOutExpo: [0.19, 1, 0.22, 1],
|
|
easeInOutExpo: [1, 0, 0, 1],
|
|
easeInCirc: [0.6, 0.04, 0.98, 0.335],
|
|
easeOutCirc: [0.075, 0.82, 0.165, 1],
|
|
easeInOutCirc: [0.785, 0.135, 0.15, 0.86],
|
|
easeInBack: [0.6, -0.28, 0.735, 0.045],
|
|
easeOutBack: [0.175, 0.885, 0.32, 1.275],
|
|
easeInOutBack: [0.68, -0.55, 0.265, 1.55]
|
|
};
|
|
|
|
Chartist.Svg.Easing = easingCubicBeziers;
|
|
|
|
/**
|
|
* 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.
|
|
* An instance of this class is also returned by `Chartist.Svg.querySelectorAll`.
|
|
*
|
|
* @memberof Chartist.Svg
|
|
* @param {Array<Node>|NodeList} nodeList An Array of SVG DOM nodes or a SVG DOM NodeList (as returned by document.querySelectorAll)
|
|
* @constructor
|
|
*/
|
|
function SvgList(nodeList) {
|
|
var list = this;
|
|
|
|
this.svgElements = [];
|
|
for(var i = 0; i < nodeList.length; i++) {
|
|
this.svgElements.push(new Chartist.Svg(nodeList[i]));
|
|
}
|
|
|
|
// Add delegation methods for Chartist.Svg
|
|
Object.keys(Chartist.Svg.prototype).filter(function(prototypeProperty) {
|
|
return ['constructor',
|
|
'parent',
|
|
'querySelector',
|
|
'querySelectorAll',
|
|
'replace',
|
|
'append',
|
|
'classes',
|
|
'height',
|
|
'width'].indexOf(prototypeProperty) === -1;
|
|
}).forEach(function(prototypeProperty) {
|
|
list[prototypeProperty] = function() {
|
|
var args = Array.prototype.slice.call(arguments, 0);
|
|
list.svgElements.forEach(function(element) {
|
|
Chartist.Svg.prototype[prototypeProperty].apply(element, args);
|
|
});
|
|
return list;
|
|
};
|
|
});
|
|
}
|
|
|
|
Chartist.Svg.List = Chartist.Class.extend({
|
|
constructor: SvgList
|
|
});
|
|
|
|
}(window, document, Chartist));</code>
|
|
</pre><div class="member-content"><div class="description"><p>This method checks for support of a given SVG feature like Extensibility, SVG-animation or the like. Check <a href="http://www.w3.org/TR/SVG11/feature">http://www.w3.org/TR/SVG11/feature</a> for a detailed list.</p></div><h6>Parameters</h6><div class="param"><code>feature</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">The SVG 1.1 feature that should be checked for support.</div></div></div></article></div></header></section></div><aside class="side-notes"></aside></section></div></article></section><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-53685926-1', 'auto');
|
|
ga('require', 'displayfeatures');
|
|
ga('send', 'pageview');</script><script async src="scripts/all.js"></script><!-- Take web fonts off the critical path but risk FOUT --><script type="text/javascript">WebFontConfig = {
|
|
google: { families: ['Oxygen:400,300,700', 'Source+Code+Pro:400,700'] },
|
|
custom: {
|
|
families: [ 'FontAwesome' ],
|
|
urls: [ '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css']
|
|
}
|
|
};
|
|
(function() {
|
|
var wf = document.createElement('script');
|
|
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
|
|
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
|
|
wf.type = 'text/javascript';
|
|
wf.async = 'true';
|
|
var s = document.getElementsByTagName('script')[0];
|
|
s.parentNode.insertBefore(wf, s);
|
|
})();</script> |