2480 lines
204 KiB
HTML
2480 lines
204 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]--><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"><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 class="toggle-topbar menu-icon"><a href="#">Menu</a></ul><section class="top-bar-section"><ul class="right"><li><a href="//github.com/gionkunz/chartist-js/tree/master/dist" target="_blank">Download</a></ul><ul class="left"><li><a href="getting-started.html">Getting started</a><li><a href="api-documentation.html">API Documentation</a><li><a href="examples.html">Examples</a><li><a href="plugins.html">Plugins</a><li><a href="//github.com/gionkunz/chartist-js" target="_blank">Contribute</a></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.AutoScaleAxis<li class="heading">Chartist.FixedScaleAxis<li class="heading">Chartist.StepAxis<li class="heading">Chartist.Base<li><a class="text-clipping" href="#chartistbase-function-update">update()</a><li><a class="text-clipping" href="#chartistbase-function-detach">detach()</a><li><a class="text-clipping" href="#chartistbase-function-on">on()</a><li><a class="text-clipping" href="#chartistbase-function-off">off()</a><li class="heading">Chartist.Bar<li><a class="text-clipping" href="#chartistbar-declaration-defaultoptions">defaultOptions</a><li><a class="text-clipping" href="#chartistbar-function-bar">Bar()</a><li class="heading">Chartist.Line<li><a class="text-clipping" href="#chartistline-declaration-defaultoptions">defaultOptions</a><li><a class="text-clipping" href="#chartistline-function-line">Line()</a><li class="heading">Chartist.Pie<li><a class="text-clipping" href="#chartistpie-declaration-defaultoptions">defaultOptions</a><li><a class="text-clipping" href="#chartistpie-function-pie">Pie()</a><li class="heading">Chartist.Class<li><a class="text-clipping" href="#chartistclass-function-extend">extend()</a><li class="heading">Chartist.Core<li><a class="text-clipping" href="#chartistcore-property-namespaces">Chartist.namespaces</a><li><a class="text-clipping" href="#chartistcore-method-times">Chartist.times()</a><li><a class="text-clipping" href="#chartistcore-method-sum">Chartist.sum()</a><li><a class="text-clipping" href="#chartistcore-method-mapmultiply">Chartist.mapMultiply()</a><li><a class="text-clipping" href="#chartistcore-method-mapadd">Chartist.mapAdd()</a><li><a class="text-clipping" href="#chartistcore-method-serialmap">Chartist.serialMap()</a><li><a class="text-clipping" href="#chartistcore-method-roundwithprecision">Chartist.roundWithPrecision()</a><li><a class="text-clipping" href="#chartistcore-property-precision">Chartist.precision</a><li><a class="text-clipping" href="#chartistcore-property-escapingmap">Chartist.escapingMap</a><li><a class="text-clipping" href="#chartistcore-method-serialize">Chartist.serialize()</a><li><a class="text-clipping" href="#chartistcore-method-deserialize">Chartist.deserialize()</a><li><a class="text-clipping" href="#chartistcore-method-createsvg">Chartist.createSvg()</a><li><a class="text-clipping" href="#chartistcore-method-reversedata">Chartist.reverseData()</a><li><a class="text-clipping" href="#chartistcore-method-getdataarray">Chartist.getDataArray()</a><li><a class="text-clipping" href="#chartistcore-method-normalizepadding">Chartist.normalizePadding()</a><li><a class="text-clipping" href="#chartistcore-method-orderofmagnitude">Chartist.orderOfMagnitude()</a><li><a class="text-clipping" href="#chartistcore-method-projectlength">Chartist.projectLength()</a><li><a class="text-clipping" href="#chartistcore-method-getavailableheight">Chartist.getAvailableHeight()</a><li><a class="text-clipping" href="#chartistcore-method-gethighlow">Chartist.getHighLow()</a><li><a class="text-clipping" href="#chartistcore-method-isnumeric">Chartist.isNumeric()</a><li><a class="text-clipping" href="#chartistcore-method-isfalseybutzero">Chartist.isFalseyButZero()</a><li><a class="text-clipping" href="#chartistcore-method-getnumberorundefined">Chartist.getNumberOrUndefined()</a><li><a class="text-clipping" href="#chartistcore-method-ismultivalue">Chartist.isMultiValue()</a><li><a class="text-clipping" href="#chartistcore-method-getmultivalue">Chartist.getMultiValue()</a><li><a class="text-clipping" href="#chartistcore-method-rho">Chartist.rho()</a><li><a class="text-clipping" href="#chartistcore-method-getbounds">Chartist.getBounds()</a><li><a class="text-clipping" href="#chartistcore-method-polartocartesian">Chartist.polarToCartesian()</a><li><a class="text-clipping" href="#chartistcore-method-createchartrect">Chartist.createChartRect()</a><li><a class="text-clipping" href="#chartistcore-method-creategrid">Chartist.createGrid()</a><li><a class="text-clipping" href="#chartistcore-method-creategridbackground">Chartist.createGridBackground()</a><li><a class="text-clipping" href="#chartistcore-method-createlabel">Chartist.createLabel()</a><li><a class="text-clipping" href="#chartistcore-method-optionsprovider">Chartist.optionsProvider()</a><li class="heading">Chartist.Event<li><a class="text-clipping" href="#chartistevent-function-addeventhandler">addEventHandler()</a><li><a class="text-clipping" href="#chartistevent-function-removeeventhandler">removeEventHandler()</a><li><a class="text-clipping" href="#chartistevent-function-emit">emit()</a><li class="heading">Chartist.Interpolation<li><a class="text-clipping" href="#chartistinterpolation-method-none">Chartist.Interpolation.none()</a><li><a class="text-clipping" href="#chartistinterpolation-method-simple">Chartist.Interpolation.simple()</a><li><a class="text-clipping" href="#chartistinterpolation-method-cardinal">Chartist.Interpolation.cardinal()</a><li><a class="text-clipping" href="#chartistinterpolation-method-monotonecubic">Chartist.Interpolation.monotoneCubic()</a><li><a class="text-clipping" href="#chartistinterpolation-method-step">Chartist.Interpolation.step()</a><li class="heading">Chartist.Svg.Path<li><a class="text-clipping" href="#chartistsvgpath-declaration-elementdescriptions">elementDescriptions</a><li><a class="text-clipping" href="#chartistsvgpath-declaration-defaultoptions">defaultOptions</a><li><a class="text-clipping" href="#chartistsvgpath-constructor-svgpath">SvgPath()</a><li><a class="text-clipping" href="#chartistsvgpath-function-position">position()</a><li><a class="text-clipping" href="#chartistsvgpath-function-remove">remove()</a><li><a class="text-clipping" href="#chartistsvgpath-function-move">move()</a><li><a class="text-clipping" href="#chartistsvgpath-function-line">line()</a><li><a class="text-clipping" href="#chartistsvgpath-function-curve">curve()</a><li><a class="text-clipping" href="#chartistsvgpath-function-arc">arc()</a><li><a class="text-clipping" href="#chartistsvgpath-function-parse">parse()</a><li><a class="text-clipping" href="#chartistsvgpath-function-stringify">stringify()</a><li><a class="text-clipping" href="#chartistsvgpath-function-scale">scale()</a><li><a class="text-clipping" href="#chartistsvgpath-function-translate">translate()</a><li><a class="text-clipping" href="#chartistsvgpath-function-transform">transform()</a><li><a class="text-clipping" href="#chartistsvgpath-function-clone">clone()</a><li><a class="text-clipping" href="#chartistsvgpath-function-splitbycommand">splitByCommand()</a><li><a class="text-clipping" href="#chartistsvgpath-function-join">join()</a><li class="heading">Chartist.Svg<li><a class="text-clipping" href="#chartistsvg-constructor-svg">Svg()</a><li><a class="text-clipping" href="#chartistsvg-function-attr">attr()</a><li><a class="text-clipping" href="#chartistsvg-function-elem">elem()</a><li><a class="text-clipping" href="#chartistsvg-function-parent">parent()</a><li><a class="text-clipping" href="#chartistsvg-function-root">root()</a><li><a class="text-clipping" href="#chartistsvg-function-queryselector">querySelector()</a><li><a class="text-clipping" href="#chartistsvg-function-queryselectorall">querySelectorAll()</a><li><a class="text-clipping" href="#chartistsvg-function-getnode">getNode()</a><li><a class="text-clipping" href="#chartistsvg-function-foreignobject">foreignObject()</a><li><a class="text-clipping" href="#chartistsvg-function-text">text()</a><li><a class="text-clipping" href="#chartistsvg-function-empty">empty()</a><li><a class="text-clipping" href="#chartistsvg-function-remove">remove()</a><li><a class="text-clipping" href="#chartistsvg-function-replace">replace()</a><li><a class="text-clipping" href="#chartistsvg-function-append">append()</a><li><a class="text-clipping" href="#chartistsvg-function-classes">classes()</a><li><a class="text-clipping" href="#chartistsvg-function-addclass">addClass()</a><li><a class="text-clipping" href="#chartistsvg-function-removeclass">removeClass()</a><li><a class="text-clipping" href="#chartistsvg-function-removeallclasses">removeAllClasses()</a><li><a class="text-clipping" href="#chartistsvg-function-height">height()</a><li><a class="text-clipping" href="#chartistsvg-function-animate">animate()</a><li><a class="text-clipping" href="#chartistsvg-method-issupported">Chartist.Svg.isSupported()</a></ul></nav></aside><div class="content"><section class="documentation-section full"><header><h3>auto-scale-axis.js</h3></header><div class="content"><section class="sub-section"><header><h4 id="module-chartistautoscaleaxis">Module Chartist.AutoScaleAxis</h4><div class="module-description"><p>The auto scale axis uses standard linear scale projection of values along an axis. It uses order of magnitude to find a scale automatically and evaluates the available space in order to find the perfect amount of ticks for your chart.<br><strong>Options</strong><br>The following options are used by this axis in addition to the default axis options outlined in the axis configuration of the chart default settings.<pre><code class="language-javascript">var options = {
|
|
// If high is specified then the axis will display values explicitly up to this value and the computed maximum from the data is ignored
|
|
high: 100,
|
|
// If low is specified then the axis will display values explicitly down to this value and the computed minimum from the data is ignored
|
|
low: 0,
|
|
// This option will be used when finding the right scale division settings. The amount of ticks on the scale will be determined so that as many ticks as possible will be displayed, while not violating this minimum required space (in pixel).
|
|
scaleMinSpace: 20,
|
|
// Can be set to true or false. If set to true, the scale will be generated with whole numbers only.
|
|
onlyInteger: true,
|
|
// The reference value can be used to make sure that this value will always be on the chart. This is especially useful on bipolar charts where the bipolar center always needs to be part of the chart.
|
|
referenceValue: 5
|
|
};</code></pre></div><div class="module-members"></div></header></section></div><aside class="side-notes"></aside></section><section class="documentation-section full"><header><h3>axis.js</h3></header><div class="content"></div><aside class="side-notes"></aside></section><section class="documentation-section full"><header><h3>fixed-scale-axis.js</h3></header><div class="content"><section class="sub-section"><header><h4 id="module-chartistfixedscaleaxis">Module Chartist.FixedScaleAxis</h4><div class="module-description"><p>The fixed scale axis uses standard linear projection of values along an axis. It makes use of a divisor option to divide the range provided from the minimum and maximum value or the options high and low that will override the computed minimum and maximum.<br><strong>Options</strong><br>The following options are used by this axis in addition to the default axis options outlined in the axis configuration of the chart default settings.<pre><code class="language-javascript">var options = {
|
|
// If high is specified then the axis will display values explicitly up to this value and the computed maximum from the data is ignored
|
|
high: 100,
|
|
// If low is specified then the axis will display values explicitly down to this value and the computed minimum from the data is ignored
|
|
low: 0,
|
|
// If specified then the value range determined from minimum to maximum (or low and high) will be divided by this number and ticks will be generated at those division points. The default divisor is 1.
|
|
divisor: 4,
|
|
// If ticks is explicitly set, then the axis will not compute the ticks with the divisor, but directly use the data in ticks to determine at what points on the axis a tick need to be generated.
|
|
ticks: [1, 10, 20, 30]
|
|
};</code></pre></div><div class="module-members"></div></header></section></div><aside class="side-notes"></aside></section><section class="documentation-section full"><header><h3>step-axis.js</h3></header><div class="content"><section class="sub-section"><header><h4 id="module-chartiststepaxis">Module Chartist.StepAxis</h4><div class="module-description"><p>The step axis for step based charts like bar chart or step based line charts. It uses a fixed amount of ticks that will be equally distributed across the whole axis length. The projection is done using the index of the data value rather than the value itself and therefore it's only useful for distribution purpose.<br><strong>Options</strong><br>The following options are used by this axis in addition to the default axis options outlined in the axis configuration of the chart default settings.<pre><code class="language-javascript">var options = {
|
|
// Ticks to be used to distribute across the axis length. As this axis type relies on the index of the value rather than the value, arbitrary data that can be converted to a string can be used as ticks.
|
|
ticks: ['One', 'Two', 'Three'],
|
|
// If set to true the full width will be used to distribute the values where the last value will be at the maximum of the axis length. If false the spaces between the ticks will be evenly distributed instead.
|
|
stretch: true
|
|
};</code></pre></div><div class="module-members"></div></header></section></div><aside class="side-notes"></aside></section><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.</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(data, options, override) {
|
|
if(data) {
|
|
this.data = data || {};
|
|
this.data.labels = this.data.labels || [];
|
|
this.data.series = this.data.series || [];
|
|
// Event for data transformation that allows to manipulate the data before it gets rendered in the charts
|
|
this.eventEmitter.emit('data', {
|
|
type: 'update',
|
|
data: this.data
|
|
});
|
|
}
|
|
|
|
if(options) {
|
|
this.options = Chartist.extend({}, override ? this.options : this.defaultOptions, options);
|
|
|
|
// If chartist was not initialized yet, we just set the options and leave the rest to the initialization
|
|
// Otherwise we re-create the optionsProvider at this point
|
|
if(!this.initializeTimeoutId) {
|
|
this.optionsProvider.removeMediaQueryListeners();
|
|
this.optionsProvider = Chartist.optionsProvider(this.options, this.responsiveOptions, this.eventEmitter);
|
|
}
|
|
}
|
|
|
|
// Only re-created the chart if it has been initialized yet
|
|
if(!this.initializeTimeoutId) {
|
|
this.createChart(this.optionsProvider.getCurrentOptions());
|
|
}
|
|
|
|
// Return a reference to the chart object to chain up calls
|
|
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</div><h6>Parameters</h6><div class="param"><code>[data]</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">Optional data you'd like to set for the chart before it will update. If not specified the update method will use the data that is already configured with the chart.</div></div><div class="param"><code>[options]</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">Optional options you'd like to add to the previous options for the chart before it will update. If not specified the update method will use the options that have been already configured with the chart.</div></div><div class="param"><code>[override]</code> ( <span class="param-type"><code>Boolean</code></span> )<div class="param-description">If set to true, the passed options will be used to extend the options that have been configured already. Otherwise the chart default options will be used as the base</div></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() {
|
|
// Only detach if initialization already occurred on this chart. If this chart still hasn't initialized (therefore
|
|
// the initializationTimeoutId is still a valid timeout reference, we will clear the timeout
|
|
if(!this.initializeTimeoutId) {
|
|
window.removeEventListener('resize', this.resizeListener);
|
|
this.optionsProvider.removeMediaQueryListeners();
|
|
} else {
|
|
window.clearTimeout(this.initializeTimeoutId);
|
|
}
|
|
|
|
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.</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.</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;
|
|
}
|
|
|
|
function initialize() {
|
|
// Add window resize listener that re-creates the chart
|
|
window.addEventListener('resize', this.resizeListener);
|
|
|
|
// Obtain current options based on matching media queries (if responsive options are given)
|
|
// This will also register a listener that is re-creating the chart based on media changes
|
|
this.optionsProvider = Chartist.optionsProvider(this.options, this.responsiveOptions, this.eventEmitter);
|
|
// Register options change listener that will trigger a chart update
|
|
this.eventEmitter.addEventHandler('optionsChanged', function() {
|
|
this.update();
|
|
}.bind(this));
|
|
|
|
// Before the first chart creation we need to register us with all plugins that are configured
|
|
// Initialize all relevant plugins with our chart object and the plugin options specified in the config
|
|
if(this.options.plugins) {
|
|
this.options.plugins.forEach(function(plugin) {
|
|
if(plugin instanceof Array) {
|
|
plugin[0](this, plugin[1]);
|
|
} else {
|
|
plugin(this);
|
|
}
|
|
}.bind(this));
|
|
}
|
|
|
|
// Event for data transformation that allows to manipulate the data before it gets rendered in the charts
|
|
this.eventEmitter.emit('data', {
|
|
type: 'initial',
|
|
data: this.data
|
|
});
|
|
|
|
// Create the first chart
|
|
this.createChart(this.optionsProvider.getCurrentOptions());
|
|
|
|
// As chart is initialized from the event loop now we can reset our timeout reference
|
|
// This is important if the chart gets initialized on the same element twice
|
|
this.initializeTimeoutId = undefined;
|
|
}</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.</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.</div><div class="module-members"><article class="module-member declaration"><header class="member-header"><h5 class="member-title" id="chartistbar-declaration-defaultoptions"><span class="member-tag">declaration</span> defaultOptions</h5><button class="api-code-button" data-toggle-visible="#chartistbar-declaration-defaultoptions-code">Show code</button></header><pre id="chartistbar-declaration-defaultoptions-code">
|
|
<code class="javascript">var defaultOptions = {
|
|
// Options for X-Axis
|
|
axisX: {
|
|
// The offset of the chart drawing area to the border of the container
|
|
offset: 30,
|
|
// Position where labels are placed. Can be set to `start` or `end` where `start` is equivalent to left or top on vertical axis and `end` is equivalent to right or bottom on horizontal axis.
|
|
position: 'end',
|
|
// 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: Chartist.noop,
|
|
// This value specifies the minimum width in pixel of the scale steps
|
|
scaleMinSpace: 30,
|
|
// Use only integer values (whole numbers) for the scale steps
|
|
onlyInteger: false
|
|
},
|
|
// Options for Y-Axis
|
|
axisY: {
|
|
// The offset of the chart drawing area to the border of the container
|
|
offset: 40,
|
|
// Position where labels are placed. Can be set to `start` or `end` where `start` is equivalent to left or top on vertical axis and `end` is equivalent to right or bottom on horizontal axis.
|
|
position: 'start',
|
|
// 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: Chartist.noop,
|
|
// This value specifies the minimum height in pixel of the scale steps
|
|
scaleMinSpace: 20,
|
|
// Use only integer values (whole numbers) for the scale steps
|
|
onlyInteger: false
|
|
},
|
|
// 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 high of the chart allows you to zoom in or limit the charts highest displayed value
|
|
high: undefined,
|
|
// Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value
|
|
low: undefined,
|
|
// Unless low/high are explicitly set, bar chart will be centered at zero by default. Set referenceValue to null to auto scale.
|
|
referenceValue: 0,
|
|
// Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5}
|
|
chartPadding: {
|
|
top: 15,
|
|
right: 15,
|
|
bottom: 5,
|
|
left: 10
|
|
},
|
|
// Specify the distance in pixel of bars in a group
|
|
seriesBarDistance: 15,
|
|
// If set to true this property will cause the series bars to be stacked. Check the `stackMode` option for further stacking options.
|
|
stackBars: false,
|
|
// If set to 'overlap' this property will force the stacked bars to draw from the zero line.
|
|
// If set to 'accumulate' this property will form a total for each series point. This will also influence the y-axis and the overall bounds of the chart. In stacked mode the seriesBarDistance property will have no effect.
|
|
stackMode: 'accumulate',
|
|
// Inverts the axes of the bar chart in order to draw a horizontal bar chart. Be aware that you also need to invert your axis settings as the Y Axis will now display the labels and the X Axis the values.
|
|
horizontalBars: false,
|
|
// If set to true then each bar will represent a series and the data array is expected to be a one dimensional array of data values rather than a series array of series. This is useful if the bar chart should represent a profile rather than some data over time.
|
|
distributeSeries: false,
|
|
// If true the whole data is reversed including labels, the series order as well as the whole series data arrays.
|
|
reverseData: false,
|
|
// If the bar chart should add a background fill to the .ct-grids group.
|
|
showGridBackground: false,
|
|
// Override the class names that get used to generate the SVG structure of the chart
|
|
classNames: {
|
|
chart: 'ct-chart-bar',
|
|
horizontalBars: 'ct-horizontal-bars',
|
|
label: 'ct-label',
|
|
labelGroup: 'ct-labels',
|
|
series: 'ct-series',
|
|
bar: 'ct-bar',
|
|
grid: 'ct-grid',
|
|
gridGroup: 'ct-grids',
|
|
gridBackground: 'ct-grid-background',
|
|
vertical: 'ct-vertical',
|
|
horizontal: 'ct-horizontal',
|
|
start: 'ct-start',
|
|
end: 'ct-end'
|
|
}
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Default options in bar charts. Expand the code view to see a detailed list of options with comments.</div></div></article><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,
|
|
defaultOptions,
|
|
Chartist.extend({}, defaultOptions, options),
|
|
responsiveOptions);
|
|
}
|
|
|
|
// Creating bar chart type in Chartist namespace
|
|
Chartist.Bar = Chartist.Base.extend({
|
|
constructor: Bar,
|
|
createChart: createChart
|
|
});
|
|
|
|
}(this, 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.</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">// 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.</div><div class="module-members"><article class="module-member declaration"><header class="member-header"><h5 class="member-title" id="chartistline-declaration-defaultoptions"><span class="member-tag">declaration</span> defaultOptions</h5><button class="api-code-button" data-toggle-visible="#chartistline-declaration-defaultoptions-code">Show code</button></header><pre id="chartistline-declaration-defaultoptions-code">
|
|
<code class="javascript">var defaultOptions = {
|
|
// Options for X-Axis
|
|
axisX: {
|
|
// The offset of the labels to the chart area
|
|
offset: 30,
|
|
// Position where labels are placed. Can be set to `start` or `end` where `start` is equivalent to left or top on vertical axis and `end` is equivalent to right or bottom on horizontal axis.
|
|
position: 'end',
|
|
// 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: Chartist.noop,
|
|
// Set the axis type to be used to project values on this axis. If not defined, Chartist.StepAxis will be used for the X-Axis, where the ticks option will be set to the labels in the data and the stretch option will be set to the global fullWidth option. This type can be changed to any axis constructor available (e.g. Chartist.FixedScaleAxis), where all axis options should be present here.
|
|
type: undefined
|
|
},
|
|
// Options for Y-Axis
|
|
axisY: {
|
|
// The offset of the labels to the chart area
|
|
offset: 40,
|
|
// Position where labels are placed. Can be set to `start` or `end` where `start` is equivalent to left or top on vertical axis and `end` is equivalent to right or bottom on horizontal axis.
|
|
position: 'start',
|
|
// 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: Chartist.noop,
|
|
// Set the axis type to be used to project values on this axis. If not defined, Chartist.AutoScaleAxis will be used for the Y-Axis, where the high and low options will be set to the global high and low options. This type can be changed to any axis constructor available (e.g. Chartist.FixedScaleAxis), where all axis options should be present here.
|
|
type: undefined,
|
|
// This value specifies the minimum height in pixel of the scale steps
|
|
scaleMinSpace: 20,
|
|
// Use only integer values (whole numbers) for the scale steps
|
|
onlyInteger: false
|
|
},
|
|
// 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. This value can be true or false where true will result in smoothing using the default smoothing interpolation function Chartist.Interpolation.cardinal and false results in Chartist.Interpolation.none. You can also choose other smoothing / interpolation functions available in the Chartist.Interpolation module, or write your own interpolation function. Check the examples for a brief description.
|
|
lineSmooth: true,
|
|
// If the line chart should add a background fill to the .ct-grids group.
|
|
showGridBackground: false,
|
|
// 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 as a number or padding object {top: 5, right: 5, bottom: 5, left: 5}
|
|
chartPadding: {
|
|
top: 15,
|
|
right: 15,
|
|
bottom: 5,
|
|
left: 10
|
|
},
|
|
// When set to true, the last grid line on the x-axis is not drawn and the chart elements will expand to the full available width of the chart. For the last label to be drawn correctly you might need to add chart padding or offset the last label with a draw event handler.
|
|
fullWidth: false,
|
|
// If true the whole data is reversed including labels, the series order as well as the whole series data arrays.
|
|
reverseData: false,
|
|
// 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',
|
|
gridBackground: 'ct-grid-background',
|
|
vertical: 'ct-vertical',
|
|
horizontal: 'ct-horizontal',
|
|
start: 'ct-start',
|
|
end: 'ct-end'
|
|
}
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Default options in line charts. Expand the code view to see a detailed list of options with comments.</div></div></article><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,
|
|
defaultOptions,
|
|
Chartist.extend({}, defaultOptions, options),
|
|
responsiveOptions);
|
|
}
|
|
|
|
// Creating line chart type in Chartist namespace
|
|
Chartist.Line = Chartist.Base.extend({
|
|
constructor: Line,
|
|
createChart: createChart
|
|
});
|
|
|
|
}(this, Chartist));</code>
|
|
</pre><div class="member-content"><div class="description"><p>This method creates a new line chart.</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">// 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">// Use specific interpolation function with configuration from the Chartist.Interpolation module
|
|
|
|
var chart = new Chartist.Line('.ct-chart', {
|
|
labels: [1, 2, 3, 4, 5],
|
|
series: [
|
|
[1, 1, 8, 1, 7]
|
|
]
|
|
}, {
|
|
lineSmooth: Chartist.Interpolation.cardinal({
|
|
tension: 0.2
|
|
})
|
|
});
|
|
</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 addition 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</div><div class="module-members"><article class="module-member declaration"><header class="member-header"><h5 class="member-title" id="chartistpie-declaration-defaultoptions"><span class="member-tag">declaration</span> defaultOptions</h5><button class="api-code-button" data-toggle-visible="#chartistpie-declaration-defaultoptions-code">Show code</button></header><pre id="chartistpie-declaration-defaultoptions-code">
|
|
<code class="javascript">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 as a number or padding object {top: 5, right: 5, bottom: 5, left: 5}
|
|
chartPadding: 5,
|
|
// Override the class names that are used to generate the SVG structure of the chart
|
|
classNames: {
|
|
chartPie: 'ct-chart-pie',
|
|
chartDonut: 'ct-chart-donut',
|
|
series: 'ct-series',
|
|
slicePie: 'ct-slice-pie',
|
|
sliceDonut: 'ct-slice-donut',
|
|
sliceDonutSolid: 'ct-slice-donut-solid',
|
|
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,
|
|
// If specified the donut segments will be drawn as shapes instead of strokes.
|
|
donutSolid: false,
|
|
// Specify the donut stroke width, currently done in javascript for convenience. May move to CSS styles in the future.
|
|
// This option can be set as number or string to specify a relative width (i.e. 100 or '30%').
|
|
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,
|
|
// This option can be set to 'inside', 'outside' or 'center'. Positioned with 'inside' the labels will be placed on half the distance of the radius to the border of the Pie by respecting the 'labelOffset'. The 'outside' option will place the labels at the border of the pie and 'center' will place the labels in the absolute center point of the chart. The 'center' option only makes sense in conjunction with the 'labelOffset' option.
|
|
labelPosition: 'inside',
|
|
// An interpolation function for the label value
|
|
labelInterpolationFnc: Chartist.noop,
|
|
// 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',
|
|
// If true the whole data is reversed including labels, the series order as well as the whole series data arrays.
|
|
reverseData: false,
|
|
// If true empty values will be ignored to avoid drawing unncessary slices and labels
|
|
ignoreEmptyValues: false
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Default options in line charts. Expand the code view to see a detailed list of options with comments.</div></div></article><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,
|
|
defaultOptions,
|
|
Chartist.extend({}, defaultOptions, options),
|
|
responsiveOptions);
|
|
}
|
|
|
|
// Creating pie chart type in Chartist namespace
|
|
Chartist.Pie = Chartist.Base.extend({
|
|
constructor: Pie,
|
|
createChart: createChart,
|
|
determineAnchorPosition: determineAnchorPosition
|
|
});
|
|
|
|
}(this, 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.</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. The series property can also be an array of value objects that contain a value property and a className property to override the CSS class name for the series group.</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">// 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><pre class="api-example"><code class="js">// Overriding the class names for individual series as well as a name and meta data.
|
|
// The name will be written as ct:series-name attribute and the meta data will be serialized and written
|
|
// to a ct:meta attribute.
|
|
new Chartist.Pie('.ct-chart', {
|
|
series: [{
|
|
value: 20,
|
|
name: 'Series 1',
|
|
className: 'my-custom-class-one',
|
|
meta: 'Meta One'
|
|
}, {
|
|
value: 10,
|
|
name: 'Series 2',
|
|
className: 'my-custom-class-two',
|
|
meta: 'Meta Two'
|
|
}, {
|
|
value: 70,
|
|
name: 'Series 3',
|
|
className: 'my-custom-class-three',
|
|
meta: 'Meta Three'
|
|
}]
|
|
});</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.</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;
|
|
}
|
|
|
|
// 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,
|
|
cloneDefinitions: cloneDefinitions
|
|
};
|
|
|
|
}(this, Chartist));</code>
|
|
</pre><div class="member-content"><div class="description"><p>Method to extend from current prototype.</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>Returns</h6><div class="return">( <span class="param-type"><code>Function</code></span> )<div class="param-description">Constructor function of the new 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);</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.</div><div class="module-members"><article class="module-member property"><header class="member-header"><h5 class="member-title" id="chartistcore-property-namespaces"><span class="member-tag">property</span> Chartist.namespaces</h5><button class="api-code-button" data-toggle-visible="#chartistcore-property-namespaces-code">Show code</button></header><pre id="chartistcore-property-namespaces-code">
|
|
<code class="javascript">Chartist.namespaces = {
|
|
svg: 'http://www.w3.org/2000/svg',
|
|
xmlns: 'http://www.w3.org/2000/xmlns/',
|
|
xhtml: 'http://www.w3.org/1999/xhtml',
|
|
xlink: 'http://www.w3.org/1999/xlink',
|
|
ct: 'http://gionkunz.github.com/chartist-js/ct'
|
|
};
|
|
|
|
/**
|
|
* Helps to simplify functional style code
|
|
*
|
|
* @memberof Chartist.Core
|
|
* @param {*} n This exact value will be returned by the noop function
|
|
* @return {*} The same value that was provided to the n parameter
|
|
*/
|
|
Chartist.noop = function (n) {
|
|
return n;
|
|
};
|
|
|
|
/**
|
|
* Generates a-z from a number 0 to 26
|
|
*
|
|
* @memberof Chartist.Core
|
|
* @param {Number} n A number from 0 to 26 that will result in a letter a-z
|
|
* @return {String} A character from a-z based on the input number n
|
|
*/
|
|
Chartist.alphaNumerate = function (n) {
|
|
// Limit to a-z
|
|
return String.fromCharCode(97 + n % 26);
|
|
};
|
|
|
|
/**
|
|
* Simple recursive object extend
|
|
*
|
|
* @memberof Chartist.Core
|
|
* @param {Object} target Target object where the source will be merged into
|
|
* @param {Object...} sources This object (objects) will be merged into target and then target is returned
|
|
* @return {Object} An object that has the same reference as target but is extended and merged with the properties of source
|
|
*/
|
|
Chartist.extend = function (target) {
|
|
var i, source, sourceProp;
|
|
target = target || {};
|
|
|
|
for (i = 1; i < arguments.length; i++) {
|
|
source = arguments[i];
|
|
for (var prop in source) {
|
|
sourceProp = source[prop];
|
|
if (typeof sourceProp === 'object' && sourceProp !== null && !(sourceProp instanceof Array)) {
|
|
target[prop] = Chartist.extend(target[prop], sourceProp);
|
|
} else {
|
|
target[prop] = sourceProp;
|
|
}
|
|
}
|
|
}
|
|
|
|
return target;
|
|
};
|
|
|
|
/**
|
|
* Replaces all occurrences of subStr in str with newSubStr and returns a new string.
|
|
*
|
|
* @memberof Chartist.Core
|
|
* @param {String} str
|
|
* @param {String} subStr
|
|
* @param {String} newSubStr
|
|
* @return {String}
|
|
*/
|
|
Chartist.replaceAll = function(str, subStr, newSubStr) {
|
|
return str.replace(new RegExp(subStr, 'g'), newSubStr);
|
|
};
|
|
|
|
/**
|
|
* Converts a number to a string with a unit. If a string is passed then this will be returned unmodified.
|
|
*
|
|
* @memberof Chartist.Core
|
|
* @param {Number} value
|
|
* @param {String} unit
|
|
* @return {String} Returns the passed number value with unit.
|
|
*/
|
|
Chartist.ensureUnit = function(value, unit) {
|
|
if(typeof value === 'number') {
|
|
value = value + unit;
|
|
}
|
|
|
|
return value;
|
|
};
|
|
|
|
/**
|
|
* Converts a number or string to a quantity object.
|
|
*
|
|
* @memberof Chartist.Core
|
|
* @param {String|Number} input
|
|
* @return {Object} Returns an object containing the value as number and the unit as string.
|
|
*/
|
|
Chartist.quantity = function(input) {
|
|
if (typeof input === 'string') {
|
|
var match = (/^(\d+)\s*(.*)$/g).exec(input);
|
|
return {
|
|
value : +match[1],
|
|
unit: match[2] || undefined
|
|
};
|
|
}
|
|
return { value: input };
|
|
};
|
|
|
|
/**
|
|
* This is a wrapper around document.querySelector that will return the query if it's already of type Node
|
|
*
|
|
* @memberof Chartist.Core
|
|
* @param {String|Node} query The query to use for selecting a Node or a DOM node that will be returned directly
|
|
* @return {Node}
|
|
*/
|
|
Chartist.querySelector = function(query) {
|
|
return query instanceof Node ? query : document.querySelector(query);
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>This object contains all namespaces used within Chartist.</div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-times"><span class="member-tag">method</span> Chartist.times()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-times-code">Show code</button></header><pre id="chartistcore-method-times-code">
|
|
<code class="javascript">Chartist.times = function(length) {
|
|
return Array.apply(null, new Array(length));
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Functional style helper to produce array with given length initialized with undefined values</div><h6>Parameters</h6><div class="param"><code></code> ( <span class="param-type"><code>length</code></span> )<div class="param-description"></div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Array</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-sum"><span class="member-tag">method</span> Chartist.sum()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-sum-code">Show code</button></header><pre id="chartistcore-method-sum-code">
|
|
<code class="javascript">Chartist.sum = function(previous, current) {
|
|
return previous + (current ? current : 0);
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Sum helper to be used in reduce functions</div><h6>Parameters</h6><div class="param"><code></code> ( <span class="param-type"><code>previous</code></span> )<div class="param-description"></div></div><div class="param"><code></code> ( <span class="param-type"><code>current</code></span> )<div class="param-description"></div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>*</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-mapmultiply"><span class="member-tag">method</span> Chartist.mapMultiply()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-mapmultiply-code">Show code</button></header><pre id="chartistcore-method-mapmultiply-code">
|
|
<code class="javascript">Chartist.mapMultiply = function(factor) {
|
|
return function(num) {
|
|
return num * factor;
|
|
};
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Multiply helper to be used in <code>Array.map</code> for multiplying each value of an array with a factor.</div><h6>Parameters</h6><div class="param"><code>factor</code> ( <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-mapadd"><span class="member-tag">method</span> Chartist.mapAdd()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-mapadd-code">Show code</button></header><pre id="chartistcore-method-mapadd-code">
|
|
<code class="javascript">Chartist.mapAdd = function(addend) {
|
|
return function(num) {
|
|
return num + addend;
|
|
};
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Add helper to be used in <code>Array.map</code> for adding a addend to each value of an array.</div><h6>Parameters</h6><div class="param"><code>addend</code> ( <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-serialmap"><span class="member-tag">method</span> Chartist.serialMap()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-serialmap-code">Show code</button></header><pre id="chartistcore-method-serialmap-code">
|
|
<code class="javascript">Chartist.serialMap = function(arr, cb) {
|
|
var result = [],
|
|
length = Math.max.apply(null, arr.map(function(e) {
|
|
return e.length;
|
|
}));
|
|
|
|
Chartist.times(length).forEach(function(e, index) {
|
|
var args = arr.map(function(e) {
|
|
return e[index];
|
|
});
|
|
|
|
result[index] = cb.apply(null, args);
|
|
});
|
|
|
|
return result;
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Map for multi dimensional arrays where their nested arrays will be mapped in serial. The output array will have the length of the largest nested array. The callback function is called with variable arguments where each argument is the nested array value (or undefined if there are no more values).</div><h6>Parameters</h6><div class="param"><code></code> ( <span class="param-type"><code>arr</code></span> )<div class="param-description"></div></div><div class="param"><code></code> ( <span class="param-type"><code>cb</code></span> )<div class="param-description"></div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Array</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-roundwithprecision"><span class="member-tag">method</span> Chartist.roundWithPrecision()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-roundwithprecision-code">Show code</button></header><pre id="chartistcore-method-roundwithprecision-code">
|
|
<code class="javascript">Chartist.roundWithPrecision = function(value, digits) {
|
|
var precision = Math.pow(10, digits || Chartist.precision);
|
|
return Math.round(value * precision) / precision;
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>This helper function can be used to round values with certain precision level after decimal. This is used to prevent rounding errors near float point precision limit.</div><h6>Parameters</h6><div class="param"><code>value</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The value that should be rounded with precision</div></div><div class="param"><code>[digits]</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The number of digits after decimal used to do the rounding</div></div></div></article><article class="module-member property"><header class="member-header"><h5 class="member-title" id="chartistcore-property-precision"><span class="member-tag">property</span> Chartist.precision</h5><button class="api-code-button" data-toggle-visible="#chartistcore-property-precision-code">Show code</button></header><pre id="chartistcore-property-precision-code">
|
|
<code class="javascript">Chartist.precision = 8;</code>
|
|
</pre><div class="member-content"><div class="description"><p>Precision level used internally in Chartist for rounding. If you require more decimal places you can increase this number.</div></div></article><article class="module-member property"><header class="member-header"><h5 class="member-title" id="chartistcore-property-escapingmap"><span class="member-tag">property</span> Chartist.escapingMap</h5><button class="api-code-button" data-toggle-visible="#chartistcore-property-escapingmap-code">Show code</button></header><pre id="chartistcore-property-escapingmap-code">
|
|
<code class="javascript">Chartist.escapingMap = {
|
|
'&': '&amp;',
|
|
'<': '&lt;',
|
|
'>': '&gt;',
|
|
'"': '&quot;',
|
|
'\'': '&#039;'
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>A map with characters to escape for strings to be safely used as attribute values.</div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-serialize"><span class="member-tag">method</span> Chartist.serialize()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-serialize-code">Show code</button></header><pre id="chartistcore-method-serialize-code">
|
|
<code class="javascript">Chartist.serialize = function(data) {
|
|
if(data === null || data === undefined) {
|
|
return data;
|
|
} else if(typeof data === 'number') {
|
|
data = ''+data;
|
|
} else if(typeof data === 'object') {
|
|
data = JSON.stringify({data: data});
|
|
}
|
|
|
|
return Object.keys(Chartist.escapingMap).reduce(function(result, key) {
|
|
return Chartist.replaceAll(result, key, Chartist.escapingMap[key]);
|
|
}, data);
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>This function serializes arbitrary data to a string. In case of data that can't be easily converted to a string, this function will create a wrapper object and serialize the data using JSON.stringify. The outcoming string will always be escaped using Chartist.escapingMap.<br>If called with null or undefined the function will return immediately with null or undefined.</div><h6>Parameters</h6><div class="param"><code>data</code> ( <span class="param-type"><code>Number</code></span> <span class="param-type"><code>String</code></span> <span class="param-type"><code>Object</code></span> )<div class="param-description"></div></div><h6>Returns</h6><div class="return">( <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-deserialize"><span class="member-tag">method</span> Chartist.deserialize()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-deserialize-code">Show code</button></header><pre id="chartistcore-method-deserialize-code">
|
|
<code class="javascript">Chartist.deserialize = function(data) {
|
|
if(typeof data !== 'string') {
|
|
return data;
|
|
}
|
|
|
|
data = Object.keys(Chartist.escapingMap).reduce(function(result, key) {
|
|
return Chartist.replaceAll(result, Chartist.escapingMap[key], key);
|
|
}, data);
|
|
|
|
try {
|
|
data = JSON.parse(data);
|
|
data = data.data !== undefined ? data.data : data;
|
|
} catch(e) {}
|
|
|
|
return data;
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>This function de-serializes a string previously serialized with Chartist.serialize. The string will always be unescaped using Chartist.escapingMap before it's returned. Based on the input value the return type can be Number, String or Object. JSON.parse is used with try / catch to see if the unescaped string can be parsed into an Object and this Object will be returned on success.</div><h6>Parameters</h6><div class="param"><code>data</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description"></div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>String</code></span> <span class="param-type"><code>Number</code></span> <span class="param-type"><code>Object</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%';
|
|
|
|
// Check if there is a previous SVG element in the container that contains the Chartist XML namespace and remove it
|
|
// Since the DOM API does not support namespaces we need to manually search the returned list http://www.w3.org/TR/selectors-api/
|
|
Array.prototype.slice.call(container.querySelectorAll('svg')).filter(function filterChartistSvgObjects(svg) {
|
|
return svg.getAttributeNS(Chartist.namespaces.xmlns, 'ct');
|
|
}).forEach(function removePreviousElement(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);
|
|
|
|
svg._node.style.width = width;
|
|
svg._node.style.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</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-reversedata"><span class="member-tag">method</span> Chartist.reverseData()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-reversedata-code">Show code</button></header><pre id="chartistcore-method-reversedata-code">
|
|
<code class="javascript">Chartist.reverseData = function(data) {
|
|
data.labels.reverse();
|
|
data.series.reverse();
|
|
for (var i = 0; i < data.series.length; i++) {
|
|
if(typeof(data.series[i]) === 'object' && data.series[i].data !== undefined) {
|
|
data.series[i].data.reverse();
|
|
} else if(data.series[i] instanceof Array) {
|
|
data.series[i].reverse();
|
|
}
|
|
}
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Reverses the series, labels and series data arrays.</div><h6>Parameters</h6><div class="param"><code></code> ( <span class="param-type"><code>data</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-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, reverse, multi) {
|
|
// Recursively walks through nested arrays and convert string values to numbers and objects with value properties
|
|
// to values. Check the tests in data core -> data normalization for a detailed specification of expected values
|
|
function recursiveConvert(value) {
|
|
if(Chartist.safeHasProperty(value, 'value')) {
|
|
// We are dealing with value object notation so we need to recurse on value property
|
|
return recursiveConvert(value.value);
|
|
} else if(Chartist.safeHasProperty(value, 'data')) {
|
|
// We are dealing with series object notation so we need to recurse on data property
|
|
return recursiveConvert(value.data);
|
|
} else if(value instanceof Array) {
|
|
// Data is of type array so we need to recurse on the series
|
|
return value.map(recursiveConvert);
|
|
} else if(Chartist.isDataHoleValue(value)) {
|
|
// We're dealing with a hole in the data and therefore need to return undefined
|
|
// We're also returning undefined for multi value output
|
|
return undefined;
|
|
} else {
|
|
// We need to prepare multi value output (x and y data)
|
|
if(multi) {
|
|
var multiValue = {};
|
|
|
|
// Single series value arrays are assumed to specify the Y-Axis value
|
|
// For example: [1, 2] => [{x: undefined, y: 1}, {x: undefined, y: 2}]
|
|
// If multi is a string then it's assumed that it specified which dimension should be filled as default
|
|
if(typeof multi === 'string') {
|
|
multiValue[multi] = Chartist.getNumberOrUndefined(value);
|
|
} else {
|
|
multiValue.y = Chartist.getNumberOrUndefined(value);
|
|
}
|
|
|
|
multiValue.x = value.hasOwnProperty('x') ? Chartist.getNumberOrUndefined(value.x) : multiValue.x;
|
|
multiValue.y = value.hasOwnProperty('y') ? Chartist.getNumberOrUndefined(value.y) : multiValue.y;
|
|
|
|
return multiValue;
|
|
|
|
} else {
|
|
// We can return simple data
|
|
return Chartist.getNumberOrUndefined(value);
|
|
}
|
|
}
|
|
}
|
|
|
|
return data.series.map(recursiveConvert);
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Convert data series into plain array</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><div class="param"><code>[reverse]</code> ( <span class="param-type"><code>Boolean</code></span> )<div class="param-description">If true the whole data is reversed by the getDataArray call. This will modify the data object passed as first parameter. The labels as well as the series order is reversed. The whole series data arrays are reversed too.</div></div><div class="param"><code>[multi]</code> ( <span class="param-type"><code>Boolean</code></span> )<div class="param-description">Create a multi dimensional array from a series data array where a value object with `x` and `y` values will be created.</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-normalizepadding"><span class="member-tag">method</span> Chartist.normalizePadding()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-normalizepadding-code">Show code</button></header><pre id="chartistcore-method-normalizepadding-code">
|
|
<code class="javascript">Chartist.normalizePadding = function(padding, fallback) {
|
|
fallback = fallback || 0;
|
|
|
|
return typeof padding === 'number' ? {
|
|
top: padding,
|
|
right: padding,
|
|
bottom: padding,
|
|
left: padding
|
|
} : {
|
|
top: typeof padding.top === 'number' ? padding.top : fallback,
|
|
right: typeof padding.right === 'number' ? padding.right : fallback,
|
|
bottom: typeof padding.bottom === 'number' ? padding.bottom : fallback,
|
|
left: typeof padding.left === 'number' ? padding.left : fallback
|
|
};
|
|
};
|
|
|
|
Chartist.getMetaData = function(series, index) {
|
|
var value = series.data ? series.data[index] : series[index];
|
|
return value ? value.meta : undefined;
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Converts a number into a padding object.</div><h6>Parameters</h6><div class="param"><code>padding</code> ( <span class="param-type"><code>Object</code></span> <span class="param-type"><code>Number</code></span> )<div class="param-description"></div></div><div class="param"><code>[fallback]</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">This value is used to fill missing values if a incomplete padding object was passed</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</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 (axisLength, length, bounds) {
|
|
return length / bounds.range * axisLength;
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Project a data length into screen coordinates (pixels)</div><h6>Parameters</h6><div class="param"><code>axisLength</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><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.quantity(options.height).value || svg.height()) - (options.chartPadding.top + options.chartPadding.bottom) - 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</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 (data, options, dimension) {
|
|
// TODO: Remove workaround for deprecated global high / low config. Axis high / low configuration is preferred
|
|
options = Chartist.extend({}, options, dimension ? options['axis' + dimension.toUpperCase()] : {});
|
|
|
|
var highLow = {
|
|
high: options.high === undefined ? -Number.MAX_VALUE : +options.high,
|
|
low: options.low === undefined ? Number.MAX_VALUE : +options.low
|
|
};
|
|
var findHigh = options.high === undefined;
|
|
var findLow = options.low === undefined;
|
|
|
|
// Function to recursively walk through arrays and find highest and lowest number
|
|
function recursiveHighLow(data) {
|
|
if(data === undefined) {
|
|
return undefined;
|
|
} else if(data instanceof Array) {
|
|
for (var i = 0; i < data.length; i++) {
|
|
recursiveHighLow(data[i]);
|
|
}
|
|
} else {
|
|
var value = dimension ? +data[dimension] : +data;
|
|
|
|
if (findHigh && value > highLow.high) {
|
|
highLow.high = value;
|
|
}
|
|
|
|
if (findLow && value < highLow.low) {
|
|
highLow.low = value;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Start to find highest and lowest number recursively
|
|
if(findHigh || findLow) {
|
|
recursiveHighLow(data);
|
|
}
|
|
|
|
// 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 (options.referenceValue || options.referenceValue === 0) {
|
|
highLow.high = Math.max(options.referenceValue, highLow.high);
|
|
highLow.low = Math.min(options.referenceValue, highLow.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 (highLow.high <= highLow.low) {
|
|
// If both values are 0 we set high to 1
|
|
if (highLow.low === 0) {
|
|
highLow.high = 1;
|
|
} else if (highLow.low < 0) {
|
|
// If we have the same negative value for the bounds we set bounds.high to 0
|
|
highLow.high = 0;
|
|
} else if (highLow.high > 0) {
|
|
// If we have the same positive value for the bounds we set bounds.low to 0
|
|
highLow.low = 0;
|
|
} else {
|
|
// If data array was empty, values are Number.MAX_VALUE and -Number.MAX_VALUE. Set bounds to prevent errors
|
|
highLow.high = 1;
|
|
highLow.low = 0;
|
|
}
|
|
}
|
|
|
|
return highLow;
|
|
};</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.</div><h6>Parameters</h6><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>options</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The Object that contains the chart options</div></div><div class="param"><code>dimension</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">Axis dimension 'x' or 'y' used to access the correct value and high / low configuration</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Object</code></span> )<div class="param-description">An object 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-isnumeric"><span class="member-tag">method</span> Chartist.isNumeric()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-isnumeric-code">Show code</button></header><pre id="chartistcore-method-isnumeric-code">
|
|
<code class="javascript">Chartist.isNumeric = function(value) {
|
|
return value === null ? false : isFinite(value);
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Checks if a value can be safely coerced to a number. This includes all values except null which result in finite numbers when coerced. This excludes NaN, since it's not finite.</div><h6>Parameters</h6><div class="param"><code></code> ( <span class="param-type"><code>value</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-isfalseybutzero"><span class="member-tag">method</span> Chartist.isFalseyButZero()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-isfalseybutzero-code">Show code</button></header><pre id="chartistcore-method-isfalseybutzero-code">
|
|
<code class="javascript">Chartist.isFalseyButZero = function(value) {
|
|
return !value && value !== 0;
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Returns true on all falsey values except the numeric value 0.</div><h6>Parameters</h6><div class="param"><code></code> ( <span class="param-type"><code>value</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-getnumberorundefined"><span class="member-tag">method</span> Chartist.getNumberOrUndefined()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-getnumberorundefined-code">Show code</button></header><pre id="chartistcore-method-getnumberorundefined-code">
|
|
<code class="javascript">Chartist.getNumberOrUndefined = function(value) {
|
|
return Chartist.isNumeric(value) ? +value : undefined;
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Returns a number if the passed parameter is a valid number or the function will return undefined. On all other values than a valid number, this function will return undefined.</div><h6>Parameters</h6><div class="param"><code></code> ( <span class="param-type"><code>value</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-ismultivalue"><span class="member-tag">method</span> Chartist.isMultiValue()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-ismultivalue-code">Show code</button></header><pre id="chartistcore-method-ismultivalue-code">
|
|
<code class="javascript">Chartist.isMultiValue = function(value) {
|
|
return typeof value === 'object' && ('x' in value || 'y' in value);
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Checks if provided value object is multi value (contains x or y properties)</div><h6>Parameters</h6><div class="param"><code></code> ( <span class="param-type"><code>value</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-getmultivalue"><span class="member-tag">method</span> Chartist.getMultiValue()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-getmultivalue-code">Show code</button></header><pre id="chartistcore-method-getmultivalue-code">
|
|
<code class="javascript">Chartist.getMultiValue = function(value, dimension) {
|
|
if(Chartist.isMultiValue(value)) {
|
|
return Chartist.getNumberOrUndefined(value[dimension || 'y']);
|
|
} else {
|
|
return Chartist.getNumberOrUndefined(value);
|
|
}
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Gets a value from a dimension <code>value.x</code> or <code>value.y</code> while returning value directly if it's a valid numeric value. If the value is not numeric and it's falsey this function will return <code>defaultValue</code>.</div><h6>Parameters</h6><div class="param"><code></code> ( <span class="param-type"><code>value</code></span> )<div class="param-description"></div></div><div class="param"><code></code> ( <span class="param-type"><code>dimension</code></span> )<div class="param-description"></div></div><div class="param"><code></code> ( <span class="param-type"><code>defaultValue</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-rho"><span class="member-tag">method</span> Chartist.rho()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-rho-code">Show code</button></header><pre id="chartistcore-method-rho-code">
|
|
<code class="javascript">Chartist.rho = function(num) {
|
|
if(num === 1) {
|
|
return num;
|
|
}
|
|
|
|
function gcd(p, q) {
|
|
if (p % q === 0) {
|
|
return q;
|
|
} else {
|
|
return gcd(q, p % q);
|
|
}
|
|
}
|
|
|
|
function f(x) {
|
|
return x * x + 1;
|
|
}
|
|
|
|
var x1 = 2, x2 = 2, divisor;
|
|
if (num % 2 === 0) {
|
|
return 2;
|
|
}
|
|
|
|
do {
|
|
x1 = f(x1) % num;
|
|
x2 = f(f(x2)) % num;
|
|
divisor = gcd(Math.abs(x1 - x2), num);
|
|
} while (divisor === 1);
|
|
|
|
return divisor;
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Pollard Rho Algorithm to find smallest factor of an integer value. There are more efficient algorithms for factorization, but this one is quite efficient and not so complex.</div><h6>Parameters</h6><div class="param"><code>num</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">An integer number where the smallest factor should be searched for</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 (axisLength, highLow, scaleMinSpace, onlyInteger) {
|
|
var i,
|
|
optimizationCounter = 0,
|
|
newMin,
|
|
newMax,
|
|
bounds = {
|
|
high: highLow.high,
|
|
low: highLow.low
|
|
};
|
|
|
|
bounds.valueRange = bounds.high - bounds.low;
|
|
bounds.oom = Chartist.orderOfMagnitude(bounds.valueRange);
|
|
bounds.step = Math.pow(10, bounds.oom);
|
|
bounds.min = Math.floor(bounds.low / bounds.step) * bounds.step;
|
|
bounds.max = Math.ceil(bounds.high / bounds.step) * bounds.step;
|
|
bounds.range = bounds.max - bounds.min;
|
|
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(axisLength, bounds.step, bounds);
|
|
var scaleUp = length < scaleMinSpace;
|
|
var smallestFactor = onlyInteger ? Chartist.rho(bounds.range) : 0;
|
|
|
|
// First check if we should only use integer steps and if step 1 is still larger than scaleMinSpace so we can use 1
|
|
if(onlyInteger && Chartist.projectLength(axisLength, 1, bounds) >= scaleMinSpace) {
|
|
bounds.step = 1;
|
|
} else if(onlyInteger && smallestFactor < bounds.step && Chartist.projectLength(axisLength, smallestFactor, bounds) >= scaleMinSpace) {
|
|
// If step 1 was too small, we can try the smallest factor of range
|
|
// If the smallest factor is smaller than the current bounds.step and the projected length of smallest factor
|
|
// is larger than the scaleMinSpace we should go for it.
|
|
bounds.step = smallestFactor;
|
|
} else {
|
|
// Trying to divide or multiply by 2 and find the best step value
|
|
while (true) {
|
|
if (scaleUp && Chartist.projectLength(axisLength, bounds.step, bounds) <= scaleMinSpace) {
|
|
bounds.step *= 2;
|
|
} else if (!scaleUp && Chartist.projectLength(axisLength, bounds.step / 2, bounds) >= scaleMinSpace) {
|
|
bounds.step /= 2;
|
|
if(onlyInteger && bounds.step % 1 !== 0) {
|
|
bounds.step *= 2;
|
|
break;
|
|
}
|
|
} else {
|
|
break;
|
|
}
|
|
|
|
if(optimizationCounter++ > 1000) {
|
|
throw new Error('Exceeded maximum number of iterations while optimizing scale step!');
|
|
}
|
|
}
|
|
}
|
|
|
|
var EPSILON = 2.221E-16;
|
|
bounds.step = Math.max(bounds.step, EPSILON);
|
|
function safeIncrement(value, increment) {
|
|
// If increment is too small use *= (1+EPSILON) as a simple nextafter
|
|
if (value === (value += increment)) {
|
|
value *= (1 + (increment > 0 ? EPSILON : -EPSILON));
|
|
}
|
|
return value;
|
|
}
|
|
|
|
// Narrow min and max based on new step
|
|
newMin = bounds.min;
|
|
newMax = bounds.max;
|
|
while (newMin + bounds.step <= bounds.low) {
|
|
newMin = safeIncrement(newMin, bounds.step);
|
|
}
|
|
while (newMax - bounds.step >= bounds.high) {
|
|
newMax = safeIncrement(newMax, -bounds.step);
|
|
}
|
|
bounds.min = newMin;
|
|
bounds.max = newMax;
|
|
bounds.range = bounds.max - bounds.min;
|
|
|
|
var values = [];
|
|
for (i = bounds.min; i <= bounds.max; i = safeIncrement(i, bounds.step)) {
|
|
var value = Chartist.roundWithPrecision(i);
|
|
if (value !== values[values.length - 1]) {
|
|
values.push(value);
|
|
}
|
|
}
|
|
bounds.values = values;
|
|
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</div><h6>Parameters</h6><div class="param"><code>axisLength</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The length of the Axis used for</div></div><div class="param"><code>highLow</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">An object containing a high and low property indicating the value range of the chart.</div></div><div class="param"><code>scaleMinSpace</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The minimum projected length a step should result in</div></div><div class="param"><code>onlyInteger</code> ( <span class="param-type"><code>Boolean</code></span> )<div class="param-description"></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</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>x:Number</code></span> <span class="param-type"><code></code></span> )<div class="param-description">y:Number}} 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, fallbackPadding) {
|
|
var hasAxis = !!(options.axisX || options.axisY);
|
|
var yAxisOffset = hasAxis ? options.axisY.offset : 0;
|
|
var xAxisOffset = hasAxis ? options.axisX.offset : 0;
|
|
// If width or height results in invalid value (including 0) we fallback to the unitless settings or even 0
|
|
var width = svg.width() || Chartist.quantity(options.width).value || 0;
|
|
var height = svg.height() || Chartist.quantity(options.height).value || 0;
|
|
var normalizedPadding = Chartist.normalizePadding(options.chartPadding, fallbackPadding);
|
|
|
|
// If settings were to small to cope with offset (legacy) and padding, we'll adjust
|
|
width = Math.max(width, yAxisOffset + normalizedPadding.left + normalizedPadding.right);
|
|
height = Math.max(height, xAxisOffset + normalizedPadding.top + normalizedPadding.bottom);
|
|
|
|
var chartRect = {
|
|
padding: normalizedPadding,
|
|
width: function () {
|
|
return this.x2 - this.x1;
|
|
},
|
|
height: function () {
|
|
return this.y1 - this.y2;
|
|
}
|
|
};
|
|
|
|
if(hasAxis) {
|
|
if (options.axisX.position === 'start') {
|
|
chartRect.y2 = normalizedPadding.top + xAxisOffset;
|
|
chartRect.y1 = Math.max(height - normalizedPadding.bottom, chartRect.y2 + 1);
|
|
} else {
|
|
chartRect.y2 = normalizedPadding.top;
|
|
chartRect.y1 = Math.max(height - normalizedPadding.bottom - xAxisOffset, chartRect.y2 + 1);
|
|
}
|
|
|
|
if (options.axisY.position === 'start') {
|
|
chartRect.x1 = normalizedPadding.left + yAxisOffset;
|
|
chartRect.x2 = Math.max(width - normalizedPadding.right, chartRect.x1 + 1);
|
|
} else {
|
|
chartRect.x1 = normalizedPadding.left;
|
|
chartRect.x2 = Math.max(width - normalizedPadding.right - yAxisOffset, chartRect.x1 + 1);
|
|
}
|
|
} else {
|
|
chartRect.x1 = normalizedPadding.left;
|
|
chartRect.x2 = Math.max(width - normalizedPadding.right, chartRect.x1 + 1);
|
|
chartRect.y2 = normalizedPadding.top;
|
|
chartRect.y1 = Math.max(height - normalizedPadding.bottom, chartRect.y2 + 1);
|
|
}
|
|
|
|
return chartRect;
|
|
};</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</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><div class="param"><code>[fallbackPadding]</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The fallback padding if partial padding objects are used</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-creategrid"><span class="member-tag">method</span> Chartist.createGrid()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-creategrid-code">Show code</button></header><pre id="chartistcore-method-creategrid-code">
|
|
<code class="javascript">Chartist.createGrid = function(position, index, axis, offset, length, group, classes, eventEmitter) {
|
|
var positionalData = {};
|
|
positionalData[axis.units.pos + '1'] = position;
|
|
positionalData[axis.units.pos + '2'] = position;
|
|
positionalData[axis.counterUnits.pos + '1'] = offset;
|
|
positionalData[axis.counterUnits.pos + '2'] = offset + length;
|
|
|
|
var gridElement = group.elem('line', positionalData, classes.join(' '));
|
|
|
|
// Event for grid draw
|
|
eventEmitter.emit('draw',
|
|
Chartist.extend({
|
|
type: 'grid',
|
|
axis: axis,
|
|
index: index,
|
|
group: group,
|
|
element: gridElement
|
|
}, positionalData)
|
|
);
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Creates a grid line based on a projected value.</div><h6>Parameters</h6><div class="param"><code></code> ( <span class="param-type"><code>position</code></span> )<div class="param-description"></div></div><div class="param"><code></code> ( <span class="param-type"><code>index</code></span> )<div class="param-description"></div></div><div class="param"><code></code> ( <span class="param-type"><code>axis</code></span> )<div class="param-description"></div></div><div class="param"><code></code> ( <span class="param-type"><code>offset</code></span> )<div class="param-description"></div></div><div class="param"><code></code> ( <span class="param-type"><code>length</code></span> )<div class="param-description"></div></div><div class="param"><code></code> ( <span class="param-type"><code>group</code></span> )<div class="param-description"></div></div><div class="param"><code></code> ( <span class="param-type"><code>classes</code></span> )<div class="param-description"></div></div><div class="param"><code></code> ( <span class="param-type"><code>eventEmitter</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-creategridbackground"><span class="member-tag">method</span> Chartist.createGridBackground()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-creategridbackground-code">Show code</button></header><pre id="chartistcore-method-creategridbackground-code">
|
|
<code class="javascript">Chartist.createGridBackground = function (gridGroup, chartRect, className, eventEmitter) {
|
|
var gridBackground = gridGroup.elem('rect', {
|
|
x: chartRect.x1,
|
|
y: chartRect.y2,
|
|
width: chartRect.width(),
|
|
height: chartRect.height(),
|
|
}, className, true);
|
|
|
|
// Event for grid background draw
|
|
eventEmitter.emit('draw', {
|
|
type: 'gridBackground',
|
|
group: gridGroup,
|
|
element: gridBackground
|
|
});
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Creates a grid background rect and emits the draw event.</div><h6>Parameters</h6><div class="param"><code></code> ( <span class="param-type"><code>gridGroup</code></span> )<div class="param-description"></div></div><div class="param"><code></code> ( <span class="param-type"><code>chartRect</code></span> )<div class="param-description"></div></div><div class="param"><code></code> ( <span class="param-type"><code>className</code></span> )<div class="param-description"></div></div><div class="param"><code></code> ( <span class="param-type"><code>eventEmitter</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-createlabel"><span class="member-tag">method</span> Chartist.createLabel()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-createlabel-code">Show code</button></header><pre id="chartistcore-method-createlabel-code">
|
|
<code class="javascript">Chartist.createLabel = function(position, length, index, labels, axis, axisOffset, labelOffset, group, classes, useForeignObject, eventEmitter) {
|
|
var labelElement;
|
|
var positionalData = {};
|
|
|
|
positionalData[axis.units.pos] = position + labelOffset[axis.units.pos];
|
|
positionalData[axis.counterUnits.pos] = labelOffset[axis.counterUnits.pos];
|
|
positionalData[axis.units.len] = length;
|
|
positionalData[axis.counterUnits.len] = Math.max(0, axisOffset - 10);
|
|
|
|
if(useForeignObject) {
|
|
// We need to set width and height explicitly to px as span will not expand with width and height being
|
|
// 100% in all browsers
|
|
var content = document.createElement('span');
|
|
content.className = classes.join(' ');
|
|
content.setAttribute('xmlns', Chartist.namespaces.xhtml);
|
|
content.innerText = labels[index];
|
|
content.style[axis.units.len] = Math.round(positionalData[axis.units.len]) + 'px';
|
|
content.style[axis.counterUnits.len] = Math.round(positionalData[axis.counterUnits.len]) + 'px';
|
|
|
|
labelElement = group.foreignObject(content, Chartist.extend({
|
|
style: 'overflow: visible;'
|
|
}, positionalData));
|
|
} else {
|
|
labelElement = group.elem('text', positionalData, classes.join(' ')).text(labels[index]);
|
|
}
|
|
|
|
eventEmitter.emit('draw', Chartist.extend({
|
|
type: 'label',
|
|
axis: axis,
|
|
index: index,
|
|
group: group,
|
|
element: labelElement,
|
|
text: labels[index]
|
|
}, positionalData));
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Creates a label based on a projected value and an axis.</div><h6>Parameters</h6><div class="param"><code></code> ( <span class="param-type"><code>position</code></span> )<div class="param-description"></div></div><div class="param"><code></code> ( <span class="param-type"><code>length</code></span> )<div class="param-description"></div></div><div class="param"><code></code> ( <span class="param-type"><code>index</code></span> )<div class="param-description"></div></div><div class="param"><code></code> ( <span class="param-type"><code>labels</code></span> )<div class="param-description"></div></div><div class="param"><code></code> ( <span class="param-type"><code>axis</code></span> )<div class="param-description"></div></div><div class="param"><code></code> ( <span class="param-type"><code>axisOffset</code></span> )<div class="param-description"></div></div><div class="param"><code></code> ( <span class="param-type"><code>labelOffset</code></span> )<div class="param-description"></div></div><div class="param"><code></code> ( <span class="param-type"><code>group</code></span> )<div class="param-description"></div></div><div class="param"><code></code> ( <span class="param-type"><code>classes</code></span> )<div class="param-description"></div></div><div class="param"><code></code> ( <span class="param-type"><code>useForeignObject</code></span> )<div class="param-description"></div></div><div class="param"><code></code> ( <span class="param-type"><code>eventEmitter</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-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(mediaEvent) {
|
|
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 && mediaEvent) {
|
|
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 without an event argument so we get the correct options
|
|
updateCurrentOptions();
|
|
|
|
return {
|
|
removeMediaQueryListeners: removeMediaQueryListeners,
|
|
getCurrentOptions: function getCurrentOptions() {
|
|
return Chartist.extend({}, currentOptions);
|
|
}
|
|
};
|
|
};
|
|
|
|
|
|
/**
|
|
* Splits a list of coordinates and associated values into segments. Each returned segment contains a pathCoordinates
|
|
* valueData property describing the segment.
|
|
*
|
|
* With the default options, segments consist of contiguous sets of points that do not have an undefined value. Any
|
|
* points with undefined values are discarded.
|
|
*
|
|
* **Options**
|
|
* The following options are used to determine how segments are formed
|
|
* ```javascript
|
|
* var options = {
|
|
* // If fillHoles is true, undefined values are simply discarded without creating a new segment. Assuming other options are default, this returns single segment.
|
|
* fillHoles: false,
|
|
* // If increasingX is true, the coordinates in all segments have strictly increasing x-values.
|
|
* increasingX: false
|
|
* };
|
|
* ```
|
|
*
|
|
* @memberof Chartist.Core
|
|
* @param {Array} pathCoordinates List of point coordinates to be split in the form [x1, y1, x2, y2 ... xn, yn]
|
|
* @param {Array} values List of associated point values in the form [v1, v2 .. vn]
|
|
* @param {Object} options Options set by user
|
|
* @return {Array} List of segments, each containing a pathCoordinates and valueData property.
|
|
*/
|
|
Chartist.splitIntoSegments = function(pathCoordinates, valueData, options) {
|
|
var defaultOptions = {
|
|
increasingX: false,
|
|
fillHoles: false
|
|
};
|
|
|
|
options = Chartist.extend({}, defaultOptions, options);
|
|
|
|
var segments = [];
|
|
var hole = true;
|
|
|
|
for(var i = 0; i < pathCoordinates.length; i += 2) {
|
|
// If this value is a "hole" we set the hole flag
|
|
if(Chartist.getMultiValue(valueData[i / 2].value) === undefined) {
|
|
// if(valueData[i / 2].value === undefined) {
|
|
if(!options.fillHoles) {
|
|
hole = true;
|
|
}
|
|
} else {
|
|
if(options.increasingX && i >= 2 && pathCoordinates[i] <= pathCoordinates[i-2]) {
|
|
// X is not increasing, so we need to make sure we start a new segment
|
|
hole = true;
|
|
}
|
|
|
|
|
|
// If it's a valid value we need to check if we're coming out of a hole and create a new empty segment
|
|
if(hole) {
|
|
segments.push({
|
|
pathCoordinates: [],
|
|
valueData: []
|
|
});
|
|
// As we have a valid value now, we are not in a "hole" anymore
|
|
hole = false;
|
|
}
|
|
|
|
// Add to the segment pathCoordinates and valueData
|
|
segments[segments.length - 1].pathCoordinates.push(pathCoordinates[i], pathCoordinates[i + 1]);
|
|
segments[segments.length - 1].valueData.push(valueData[i / 2]);
|
|
}
|
|
}
|
|
|
|
return segments;
|
|
};
|
|
}(this, 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</div><h6>Parameters</h6><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.</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</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.</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
|
|
};
|
|
};
|
|
|
|
}(this, 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.</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>interpolation.js</h3></header><div class="content"><section class="sub-section"><header><h4 id="module-chartistinterpolation">Module Chartist.Interpolation</h4><div class="module-description"><p>Chartist path interpolation functions.</div><div class="module-members"><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistinterpolation-method-none"><span class="member-tag">method</span> Chartist.Interpolation.none()</h5><button class="api-code-button" data-toggle-visible="#chartistinterpolation-method-none-code">Show code</button></header><pre id="chartistinterpolation-method-none-code">
|
|
<code class="javascript">Chartist.Interpolation.none = function(options) {
|
|
var defaultOptions = {
|
|
fillHoles: false
|
|
};
|
|
options = Chartist.extend({}, defaultOptions, options);
|
|
return function none(pathCoordinates, valueData) {
|
|
var path = new Chartist.Svg.Path();
|
|
var hole = true;
|
|
|
|
for(var i = 0; i < pathCoordinates.length; i += 2) {
|
|
var currX = pathCoordinates[i];
|
|
var currY = pathCoordinates[i + 1];
|
|
var currData = valueData[i / 2];
|
|
|
|
if(Chartist.getMultiValue(currData.value) !== undefined) {
|
|
|
|
if(hole) {
|
|
path.move(currX, currY, false, currData);
|
|
} else {
|
|
path.line(currX, currY, false, currData);
|
|
}
|
|
|
|
hole = false;
|
|
} else if(!options.fillHoles) {
|
|
hole = true;
|
|
}
|
|
}
|
|
|
|
return path;
|
|
};
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>This interpolation function does not smooth the path and the result is only containing lines and no curves.</div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Function</code></span> )<div class="param-description"></div></div><h6>Examples</h6><pre class="api-example"><code class="js">var chart = new Chartist.Line('.ct-chart', {
|
|
labels: [1, 2, 3, 4, 5],
|
|
series: [[1, 2, 8, 1, 7]]
|
|
}, {
|
|
lineSmooth: Chartist.Interpolation.none({
|
|
fillHoles: false
|
|
})
|
|
});
|
|
|
|
</code></pre></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistinterpolation-method-simple"><span class="member-tag">method</span> Chartist.Interpolation.simple()</h5><button class="api-code-button" data-toggle-visible="#chartistinterpolation-method-simple-code">Show code</button></header><pre id="chartistinterpolation-method-simple-code">
|
|
<code class="javascript">Chartist.Interpolation.simple = function(options) {
|
|
var defaultOptions = {
|
|
divisor: 2,
|
|
fillHoles: false
|
|
};
|
|
options = Chartist.extend({}, defaultOptions, options);
|
|
|
|
var d = 1 / Math.max(1, options.divisor);
|
|
|
|
return function simple(pathCoordinates, valueData) {
|
|
var path = new Chartist.Svg.Path();
|
|
var prevX, prevY, prevData;
|
|
|
|
for(var i = 0; i < pathCoordinates.length; i += 2) {
|
|
var currX = pathCoordinates[i];
|
|
var currY = pathCoordinates[i + 1];
|
|
var length = (currX - prevX) * d;
|
|
var currData = valueData[i / 2];
|
|
|
|
if(currData.value !== undefined) {
|
|
|
|
if(prevData === undefined) {
|
|
path.move(currX, currY, false, currData);
|
|
} else {
|
|
path.curve(
|
|
prevX + length,
|
|
prevY,
|
|
currX - length,
|
|
currY,
|
|
currX,
|
|
currY,
|
|
false,
|
|
currData
|
|
);
|
|
}
|
|
|
|
prevX = currX;
|
|
prevY = currY;
|
|
prevData = currData;
|
|
} else if(!options.fillHoles) {
|
|
prevX = currX = prevData = undefined;
|
|
}
|
|
}
|
|
|
|
return path;
|
|
};
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Simple smoothing creates horizontal handles that are positioned with a fraction of the length between two data points. You can use the divisor option to specify the amount of smoothing.</div><h6>Parameters</h6><div class="param"><code>options</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The options of the simple interpolation factory function.</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Function</code></span> )<div class="param-description"></div></div><h6>Examples</h6><pre class="api-example"><code class="js">var chart = new Chartist.Line('.ct-chart', {
|
|
labels: [1, 2, 3, 4, 5],
|
|
series: [[1, 2, 8, 1, 7]]
|
|
}, {
|
|
lineSmooth: Chartist.Interpolation.simple({
|
|
divisor: 2,
|
|
fillHoles: false
|
|
})
|
|
});
|
|
|
|
</code></pre></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistinterpolation-method-cardinal"><span class="member-tag">method</span> Chartist.Interpolation.cardinal()</h5><button class="api-code-button" data-toggle-visible="#chartistinterpolation-method-cardinal-code">Show code</button></header><pre id="chartistinterpolation-method-cardinal-code">
|
|
<code class="javascript">Chartist.Interpolation.cardinal = function(options) {
|
|
var defaultOptions = {
|
|
tension: 1,
|
|
fillHoles: false
|
|
};
|
|
|
|
options = Chartist.extend({}, defaultOptions, options);
|
|
|
|
var t = Math.min(1, Math.max(0, options.tension)),
|
|
c = 1 - t;
|
|
|
|
return function cardinal(pathCoordinates, valueData) {
|
|
// First we try to split the coordinates into segments
|
|
// This is necessary to treat "holes" in line charts
|
|
var segments = Chartist.splitIntoSegments(pathCoordinates, valueData, {
|
|
fillHoles: options.fillHoles
|
|
});
|
|
|
|
if(!segments.length) {
|
|
// If there were no segments return 'Chartist.Interpolation.none'
|
|
return Chartist.Interpolation.none()([]);
|
|
} else if(segments.length > 1) {
|
|
// If the split resulted in more that one segment we need to interpolate each segment individually and join them
|
|
// afterwards together into a single path.
|
|
var paths = [];
|
|
// For each segment we will recurse the cardinal function
|
|
segments.forEach(function(segment) {
|
|
paths.push(cardinal(segment.pathCoordinates, segment.valueData));
|
|
});
|
|
// Join the segment path data into a single path and return
|
|
return Chartist.Svg.Path.join(paths);
|
|
} else {
|
|
// If there was only one segment we can proceed regularly by using pathCoordinates and valueData from the first
|
|
// segment
|
|
pathCoordinates = segments[0].pathCoordinates;
|
|
valueData = segments[0].valueData;
|
|
|
|
// If less than two points we need to fallback to no smoothing
|
|
if(pathCoordinates.length <= 4) {
|
|
return Chartist.Interpolation.none()(pathCoordinates, valueData);
|
|
}
|
|
|
|
var path = new Chartist.Svg.Path().move(pathCoordinates[0], pathCoordinates[1], false, valueData[0]),
|
|
z;
|
|
|
|
for (var i = 0, iLen = pathCoordinates.length; iLen - 2 * !z > i; i += 2) {
|
|
var p = [
|
|
{x: +pathCoordinates[i - 2], y: +pathCoordinates[i - 1]},
|
|
{x: +pathCoordinates[i], y: +pathCoordinates[i + 1]},
|
|
{x: +pathCoordinates[i + 2], y: +pathCoordinates[i + 3]},
|
|
{x: +pathCoordinates[i + 4], y: +pathCoordinates[i + 5]}
|
|
];
|
|
if (z) {
|
|
if (!i) {
|
|
p[0] = {x: +pathCoordinates[iLen - 2], y: +pathCoordinates[iLen - 1]};
|
|
} else if (iLen - 4 === i) {
|
|
p[3] = {x: +pathCoordinates[0], y: +pathCoordinates[1]};
|
|
} else if (iLen - 2 === i) {
|
|
p[2] = {x: +pathCoordinates[0], y: +pathCoordinates[1]};
|
|
p[3] = {x: +pathCoordinates[2], y: +pathCoordinates[3]};
|
|
}
|
|
} else {
|
|
if (iLen - 4 === i) {
|
|
p[3] = p[2];
|
|
} else if (!i) {
|
|
p[0] = {x: +pathCoordinates[i], y: +pathCoordinates[i + 1]};
|
|
}
|
|
}
|
|
|
|
path.curve(
|
|
(t * (-p[0].x + 6 * p[1].x + p[2].x) / 6) + (c * p[2].x),
|
|
(t * (-p[0].y + 6 * p[1].y + p[2].y) / 6) + (c * p[2].y),
|
|
(t * (p[1].x + 6 * p[2].x - p[3].x) / 6) + (c * p[2].x),
|
|
(t * (p[1].y + 6 * p[2].y - p[3].y) / 6) + (c * p[2].y),
|
|
p[2].x,
|
|
p[2].y,
|
|
false,
|
|
valueData[(i + 2) / 2]
|
|
);
|
|
}
|
|
|
|
return path;
|
|
}
|
|
};
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Cardinal / Catmull-Rome spline interpolation is the default smoothing function in Chartist. It produces nice results where the splines will always meet the points. It produces some artifacts though when data values are increased or decreased rapidly. The line may not follow a very accurate path and if the line should be accurate this smoothing function does not produce the best results.</div><h6>Parameters</h6><div class="param"><code>options</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The options of the cardinal factory function.</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Function</code></span> )<div class="param-description"></div></div><h6>Examples</h6><pre class="api-example"><code class="js">var chart = new Chartist.Line('.ct-chart', {
|
|
labels: [1, 2, 3, 4, 5],
|
|
series: [[1, 2, 8, 1, 7]]
|
|
}, {
|
|
lineSmooth: Chartist.Interpolation.cardinal({
|
|
tension: 1,
|
|
fillHoles: false
|
|
})
|
|
});
|
|
</code></pre></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistinterpolation-method-monotonecubic"><span class="member-tag">method</span> Chartist.Interpolation.monotoneCubic()</h5><button class="api-code-button" data-toggle-visible="#chartistinterpolation-method-monotonecubic-code">Show code</button></header><pre id="chartistinterpolation-method-monotonecubic-code">
|
|
<code class="javascript">Chartist.Interpolation.monotoneCubic = function(options) {
|
|
var defaultOptions = {
|
|
fillHoles: false
|
|
};
|
|
|
|
options = Chartist.extend({}, defaultOptions, options);
|
|
|
|
return function monotoneCubic(pathCoordinates, valueData) {
|
|
// First we try to split the coordinates into segments
|
|
// This is necessary to treat "holes" in line charts
|
|
var segments = Chartist.splitIntoSegments(pathCoordinates, valueData, {
|
|
fillHoles: options.fillHoles,
|
|
increasingX: true
|
|
});
|
|
|
|
if(!segments.length) {
|
|
// If there were no segments return 'Chartist.Interpolation.none'
|
|
return Chartist.Interpolation.none()([]);
|
|
} else if(segments.length > 1) {
|
|
// If the split resulted in more that one segment we need to interpolate each segment individually and join them
|
|
// afterwards together into a single path.
|
|
var paths = [];
|
|
// For each segment we will recurse the monotoneCubic fn function
|
|
segments.forEach(function(segment) {
|
|
paths.push(monotoneCubic(segment.pathCoordinates, segment.valueData));
|
|
});
|
|
// Join the segment path data into a single path and return
|
|
return Chartist.Svg.Path.join(paths);
|
|
} else {
|
|
// If there was only one segment we can proceed regularly by using pathCoordinates and valueData from the first
|
|
// segment
|
|
pathCoordinates = segments[0].pathCoordinates;
|
|
valueData = segments[0].valueData;
|
|
|
|
// If less than three points we need to fallback to no smoothing
|
|
if(pathCoordinates.length <= 4) {
|
|
return Chartist.Interpolation.none()(pathCoordinates, valueData);
|
|
}
|
|
|
|
var xs = [],
|
|
ys = [],
|
|
i,
|
|
n = pathCoordinates.length / 2,
|
|
ms = [],
|
|
ds = [], dys = [], dxs = [],
|
|
path;
|
|
|
|
// Populate x and y coordinates into separate arrays, for readability
|
|
|
|
for(i = 0; i < n; i++) {
|
|
xs[i] = pathCoordinates[i * 2];
|
|
ys[i] = pathCoordinates[i * 2 + 1];
|
|
}
|
|
|
|
// Calculate deltas and derivative
|
|
|
|
for(i = 0; i < n - 1; i++) {
|
|
dys[i] = ys[i + 1] - ys[i];
|
|
dxs[i] = xs[i + 1] - xs[i];
|
|
ds[i] = dys[i] / dxs[i];
|
|
}
|
|
|
|
// Determine desired slope (m) at each point using Fritsch-Carlson method
|
|
// See: http://math.stackexchange.com/questions/45218/implementation-of-monotone-cubic-interpolation
|
|
|
|
ms[0] = ds[0];
|
|
ms[n - 1] = ds[n - 2];
|
|
|
|
for(i = 1; i < n - 1; i++) {
|
|
if(ds[i] === 0 || ds[i - 1] === 0 || (ds[i - 1] > 0) !== (ds[i] > 0)) {
|
|
ms[i] = 0;
|
|
} else {
|
|
ms[i] = 3 * (dxs[i - 1] + dxs[i]) / (
|
|
(2 * dxs[i] + dxs[i - 1]) / ds[i - 1] +
|
|
(dxs[i] + 2 * dxs[i - 1]) / ds[i]);
|
|
|
|
if(!isFinite(ms[i])) {
|
|
ms[i] = 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Now build a path from the slopes
|
|
|
|
path = new Chartist.Svg.Path().move(xs[0], ys[0], false, valueData[0]);
|
|
|
|
for(i = 0; i < n - 1; i++) {
|
|
path.curve(
|
|
// First control point
|
|
xs[i] + dxs[i] / 3,
|
|
ys[i] + ms[i] * dxs[i] / 3,
|
|
// Second control point
|
|
xs[i + 1] - dxs[i] / 3,
|
|
ys[i + 1] - ms[i + 1] * dxs[i] / 3,
|
|
// End point
|
|
xs[i + 1],
|
|
ys[i + 1],
|
|
|
|
false,
|
|
valueData[i + 1]
|
|
);
|
|
}
|
|
|
|
return path;
|
|
}
|
|
};
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Monotone Cubic spline interpolation produces a smooth curve which preserves monotonicity. Unlike cardinal splines, the curve will not extend beyond the range of y-values of the original data points.</div><h6>Parameters</h6><div class="param"><code>options</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The options of the monotoneCubic factory function.</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Function</code></span> )<div class="param-description"></div></div><h6>Examples</h6><pre class="api-example"><code class="js">var chart = new Chartist.Line('.ct-chart', {
|
|
labels: [1, 2, 3, 4, 5],
|
|
series: [[1, 2, 8, 1, 7]]
|
|
}, {
|
|
lineSmooth: Chartist.Interpolation.monotoneCubic({
|
|
fillHoles: false
|
|
})
|
|
});
|
|
</code></pre></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistinterpolation-method-step"><span class="member-tag">method</span> Chartist.Interpolation.step()</h5><button class="api-code-button" data-toggle-visible="#chartistinterpolation-method-step-code">Show code</button></header><pre id="chartistinterpolation-method-step-code">
|
|
<code class="javascript">Chartist.Interpolation.step = function(options) {
|
|
var defaultOptions = {
|
|
postpone: true,
|
|
fillHoles: false
|
|
};
|
|
|
|
options = Chartist.extend({}, defaultOptions, options);
|
|
|
|
return function step(pathCoordinates, valueData) {
|
|
var path = new Chartist.Svg.Path();
|
|
|
|
var prevX, prevY, prevData;
|
|
|
|
for (var i = 0; i < pathCoordinates.length; i += 2) {
|
|
var currX = pathCoordinates[i];
|
|
var currY = pathCoordinates[i + 1];
|
|
var currData = valueData[i / 2];
|
|
|
|
// If the current point is also not a hole we can draw the step lines
|
|
if(currData.value !== undefined) {
|
|
if(prevData === undefined) {
|
|
path.move(currX, currY, false, currData);
|
|
} else {
|
|
if(options.postpone) {
|
|
// If postponed we should draw the step line with the value of the previous value
|
|
path.line(currX, prevY, false, prevData);
|
|
} else {
|
|
// If not postponed we should draw the step line with the value of the current value
|
|
path.line(prevX, currY, false, currData);
|
|
}
|
|
// Line to the actual point (this should only be a Y-Axis movement
|
|
path.line(currX, currY, false, currData);
|
|
}
|
|
|
|
prevX = currX;
|
|
prevY = currY;
|
|
prevData = currData;
|
|
} else if(!options.fillHoles) {
|
|
prevX = prevY = prevData = undefined;
|
|
}
|
|
}
|
|
|
|
return path;
|
|
};
|
|
};
|
|
|
|
}(this, Chartist));</code>
|
|
</pre><div class="member-content"><div class="description"><p>Step interpolation will cause the line chart to move in steps rather than diagonal or smoothed lines. This interpolation will create additional points that will also be drawn when the <code>showPoint</code> option is enabled.</div><h6>Parameters</h6><div class="param"><code></code> ( <span class="param-type"><code>options</code></span> )<div class="param-description"></div></div><h6>Examples</h6><pre class="api-example"><code class="js">var chart = new Chartist.Line('.ct-chart', {
|
|
labels: [1, 2, 3, 4, 5],
|
|
series: [[1, 2, 8, 1, 7]]
|
|
}, {
|
|
lineSmooth: Chartist.Interpolation.step({
|
|
postpone: true,
|
|
fillHoles: false
|
|
})
|
|
});
|
|
</code></pre></div></article></div></header></section></div><aside class="side-notes"></aside></section><section class="documentation-section full"><header><h3>svg-path.js</h3></header><div class="content"><section class="sub-section"><header><h4 id="module-chartistsvgpath">Module Chartist.Svg.Path</h4><div class="module-description"><p>Chartist SVG path module for SVG path description creation and modification.</div><div class="module-members"><article class="module-member declaration"><header class="member-header"><h5 class="member-title" id="chartistsvgpath-declaration-elementdescriptions"><span class="member-tag">declaration</span> elementDescriptions</h5><button class="api-code-button" data-toggle-visible="#chartistsvgpath-declaration-elementdescriptions-code">Show code</button></header><pre id="chartistsvgpath-declaration-elementdescriptions-code">
|
|
<code class="javascript">var elementDescriptions = {
|
|
m: ['x', 'y'],
|
|
l: ['x', 'y'],
|
|
c: ['x1', 'y1', 'x2', 'y2', 'x', 'y'],
|
|
a: ['rx', 'ry', 'xAr', 'lAf', 'sf', 'x', 'y']
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Contains the descriptors of supported element types in a SVG path. Currently only move, line and curve are supported.</div></div></article><article class="module-member declaration"><header class="member-header"><h5 class="member-title" id="chartistsvgpath-declaration-defaultoptions"><span class="member-tag">declaration</span> defaultOptions</h5><button class="api-code-button" data-toggle-visible="#chartistsvgpath-declaration-defaultoptions-code">Show code</button></header><pre id="chartistsvgpath-declaration-defaultoptions-code">
|
|
<code class="javascript">var defaultOptions = {
|
|
// The accuracy in digit count after the decimal point. This will be used to round numbers in the SVG path. If this option is set to false then no rounding will be performed.
|
|
accuracy: 3
|
|
};
|
|
|
|
function element(command, params, pathElements, pos, relative, data) {
|
|
var pathElement = Chartist.extend({
|
|
command: relative ? command.toLowerCase() : command.toUpperCase()
|
|
}, params, data ? { data: data } : {} );
|
|
|
|
pathElements.splice(pos, 0, pathElement);
|
|
}
|
|
|
|
function forEachParam(pathElements, cb) {
|
|
pathElements.forEach(function(pathElement, pathElementIndex) {
|
|
elementDescriptions[pathElement.command.toLowerCase()].forEach(function(paramName, paramIndex) {
|
|
cb(pathElement, paramName, pathElementIndex, paramIndex, pathElements);
|
|
});
|
|
});
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Default options for newly created SVG path objects.</div></div></article><article class="module-member constructor"><header class="member-header"><h5 class="member-title" id="chartistsvgpath-constructor-svgpath"><span class="member-tag">constructor</span> SvgPath()</h5><button class="api-code-button" data-toggle-visible="#chartistsvgpath-constructor-svgpath-code">Show code</button></header><pre id="chartistsvgpath-constructor-svgpath-code">
|
|
<code class="javascript">function SvgPath(close, options) {
|
|
this.pathElements = [];
|
|
this.pos = 0;
|
|
this.close = close;
|
|
this.options = Chartist.extend({}, defaultOptions, options);
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Used to construct a new path object.</div><h6>Parameters</h6><div class="param"><code>close</code> ( <span class="param-type"><code>Boolean</code></span> )<div class="param-description">If set to true then this path will be closed when stringified (with a Z at the end)</div></div><div class="param"><code>options</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">Options object that overrides the default objects. See default options for more details.</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvgpath-function-position"><span class="member-tag">function</span> position()</h5><button class="api-code-button" data-toggle-visible="#chartistsvgpath-function-position-code">Show code</button></header><pre id="chartistsvgpath-function-position-code">
|
|
<code class="javascript">function position(pos) {
|
|
if(pos !== undefined) {
|
|
this.pos = Math.max(0, Math.min(this.pathElements.length, pos));
|
|
return this;
|
|
} else {
|
|
return this.pos;
|
|
}
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Gets or sets the current position (cursor) inside of the path. You can move around the cursor freely but limited to 0 or the count of existing elements. All modifications with element functions will insert new elements at the position of this cursor.</div><h6>Parameters</h6><div class="param"><code>[pos]</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">If a number is passed then the cursor is set to this position in the path element array.</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg.Path</code></span> <span class="param-type"><code>Number</code></span> )<div class="param-description">If the position parameter was passed then the return value will be the path object for easy call chaining. If no position parameter was passed then the current position is returned.</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvgpath-function-remove"><span class="member-tag">function</span> remove()</h5><button class="api-code-button" data-toggle-visible="#chartistsvgpath-function-remove-code">Show code</button></header><pre id="chartistsvgpath-function-remove-code">
|
|
<code class="javascript">function remove(count) {
|
|
this.pathElements.splice(this.pos, count);
|
|
return this;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Removes elements from the path starting at the current position.</div><h6>Parameters</h6><div class="param"><code>count</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">Number of path elements that should be removed from the current position.</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg.Path</code></span> )<div class="param-description">The current path object for easy call chaining.</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvgpath-function-move"><span class="member-tag">function</span> move()</h5><button class="api-code-button" data-toggle-visible="#chartistsvgpath-function-move-code">Show code</button></header><pre id="chartistsvgpath-function-move-code">
|
|
<code class="javascript">function move(x, y, relative, data) {
|
|
element('M', {
|
|
x: +x,
|
|
y: +y
|
|
}, this.pathElements, this.pos++, relative, data);
|
|
return this;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Use this function to add a new move SVG path element.</div><h6>Parameters</h6><div class="param"><code>x</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The x coordinate for the move element.</div></div><div class="param"><code>y</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The y coordinate for the move element.</div></div><div class="param"><code>[relative]</code> ( <span class="param-type"><code>Boolean</code></span> )<div class="param-description">If set to true the move element will be created with relative coordinates (lowercase letter)</div></div><div class="param"><code>[data]</code> ( <span class="param-type"><code>*</code></span> )<div class="param-description">Any data that should be stored with the element object that will be accessible in pathElement</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg.Path</code></span> )<div class="param-description">The current path object for easy call chaining.</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvgpath-function-line"><span class="member-tag">function</span> line()</h5><button class="api-code-button" data-toggle-visible="#chartistsvgpath-function-line-code">Show code</button></header><pre id="chartistsvgpath-function-line-code">
|
|
<code class="javascript">function line(x, y, relative, data) {
|
|
element('L', {
|
|
x: +x,
|
|
y: +y
|
|
}, this.pathElements, this.pos++, relative, data);
|
|
return this;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Use this function to add a new line SVG path element.</div><h6>Parameters</h6><div class="param"><code>x</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The x coordinate for the line element.</div></div><div class="param"><code>y</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The y coordinate for the line element.</div></div><div class="param"><code>[relative]</code> ( <span class="param-type"><code>Boolean</code></span> )<div class="param-description">If set to true the line element will be created with relative coordinates (lowercase letter)</div></div><div class="param"><code>[data]</code> ( <span class="param-type"><code>*</code></span> )<div class="param-description">Any data that should be stored with the element object that will be accessible in pathElement</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg.Path</code></span> )<div class="param-description">The current path object for easy call chaining.</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvgpath-function-curve"><span class="member-tag">function</span> curve()</h5><button class="api-code-button" data-toggle-visible="#chartistsvgpath-function-curve-code">Show code</button></header><pre id="chartistsvgpath-function-curve-code">
|
|
<code class="javascript">function curve(x1, y1, x2, y2, x, y, relative, data) {
|
|
element('C', {
|
|
x1: +x1,
|
|
y1: +y1,
|
|
x2: +x2,
|
|
y2: +y2,
|
|
x: +x,
|
|
y: +y
|
|
}, this.pathElements, this.pos++, relative, data);
|
|
return this;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Use this function to add a new curve SVG path element.</div><h6>Parameters</h6><div class="param"><code>x1</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The x coordinate for the first control point of the bezier curve.</div></div><div class="param"><code>y1</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The y coordinate for the first control point of the bezier curve.</div></div><div class="param"><code>x2</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The x coordinate for the second control point of the bezier curve.</div></div><div class="param"><code>y2</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The y coordinate for the second control point of the bezier curve.</div></div><div class="param"><code>x</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The x coordinate for the target point of the curve element.</div></div><div class="param"><code>y</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The y coordinate for the target point of the curve element.</div></div><div class="param"><code>[relative]</code> ( <span class="param-type"><code>Boolean</code></span> )<div class="param-description">If set to true the curve element will be created with relative coordinates (lowercase letter)</div></div><div class="param"><code>[data]</code> ( <span class="param-type"><code>*</code></span> )<div class="param-description">Any data that should be stored with the element object that will be accessible in pathElement</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg.Path</code></span> )<div class="param-description">The current path object for easy call chaining.</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvgpath-function-arc"><span class="member-tag">function</span> arc()</h5><button class="api-code-button" data-toggle-visible="#chartistsvgpath-function-arc-code">Show code</button></header><pre id="chartistsvgpath-function-arc-code">
|
|
<code class="javascript">function arc(rx, ry, xAr, lAf, sf, x, y, relative, data) {
|
|
element('A', {
|
|
rx: +rx,
|
|
ry: +ry,
|
|
xAr: +xAr,
|
|
lAf: +lAf,
|
|
sf: +sf,
|
|
x: +x,
|
|
y: +y
|
|
}, this.pathElements, this.pos++, relative, data);
|
|
return this;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Use this function to add a new non-bezier curve SVG path element.</div><h6>Parameters</h6><div class="param"><code>rx</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The radius to be used for the x-axis of the arc.</div></div><div class="param"><code>ry</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The radius to be used for the y-axis of the arc.</div></div><div class="param"><code>xAr</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">Defines the orientation of the arc</div></div><div class="param"><code>lAf</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">Large arc flag</div></div><div class="param"><code>sf</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">Sweep flag</div></div><div class="param"><code>x</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The x coordinate for the target point of the curve element.</div></div><div class="param"><code>y</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The y coordinate for the target point of the curve element.</div></div><div class="param"><code>[relative]</code> ( <span class="param-type"><code>Boolean</code></span> )<div class="param-description">If set to true the curve element will be created with relative coordinates (lowercase letter)</div></div><div class="param"><code>[data]</code> ( <span class="param-type"><code>*</code></span> )<div class="param-description">Any data that should be stored with the element object that will be accessible in pathElement</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg.Path</code></span> )<div class="param-description">The current path object for easy call chaining.</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvgpath-function-parse"><span class="member-tag">function</span> parse()</h5><button class="api-code-button" data-toggle-visible="#chartistsvgpath-function-parse-code">Show code</button></header><pre id="chartistsvgpath-function-parse-code">
|
|
<code class="javascript">function parse(path) {
|
|
// Parsing the SVG path string into an array of arrays [['M', '10', '10'], ['L', '100', '100']]
|
|
var chunks = path.replace(/([A-Za-z])([0-9])/g, '$1 $2')
|
|
.replace(/([0-9])([A-Za-z])/g, '$1 $2')
|
|
.split(/[\s,]+/)
|
|
.reduce(function(result, element) {
|
|
if(element.match(/[A-Za-z]/)) {
|
|
result.push([]);
|
|
}
|
|
|
|
result[result.length - 1].push(element);
|
|
return result;
|
|
}, []);
|
|
|
|
// If this is a closed path we remove the Z at the end because this is determined by the close option
|
|
if(chunks[chunks.length - 1][0].toUpperCase() === 'Z') {
|
|
chunks.pop();
|
|
}
|
|
|
|
// Using svgPathElementDescriptions to map raw path arrays into objects that contain the command and the parameters
|
|
// For example {command: 'M', x: '10', y: '10'}
|
|
var elements = chunks.map(function(chunk) {
|
|
var command = chunk.shift(),
|
|
description = elementDescriptions[command.toLowerCase()];
|
|
|
|
return Chartist.extend({
|
|
command: command
|
|
}, description.reduce(function(result, paramName, index) {
|
|
result[paramName] = +chunk[index];
|
|
return result;
|
|
}, {}));
|
|
});
|
|
|
|
// Preparing a splice call with the elements array as var arg params and insert the parsed elements at the current position
|
|
var spliceArgs = [this.pos, 0];
|
|
Array.prototype.push.apply(spliceArgs, elements);
|
|
Array.prototype.splice.apply(this.pathElements, spliceArgs);
|
|
// Increase the internal position by the element count
|
|
this.pos += elements.length;
|
|
|
|
return this;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Parses an SVG path seen in the d attribute of path elements, and inserts the parsed elements into the existing path object at the current cursor position. Any closing path indicators (Z at the end of the path) will be ignored by the parser as this is provided by the close option in the options of the path object.</div><h6>Parameters</h6><div class="param"><code>path</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">Any SVG path that contains move (m), line (l) or curve (c) components.</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg.Path</code></span> )<div class="param-description">The current path object for easy call chaining.</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvgpath-function-stringify"><span class="member-tag">function</span> stringify()</h5><button class="api-code-button" data-toggle-visible="#chartistsvgpath-function-stringify-code">Show code</button></header><pre id="chartistsvgpath-function-stringify-code">
|
|
<code class="javascript">function stringify() {
|
|
var accuracyMultiplier = Math.pow(10, this.options.accuracy);
|
|
|
|
return this.pathElements.reduce(function(path, pathElement) {
|
|
var params = elementDescriptions[pathElement.command.toLowerCase()].map(function(paramName) {
|
|
return this.options.accuracy ?
|
|
(Math.round(pathElement[paramName] * accuracyMultiplier) / accuracyMultiplier) :
|
|
pathElement[paramName];
|
|
}.bind(this));
|
|
|
|
return path + pathElement.command + params.join(',');
|
|
}.bind(this), '') + (this.close ? 'Z' : '');
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>This function renders to current SVG path object into a final SVG string that can be used in the d attribute of SVG path elements. It uses the accuracy option to round big decimals. If the close parameter was set in the constructor of this path object then a path closing Z will be appended to the output string.</div><h6>Returns</h6><div class="return">( <span class="param-type"><code>String</code></span> )<div class="param-description"></div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvgpath-function-scale"><span class="member-tag">function</span> scale()</h5><button class="api-code-button" data-toggle-visible="#chartistsvgpath-function-scale-code">Show code</button></header><pre id="chartistsvgpath-function-scale-code">
|
|
<code class="javascript">function scale(x, y) {
|
|
forEachParam(this.pathElements, function(pathElement, paramName) {
|
|
pathElement[paramName] *= paramName[0] === 'x' ? x : y;
|
|
});
|
|
return this;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Scales all elements in the current SVG path object. There is an individual parameter for each coordinate. Scaling will also be done for control points of curves, affecting the given coordinate.</div><h6>Parameters</h6><div class="param"><code>x</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The number which will be used to scale the x, x1 and x2 of all path elements.</div></div><div class="param"><code>y</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The number which will be used to scale the y, y1 and y2 of all path elements.</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg.Path</code></span> )<div class="param-description">The current path object for easy call chaining.</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvgpath-function-translate"><span class="member-tag">function</span> translate()</h5><button class="api-code-button" data-toggle-visible="#chartistsvgpath-function-translate-code">Show code</button></header><pre id="chartistsvgpath-function-translate-code">
|
|
<code class="javascript">function translate(x, y) {
|
|
forEachParam(this.pathElements, function(pathElement, paramName) {
|
|
pathElement[paramName] += paramName[0] === 'x' ? x : y;
|
|
});
|
|
return this;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Translates all elements in the current SVG path object. The translation is relative and there is an individual parameter for each coordinate. Translation will also be done for control points of curves, affecting the given coordinate.</div><h6>Parameters</h6><div class="param"><code>x</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The number which will be used to translate the x, x1 and x2 of all path elements.</div></div><div class="param"><code>y</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The number which will be used to translate the y, y1 and y2 of all path elements.</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg.Path</code></span> )<div class="param-description">The current path object for easy call chaining.</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvgpath-function-transform"><span class="member-tag">function</span> transform()</h5><button class="api-code-button" data-toggle-visible="#chartistsvgpath-function-transform-code">Show code</button></header><pre id="chartistsvgpath-function-transform-code">
|
|
<code class="javascript">function transform(transformFnc) {
|
|
forEachParam(this.pathElements, function(pathElement, paramName, pathElementIndex, paramIndex, pathElements) {
|
|
var transformed = transformFnc(pathElement, paramName, pathElementIndex, paramIndex, pathElements);
|
|
if(transformed || transformed === 0) {
|
|
pathElement[paramName] = transformed;
|
|
}
|
|
});
|
|
return this;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>This function will run over all existing path elements and then loop over their attributes. The callback function will be called for every path element attribute that exists in the current path.<br>The method signature of the callback function looks like this:<pre><code class="language-javascript">function(pathElement, paramName, pathElementIndex, paramIndex, pathElements)</code></pre><p>If something else than undefined is returned by the callback function, this value will be used to replace the old value. This allows you to build custom transformations of path objects that can't be achieved using the basic transformation functions scale and translate.</div><h6>Parameters</h6><div class="param"><code>transformFnc</code> ( <span class="param-type"><code>Function</code></span> )<div class="param-description">The callback function for the transformation. Check the signature in the function description.</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg.Path</code></span> )<div class="param-description">The current path object for easy call chaining.</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvgpath-function-clone"><span class="member-tag">function</span> clone()</h5><button class="api-code-button" data-toggle-visible="#chartistsvgpath-function-clone-code">Show code</button></header><pre id="chartistsvgpath-function-clone-code">
|
|
<code class="javascript">function clone(close) {
|
|
var c = new Chartist.Svg.Path(close || this.close);
|
|
c.pos = this.pos;
|
|
c.pathElements = this.pathElements.slice().map(function cloneElements(pathElement) {
|
|
return Chartist.extend({}, pathElement);
|
|
});
|
|
c.options = Chartist.extend({}, this.options);
|
|
return c;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>This function clones a whole path object with all its properties. This is a deep clone and path element objects will also be cloned.</div><h6>Parameters</h6><div class="param"><code>[close]</code> ( <span class="param-type"><code>Boolean</code></span> )<div class="param-description">Optional option to set the new cloned path to closed. If not specified or false, the original path close option will be used.</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg.Path</code></span> )<div class="param-description"></div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvgpath-function-splitbycommand"><span class="member-tag">function</span> splitByCommand()</h5><button class="api-code-button" data-toggle-visible="#chartistsvgpath-function-splitbycommand-code">Show code</button></header><pre id="chartistsvgpath-function-splitbycommand-code">
|
|
<code class="javascript">function splitByCommand(command) {
|
|
var split = [
|
|
new Chartist.Svg.Path()
|
|
];
|
|
|
|
this.pathElements.forEach(function(pathElement) {
|
|
if(pathElement.command === command.toUpperCase() && split[split.length - 1].pathElements.length !== 0) {
|
|
split.push(new Chartist.Svg.Path());
|
|
}
|
|
|
|
split[split.length - 1].pathElements.push(pathElement);
|
|
});
|
|
|
|
return split;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Split a Svg.Path object by a specific command in the path chain. The path chain will be split and an array of newly created paths objects will be returned. This is useful if you'd like to split an SVG path by it's move commands, for example, in order to isolate chunks of drawings.</div><h6>Parameters</h6><div class="param"><code>command</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">The command you'd like to use to split the path</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Array<Chartist.Svg.Path></code></span> )<div class="param-description"></div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvgpath-function-join"><span class="member-tag">function</span> join()</h5><button class="api-code-button" data-toggle-visible="#chartistsvgpath-function-join-code">Show code</button></header><pre id="chartistsvgpath-function-join-code">
|
|
<code class="javascript">function join(paths, close, options) {
|
|
var joinedPath = new Chartist.Svg.Path(close, options);
|
|
for(var i = 0; i < paths.length; i++) {
|
|
var path = paths[i];
|
|
for(var j = 0; j < path.pathElements.length; j++) {
|
|
joinedPath.pathElements.push(path.pathElements[j]);
|
|
}
|
|
}
|
|
return joinedPath;
|
|
}
|
|
|
|
Chartist.Svg.Path = Chartist.Class.extend({
|
|
constructor: SvgPath,
|
|
position: position,
|
|
remove: remove,
|
|
move: move,
|
|
line: line,
|
|
curve: curve,
|
|
arc: arc,
|
|
scale: scale,
|
|
translate: translate,
|
|
transform: transform,
|
|
parse: parse,
|
|
stringify: stringify,
|
|
clone: clone,
|
|
splitByCommand: splitByCommand
|
|
});
|
|
|
|
Chartist.Svg.Path.elementDescriptions = elementDescriptions;
|
|
Chartist.Svg.Path.join = join;
|
|
}(this, Chartist));</code>
|
|
</pre><div class="member-content"><div class="description"><p>This static function on <code>Chartist.Svg.Path</code> is joining multiple paths together into one paths.</div><h6>Parameters</h6><div class="param"><code>paths</code> ( <span class="param-type"><code>Array<Chartist.Svg.Path></code></span> )<div class="param-description">A list of paths to be joined together. The order is important.</div></div><div class="param"><code>close</code> ( <span class="param-type"><code>boolean</code></span> )<div class="param-description">If the newly created path should be a closed path</div></div><div class="param"><code>options</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">Path options for the newly created path.</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg.Path</code></span> )<div class="param-description"></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</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 Element) {
|
|
this._node = name;
|
|
} else {
|
|
this._node = document.createElementNS(Chartist.namespaces.svg, name);
|
|
|
|
// If this is an SVG element created then custom namespace
|
|
if(name === 'svg') {
|
|
this.attr({
|
|
'xmlns:ct': Chartist.namespaces.ct
|
|
});
|
|
}
|
|
}
|
|
|
|
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.</div><h6>Parameters</h6><div class="param"><code>name</code> ( <span class="param-type"><code>String</code></span> <span class="param-type"><code>Element</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 (key.indexOf(':') !== -1) {
|
|
var namespacedAttribute = key.split(':');
|
|
this._node.setAttributeNS(Chartist.namespaces[namespacedAttribute[0]], key, 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.</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 attribute will be obtained using getAttributeNs. In order to write namepsaced attributes you can use the namespace:attribute notation within the attributes object.</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Object</code></span> <span class="param-type"><code>String</code></span> )<div class="param-description">The current wrapper object will be returned so it can be used for chaining or the attribute value if used as getter function.</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.</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><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg</code></span> )<div class="param-description">Returns a Chartist.Svg wrapper object that can be used to modify the containing SVG data</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvg-function-parent"><span class="member-tag">function</span> parent()</h5><button class="api-code-button" data-toggle-visible="#chartistsvg-function-parent-code">Show code</button></header><pre id="chartistsvg-function-parent-code">
|
|
<code class="javascript">function parent() {
|
|
return this._node.parentNode instanceof SVGElement ? new Chartist.Svg(this._node.parentNode) : null;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Returns the parent Chartist.SVG wrapper object</div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg</code></span> )<div class="param-description">Returns a Chartist.Svg wrapper around the parent node of the current node. If the parent node is not existing or it's not an SVG node then this function will return null.</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvg-function-root"><span class="member-tag">function</span> root()</h5><button class="api-code-button" data-toggle-visible="#chartistsvg-function-root-code">Show code</button></header><pre id="chartistsvg-function-root-code">
|
|
<code class="javascript">function root() {
|
|
var node = this._node;
|
|
while(node.nodeName !== 'svg') {
|
|
node = node.parentNode;
|
|
}
|
|
return new Chartist.Svg(node);
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>This method returns a Chartist.Svg wrapper around the root SVG element of the current tree.</div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg</code></span> )<div class="param-description">The root SVG element wrapped in a Chartist.Svg element</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvg-function-queryselector"><span class="member-tag">function</span> querySelector()</h5><button class="api-code-button" data-toggle-visible="#chartistsvg-function-queryselector-code">Show code</button></header><pre id="chartistsvg-function-queryselector-code">
|
|
<code class="javascript">function querySelector(selector) {
|
|
var foundNode = this._node.querySelector(selector);
|
|
return foundNode ? new Chartist.Svg(foundNode) : null;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Find the first child SVG element of the current element that matches a CSS selector. The returned object is a Chartist.Svg wrapper.</div><h6>Parameters</h6><div class="param"><code>selector</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">A CSS selector that is used to query for child SVG elements</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg</code></span> )<div class="param-description">The SVG wrapper for the element found or null if no element was found</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvg-function-queryselectorall"><span class="member-tag">function</span> querySelectorAll()</h5><button class="api-code-button" data-toggle-visible="#chartistsvg-function-queryselectorall-code">Show code</button></header><pre id="chartistsvg-function-queryselectorall-code">
|
|
<code class="javascript">function querySelectorAll(selector) {
|
|
var foundNodes = this._node.querySelectorAll(selector);
|
|
return foundNodes.length ? new Chartist.Svg.List(foundNodes) : null;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Find the all child SVG elements of the current element that match a CSS selector. The returned object is a Chartist.Svg.List wrapper.</div><h6>Parameters</h6><div class="param"><code>selector</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">A CSS selector that is used to query for child SVG elements</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg.List</code></span> )<div class="param-description">The SVG wrapper list for the element found or null if no element was found</div></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistsvg-function-getnode"><span class="member-tag">function</span> getNode()</h5><button class="api-code-button" data-toggle-visible="#chartistsvg-function-getnode-code">Show code</button></header><pre id="chartistsvg-function-getnode-code">
|
|
<code class="javascript">function getNode() {
|
|
return this._node;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Returns the underlying SVG node for the current element.</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', Chartist.namespaces.xmlns);
|
|
|
|
// 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.</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><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg</code></span> )<div class="param-description">New wrapper object that wraps the foreignObject element</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.</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><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg</code></span> )<div class="param-description">The same wrapper object that was used to add the newly created element</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.</div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg</code></span> )<div class="param-description">The same wrapper object that got emptied</div></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 this.parent();
|
|
}</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.</div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg</code></span> )<div class="param-description">The parent wrapper object of the element that got removed</div></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.</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><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg</code></span> )<div class="param-description">The wrapper of the new element</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.</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><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg</code></span> )<div class="param-description">The wrapper of the appended object</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.</div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Array</code></span> )<div class="param-description">A list of classes or an empty array if there are no classes on the current element</div></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.</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><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg</code></span> )<div class="param-description">The wrapper of the current element</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.</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><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg</code></span> )<div class="param-description">The wrapper of the current element</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.</div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg</code></span> )<div class="param-description">The wrapper of the current element</div></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.getBoundingClientRect().height;
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Get element height using <code>getBoundingClientRect</code></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.quantity(animationDefinition.begin || 0).value;
|
|
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() {
|
|
// If beginElement fails we set the animated attribute to the end position and remove the animate element
|
|
// This happens if the SMIL ElementTimeControl interface is not supported or any other problems occured in
|
|
// the browser. (Currently FF 34 does not support animate elements in foreignObjects)
|
|
try {
|
|
animate._node.beginElement();
|
|
} catch(err) {
|
|
// 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), 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,
|
|
getNode: getNode,
|
|
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><pre><code class="language-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:<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><code>begin</code> is explicitly set to <code>indefinite</code> so it can be started manually without relying on document begin time (creation)<li>The animate element will be forced to use <code>fill="freeze"</code><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>After the animation the element attribute value will be set to the <code>to</code> value of the animation<li>The animate element is deleted from the DOM</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><h6>Returns</h6><div class="return">( <span class="param-type"><code>Chartist.Svg</code></span> )<div class="param-description">The current element where the animation was added</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('http://www.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
|
|
});
|
|
}(this, 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.</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><h6>Returns</h6><div class="return">( <span class="param-type"><code>Boolean</code></span> )<div class="param-description">True of false if the feature is supported or not</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> |