1275 lines
94 KiB
HTML
1275 lines
94 KiB
HTML
<!doctype html><!--[if lt IE 7]>
|
|
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]>
|
|
<html class="no-js lt-ie9 lt-ie8"> <![endif]--><!--[if IE 8]>
|
|
<html class="no-js lt-ie9"> <![endif]--><!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Chartist - API Documentation</title><meta name="description" content="Detailed documentation of the Chartist.js code and API"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><link rel="stylesheet" href="styles/vendor.css"><link rel="stylesheet" href="styles/main.css"><body><!--[if lt IE 9]>
|
|
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
|
|
your browser</a> to improve your experience.</p>
|
|
<![endif]--><section class="page-content api-documentation"><div class="contain-to-grid sticky"><nav class="top-bar" data-topbar="" data-options="sticky_on: large"><ul class="title-area"><li class="name"><h1><a href="index.html">Chartist.js</a></h1></li><li class="toggle-topbar menu-icon"><a href="#">Menu</a></li></ul><section class="top-bar-section"><ul class="right"><li><a href="//github.com/gionkunz/chartist-js/tree/master/libdist" target="_blank">Download</a></li></ul><ul class="left"><li><a href="getting-started.html">Getting started</a></li><li><a href="api-documentation.html">API Documentation</a></li><li><a href="examples.html">Examples (live coding!)</a></li><li><a href="//github.com/gionkunz/chartist-js" target="_blank">Contribute</a></li></ul></section></nav></div><article class="main" role="main"><header><h2>Chartist - API Documentation</h2></header><aside class="side-navigation"><nav><ul class="side-nav"><li class="heading">Chartist.Bar</li><li><a class="text-clipping" href="#chartistbar-method-bar">Chartist.Bar()</a></li><li><a class="text-clipping" href="#chartistbar-function-update">update()</a></li><li><a class="text-clipping" href="#chartistbar-function-detach">detach()</a></li><li><a class="text-clipping" href="#chartistbar-function-addoptionslistener">addOptionsListener()</a></li><li><a class="text-clipping" href="#chartistbar-function-removeoptionslistener">removeOptionsListener()</a></li><li class="heading">Chartist.Core</li><li><a class="text-clipping" href="#chartistcore-method-noop">Chartist.noop()</a></li><li><a class="text-clipping" href="#chartistcore-method-alphanumerate">Chartist.alphaNumerate()</a></li><li><a class="text-clipping" href="#chartistcore-method-extend">Chartist.extend()</a></li><li><a class="text-clipping" href="#chartistcore-method-getheight">Chartist.getHeight()</a></li><li><a class="text-clipping" href="#chartistcore-method-getwidth">Chartist.getWidth()</a></li><li><a class="text-clipping" href="#chartistcore-method-queryselector">Chartist.querySelector()</a></li><li><a class="text-clipping" href="#chartistcore-method-createsvg">Chartist.createSvg()</a></li><li><a class="text-clipping" href="#chartistcore-method-getdataarray">Chartist.getDataArray()</a></li><li><a class="text-clipping" href="#chartistcore-method-normalizedataarray">Chartist.normalizeDataArray()</a></li><li><a class="text-clipping" href="#chartistcore-method-orderofmagnitude">Chartist.orderOfMagnitude()</a></li><li><a class="text-clipping" href="#chartistcore-method-projectlength">Chartist.projectLength()</a></li><li><a class="text-clipping" href="#chartistcore-method-getavailableheight">Chartist.getAvailableHeight()</a></li><li><a class="text-clipping" href="#chartistcore-method-gethighlow">Chartist.getHighLow()</a></li><li><a class="text-clipping" href="#chartistcore-method-getbounds">Chartist.getBounds()</a></li><li><a class="text-clipping" href="#chartistcore-method-calculatelabeloffset">Chartist.calculateLabelOffset()</a></li><li><a class="text-clipping" href="#chartistcore-method-polartocartesian">Chartist.polarToCartesian()</a></li><li><a class="text-clipping" href="#chartistcore-method-createchartrect">Chartist.createChartRect()</a></li><li><a class="text-clipping" href="#chartistcore-method-createxaxis">Chartist.createXAxis()</a></li><li><a class="text-clipping" href="#chartistcore-method-createyaxis">Chartist.createYAxis()</a></li><li><a class="text-clipping" href="#chartistcore-method-projectpoint">Chartist.projectPoint()</a></li><li><a class="text-clipping" href="#chartistcore-method-optionsprovider">Chartist.optionsProvider()</a></li><li class="heading">Chartist.Line</li><li><a class="text-clipping" href="#chartistline-method-line">Chartist.Line()</a></li><li><a class="text-clipping" href="#chartistline-function-update">update()</a></li><li><a class="text-clipping" href="#chartistline-function-detach">detach()</a></li><li><a class="text-clipping" href="#chartistline-function-addoptionslistener">addOptionsListener()</a></li><li><a class="text-clipping" href="#chartistline-function-removeoptionslistener">removeOptionsListener()</a></li><li class="heading">Chartist.Pie</li><li><a class="text-clipping" href="#chartistpie-method-pie">Chartist.Pie()</a></li><li><a class="text-clipping" href="#chartistpie-function-update">update()</a></li><li><a class="text-clipping" href="#chartistpie-function-detach">detach()</a></li><li><a class="text-clipping" href="#chartistpie-function-addoptionslistener">addOptionsListener()</a></li><li><a class="text-clipping" href="#chartistpie-function-removeoptionslistener">removeOptionsListener()</a></li><li class="heading">Chartist.svg</li></ul></nav></aside><div class="content"><section class="documentation-section full"><header><h3>chartist.bar.js</h3></header><div class="content"><section class="sub-section"><header><h4 id="module-chartistbar">Module Chartist.Bar</h4><div class="module-description"><p>The bar chart module of Chartist that can be used to draw unipolar or bipolar bar and grouped bar charts.</p></div><div class="module-members"><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistbar-method-bar"><span class="member-tag">method</span> Chartist.Bar()</h5><button class="api-code-button" data-toggle-visible="#chartistbar-method-bar-code">Show code</button></header><pre id="chartistbar-method-bar-code">
|
|
<code class="javascript">Chartist.Bar = function (query, data, options, responsiveOptions) {
|
|
|
|
var defaultOptions = {
|
|
axisX: {
|
|
offset: 10,
|
|
showLabel: true,
|
|
showGrid: true,
|
|
labelInterpolationFnc: Chartist.noop
|
|
},
|
|
axisY: {
|
|
offset: 15,
|
|
showLabel: true,
|
|
showGrid: true,
|
|
labelAlign: 'right',
|
|
labelInterpolationFnc: Chartist.noop,
|
|
scaleMinSpace: 40
|
|
},
|
|
width: undefined,
|
|
height: undefined,
|
|
high: undefined,
|
|
low: undefined,
|
|
chartPadding: 5,
|
|
seriesBarDistance: 15,
|
|
classNames: {
|
|
chart: 'ct-chart-bar',
|
|
label: 'ct-label',
|
|
series: 'ct-series',
|
|
bar: 'ct-bar',
|
|
thin: 'ct-thin',
|
|
thick: 'ct-thick',
|
|
grid: 'ct-grid',
|
|
vertical: 'ct-vertical',
|
|
horizontal: 'ct-horizontal'
|
|
}
|
|
},
|
|
optionsProvider,
|
|
container = Chartist.querySelector(query),
|
|
svg;
|
|
|
|
function createChart(options) {
|
|
var xAxisOffset,
|
|
yAxisOffset,
|
|
seriesGroups = [],
|
|
bounds,
|
|
normalizedData = Chartist.normalizeDataArray(Chartist.getDataArray(data), data.labels.length);
|
|
|
|
// Create new svg element
|
|
svg = Chartist.createSvg(container, options.width, options.height, options.classNames.chart);
|
|
|
|
// initialize bounds
|
|
bounds = Chartist.getBounds(svg, normalizedData, options, 0);
|
|
|
|
xAxisOffset = options.axisX.offset;
|
|
if (options.axisX.showLabel) {
|
|
xAxisOffset += Chartist.calculateLabelOffset(
|
|
svg,
|
|
data.labels,
|
|
[options.classNames.label, options.classNames.horizontal].join(' '),
|
|
options.axisX.labelInterpolationFnc,
|
|
Chartist.getHeight
|
|
);
|
|
}
|
|
|
|
yAxisOffset = options.axisY.offset;
|
|
if (options.axisY.showLabel) {
|
|
yAxisOffset += Chartist.calculateLabelOffset(
|
|
svg,
|
|
bounds.values,
|
|
[options.classNames.label, options.classNames.horizontal].join(' '),
|
|
options.axisY.labelInterpolationFnc,
|
|
Chartist.getWidth
|
|
);
|
|
}
|
|
|
|
var chartRect = Chartist.createChartRect(svg, options, xAxisOffset, yAxisOffset);
|
|
// Start drawing
|
|
var labels = svg.elem('g'),
|
|
grid = svg.elem('g'),
|
|
// Projected 0 point
|
|
zeroPoint = Chartist.projectPoint(chartRect, bounds, [0], 0);
|
|
|
|
Chartist.createXAxis(chartRect, data, grid, labels, options);
|
|
Chartist.createYAxis(chartRect, bounds, grid, labels, yAxisOffset, options);
|
|
|
|
// Draw the series
|
|
// initialize series groups
|
|
for (var i = 0; i < data.series.length; i++) {
|
|
// Calculating bi-polar value of index for seriesOffset. For i = 0..4 biPol will be -1.5, -0.5, 0.5, 1.5 etc.
|
|
var biPol = i - (data.series.length - 1) / 2,
|
|
// Half of the period with between vertical grid lines used to position bars
|
|
periodHalfWidth = chartRect.width() / normalizedData[i].length / 2;
|
|
|
|
seriesGroups[i] = svg.elem('g');
|
|
|
|
// If the series is an object and contains a name we add a custom attribute
|
|
if(data.series[i].name) {
|
|
seriesGroups[i].attr({
|
|
'series-name': data.series[i].name
|
|
}, Chartist.xmlNs.uri);
|
|
}
|
|
|
|
// Use series class from series data or if not set generate one
|
|
seriesGroups[i].addClass([
|
|
options.classNames.series,
|
|
(data.series[i].className || options.classNames.series + '-' + Chartist.alphaNumerate(i))
|
|
].join(' '));
|
|
|
|
for(var j = 0; j < normalizedData[i].length; j++) {
|
|
var p = Chartist.projectPoint(chartRect, bounds, normalizedData[i], j),
|
|
bar;
|
|
|
|
// Offset to center bar between grid lines and using bi-polar offset for multiple series
|
|
// TODO: Check if we should really be able to add classes to the series. Should be handles with SASS and semantic / specific selectors
|
|
p.x += periodHalfWidth + (biPol * options.seriesBarDistance);
|
|
|
|
bar = seriesGroups[i].elem('line', {
|
|
x1: p.x,
|
|
y1: zeroPoint.y,
|
|
x2: p.x,
|
|
y2: p.y
|
|
}, options.classNames.bar).attr({
|
|
'value': normalizedData[i][j]
|
|
}, Chartist.xmlNs.uri);
|
|
}
|
|
}
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>This method creates a new bar chart and returns an object handle with delegations to the internal closure of the bar chart. You can use the returned object to redraw the chart.</p></div><h6>Parameters</h6><div class="param"><code>query</code> ( <span class="param-type"><code>String</code></span> <span class="param-type"><code>Node</code></span> )<div class="param-description">A selector query string or directly a DOM element</div></div><div class="param"><code>data</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The data object 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 with a version and an update method to manually redraw the chart</div></div><h6>Examples</h6><pre class="api-example"><code class="js">// These are the default options of the line chart
|
|
var options = {
|
|
// Options for X-Axis
|
|
axisX: {
|
|
// The offset of the labels to the chart area
|
|
offset: 10,
|
|
// If labels should be shown or not
|
|
showLabel: true,
|
|
// If the axis grid should be drawn or not
|
|
showGrid: true,
|
|
// Interpolation function that allows you to intercept the value from the axis label
|
|
labelInterpolationFnc: function(value){return value;}
|
|
},
|
|
// Options for Y-Axis
|
|
axisY: {
|
|
// The offset of the labels to the chart area
|
|
offset: 15,
|
|
// If labels should be shown or not
|
|
showLabel: true,
|
|
// If the axis grid should be drawn or not
|
|
showGrid: true,
|
|
// For the Y-Axis you can set a label alignment property of right or left
|
|
labelAlign: 'right',
|
|
// Interpolation function that allows you to intercept the value from the axis label
|
|
labelInterpolationFnc: function(value){return value;},
|
|
// This value specifies the minimum height in pixel of the scale steps
|
|
scaleMinSpace: 30
|
|
},
|
|
// Specify a fixed width for the chart as a string (i.e. '100px' or '50%')
|
|
width: undefined,
|
|
// Specify a fixed height for the chart as a string (i.e. '100px' or '50%')
|
|
height: undefined,
|
|
// If the line should be drawn or not
|
|
showLine: true,
|
|
// If dots should be drawn or not
|
|
showPoint: true,
|
|
// Specify if the lines should be smoothed (Catmull-Rom-Splines will be used)
|
|
lineSmooth: true,
|
|
// Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value
|
|
low: undefined,
|
|
// Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value
|
|
high: undefined,
|
|
// Padding of the chart drawing area to the container element and labels
|
|
chartPadding: 5,
|
|
// Specify the distance in pixel of bars in a group
|
|
seriesBarDistance: 15,
|
|
// Override the class names that get used to generate the SVG structure of the chart
|
|
classNames: {
|
|
chart: 'ct-chart-bar',
|
|
label: 'ct-label',
|
|
series: 'ct-series',
|
|
bar: 'ct-bar',
|
|
point: 'ct-point',
|
|
grid: 'ct-grid',
|
|
vertical: 'ct-vertical',
|
|
horizontal: 'ct-horizontal'
|
|
}
|
|
};
|
|
</code></pre><pre class="api-example"><code class="js">// Create a simple bar chart
|
|
var data = {
|
|
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
|
|
series: [
|
|
[5, 2, 4, 2, 0]
|
|
]
|
|
};
|
|
|
|
// In the global name space Chartist we call the Bar function to initialize a bar chart. As a first parameter we pass in a selector where we would like to get our chart created and as a second parameter we pass our data object.
|
|
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
|
|
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,
|
|
heigh: 10
|
|
});</code></pre></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistbar-function-update"><span class="member-tag">function</span> update()</h5><button class="api-code-button" data-toggle-visible="#chartistbar-function-update-code">Show code</button></header><pre id="chartistbar-function-update-code">
|
|
<code class="javascript">function update() {
|
|
createChart(optionsProvider.currentOptions);
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Updates the chart which currently does a full reconstruction of the SVG DOM</p></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistbar-function-detach"><span class="member-tag">function</span> detach()</h5><button class="api-code-button" data-toggle-visible="#chartistbar-function-detach-code">Show code</button></header><pre id="chartistbar-function-detach-code">
|
|
<code class="javascript">function detach() {
|
|
window.removeEventListener('resize', update);
|
|
optionsProvider.clear();
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>This method will detach the chart from any event listeners that have been added. This includes window.resize and media query listeners for the responsive options. Call this method in order to de-initialize dynamically created / removed charts.</p></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistbar-function-addoptionslistener"><span class="member-tag">function</span> addOptionsListener()</h5><button class="api-code-button" data-toggle-visible="#chartistbar-function-addoptionslistener-code">Show code</button></header><pre id="chartistbar-function-addoptionslistener-code">
|
|
<code class="javascript">function addOptionsListener(callback) {
|
|
optionsProvider.addOptionsListener(callback);
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Add a listener for the responsive options updates. Once the chart will switch to a new option set the listener will be called with the new options.</p></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistbar-function-removeoptionslistener"><span class="member-tag">function</span> removeOptionsListener()</h5><button class="api-code-button" data-toggle-visible="#chartistbar-function-removeoptionslistener-code">Show code</button></header><pre id="chartistbar-function-removeoptionslistener-code">
|
|
<code class="javascript">function removeOptionsListener(callback) {
|
|
optionsProvider.removeOptionsListener(callback);
|
|
}
|
|
|
|
// If this container already contains chartist, let's try to detach first and unregister all event listeners
|
|
if(container.chartist) {
|
|
container.chartist.detach();
|
|
}
|
|
|
|
// 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
|
|
optionsProvider = Chartist.optionsProvider(defaultOptions, options, responsiveOptions);
|
|
createChart(optionsProvider.currentOptions);
|
|
|
|
// TODO: Currently we need to re-draw the chart on window resize. This is usually very bad and will affect performance.
|
|
// This is done because we can't work with relative coordinates when drawing the chart because SVG Path does not
|
|
// work with relative positions yet. We need to check if we can do a viewBox hack to switch to percentage.
|
|
// See http://mozilla.6506.n7.nabble.com/Specyfing-paths-with-percentages-unit-td247474.html
|
|
// Update: can be done using the above method tested here: http://codepen.io/gionkunz/pen/KDvLj
|
|
// The problem is with the label offsets that can't be converted into percentage and affecting the chart container
|
|
window.addEventListener('resize', update);
|
|
|
|
// Public members
|
|
var api = {
|
|
version: Chartist.version,
|
|
update: update,
|
|
detach: detach,
|
|
addOptionsListener: addOptionsListener,
|
|
removeOptionsListener: removeOptionsListener
|
|
};
|
|
|
|
container.chartist = api;
|
|
|
|
return api;
|
|
};
|
|
|
|
}(window, document, Chartist));</code>
|
|
</pre><div class="member-content"><div class="description"><p>Remove a responsive options listener that was previously added using the addOptionsListener method.</p></div></div></article></div></header></section></div><aside class="side-notes"></aside></section><section class="documentation-section full"><header><h3>chartist.core.js</h3></header><div class="content"><section class="sub-section"><header><h4 id="module-chartistcore">Module Chartist.Core</h4><div class="module-description"><p>The core module of Chartist that is mainly providing static functions and higher level functions for chart modules.</p></div><div class="module-members"><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-noop"><span class="member-tag">method</span> Chartist.noop()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-noop-code">Show code</button></header><pre id="chartistcore-method-noop-code">
|
|
<code class="javascript">Chartist.noop = function (n) {
|
|
return n;
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Helps to simplify functional style code</p></div><h6>Parameters</h6><div class="param"><code>n</code> ( <span class="param-type"><code>*</code></span> )<div class="param-description">This exact value will be returned by the noop function</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>*</code></span> )<div class="param-description">The same value that was provided to the n parameter</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-alphanumerate"><span class="member-tag">method</span> Chartist.alphaNumerate()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-alphanumerate-code">Show code</button></header><pre id="chartistcore-method-alphanumerate-code">
|
|
<code class="javascript">Chartist.alphaNumerate = function (n) {
|
|
// Limit to a-z
|
|
return String.fromCharCode(97 + n % 26);
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Generates a-z from a number 0 to 26</p></div><h6>Parameters</h6><div class="param"><code>n</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">A number from 0 to 26 that will result in a letter a-z</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>String</code></span> )<div class="param-description">A character from a-z based on the input number n</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-extend"><span class="member-tag">method</span> Chartist.extend()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-extend-code">Show code</button></header><pre id="chartistcore-method-extend-code">
|
|
<code class="javascript">Chartist.extend = function (target, source) {
|
|
target = target || {};
|
|
for (var prop in source) {
|
|
if (typeof source[prop] === 'object') {
|
|
target[prop] = Chartist.extend(target[prop], source[prop]);
|
|
} else {
|
|
target[prop] = source[prop];
|
|
}
|
|
}
|
|
return target;
|
|
};
|
|
|
|
//TODO: move into Chartist.svg</code>
|
|
</pre><div class="member-content"><div class="description"><p>Simple recursive object extend</p></div><h6>Parameters</h6><div class="param"><code>target</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">Target object where the source will be merged into</div></div><div class="param"><code>source</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">This object will be merged into target and then target is returned</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Object</code></span> )<div class="param-description">An object that has the same reference as target but is extended and merged with the properties of source</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-getheight"><span class="member-tag">method</span> Chartist.getHeight()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-getheight-code">Show code</button></header><pre id="chartistcore-method-getheight-code">
|
|
<code class="javascript">Chartist.getHeight = function (svgElement) {
|
|
return svgElement.clientHeight || Math.round(svgElement.getBBox().height) || svgElement.parentNode.clientHeight;
|
|
};
|
|
|
|
//TODO: move into Chartist.svg</code>
|
|
</pre><div class="member-content"><div class="description"><p>Get element height with fallback to svg BoundingBox or parent container dimensions:<br>See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=530985">bugzilla.mozilla.org</a></p></div><h6>Parameters</h6><div class="param"><code>svgElement</code> ( <span class="param-type"><code>Node</code></span> )<div class="param-description">The svg element from which we want to retrieve its height</div></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 method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-getwidth"><span class="member-tag">method</span> Chartist.getWidth()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-getwidth-code">Show code</button></header><pre id="chartistcore-method-getwidth-code">
|
|
<code class="javascript">Chartist.getWidth = function (svgElement) {
|
|
return svgElement.clientWidth || Math.round(svgElement.getBBox().width) || svgElement.parentNode.clientWidth;
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Get element width with fallback to svg BoundingBox or parent container dimensions:<br>See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=530985">bugzilla.mozilla.org</a></p></div><h6>Parameters</h6><div class="param"><code>svgElement</code> ( <span class="param-type"><code>Node</code></span> )<div class="param-description">The svg element from which we want to retrieve its width</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Number</code></span> )<div class="param-description">The elements width in pixels</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-queryselector"><span class="member-tag">method</span> Chartist.querySelector()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-queryselector-code">Show code</button></header><pre id="chartistcore-method-queryselector-code">
|
|
<code class="javascript">Chartist.querySelector = function(query) {
|
|
return query instanceof Node ? query : document.querySelector(query);
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>This is a wrapper around document.querySelector that will return the query if it's already of type Node</p></div><h6>Parameters</h6><div class="param"><code>query</code> ( <span class="param-type"><code>String</code></span> <span class="param-type"><code>Node</code></span> )<div class="param-description">The query to use for selecting a Node or a DOM node that will be returned directly</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Node</code></span> )<div class="param-description"></div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-createsvg"><span class="member-tag">method</span> Chartist.createSvg()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-createsvg-code">Show code</button></header><pre id="chartistcore-method-createsvg-code">
|
|
<code class="javascript">Chartist.createSvg = function (container, width, height, className) {
|
|
var svg;
|
|
|
|
// If already contains our svg object we clear it, set width / height and return
|
|
if (container.chartistSvg !== undefined) {
|
|
svg = container.chartistSvg.attr({
|
|
width: width || '100%',
|
|
height: height || '100%'
|
|
}).removeAllClasses().addClass(className);
|
|
// Clear the draw if its already used before so we start fresh
|
|
svg.empty();
|
|
|
|
} else {
|
|
// Create svg object with width and height or use 100% as default
|
|
svg = Chartist.svg('svg').attr({
|
|
width: width || '100%',
|
|
height: height || '100%'
|
|
}).addClass(className);
|
|
|
|
// Add the DOM node to our container
|
|
container.appendChild(svg._node);
|
|
container.chartistSvg = svg;
|
|
}
|
|
|
|
return svg;
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Create or reinitialize the SVG element for the chart</p></div><h6>Parameters</h6><div class="param"><code>container</code> ( <span class="param-type"><code>Node</code></span> )<div class="param-description">The containing DOM Node object that will be used to plant the SVG element</div></div><div class="param"><code>width</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">Set the width of the SVG element. Default is 100%</div></div><div class="param"><code>height</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">Set the height of the SVG element. Default is 100%</div></div><div class="param"><code>className</code> ( <span class="param-type"><code>String</code></span> )<div class="param-description">Specify a class to be added to the SVG element</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Object</code></span> )<div class="param-description">The created/reinitialized SVG element</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-getdataarray"><span class="member-tag">method</span> Chartist.getDataArray()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-getdataarray-code">Show code</button></header><pre id="chartistcore-method-getdataarray-code">
|
|
<code class="javascript">Chartist.getDataArray = function (data) {
|
|
var array = [];
|
|
|
|
for (var i = 0; i < data.series.length; i++) {
|
|
// If the series array contains an object with a data property we will use the property
|
|
// otherwise the value directly (array or number)
|
|
array[i] = typeof(data.series[i]) === 'object' && data.series[i].data !== undefined ?
|
|
data.series[i].data : data.series[i];
|
|
}
|
|
|
|
return array;
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Convert data series into plain array</p></div><h6>Parameters</h6><div class="param"><code>data</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The series object that contains the data to be visualized in the chart</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Array</code></span> )<div class="param-description">A plain array that contains the data to be visualized in the chart</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-normalizedataarray"><span class="member-tag">method</span> Chartist.normalizeDataArray()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-normalizedataarray-code">Show code</button></header><pre id="chartistcore-method-normalizedataarray-code">
|
|
<code class="javascript">Chartist.normalizeDataArray = function (dataArray, length) {
|
|
for (var i = 0; i < dataArray.length; i++) {
|
|
if (dataArray[i].length === length) {
|
|
continue;
|
|
}
|
|
|
|
for (var j = dataArray[i].length; j < length; j++) {
|
|
dataArray[i][j] = 0;
|
|
}
|
|
}
|
|
|
|
return dataArray;
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Adds missing values at the end of the array. This array contains the data, that will be visualized in the chart</p></div><h6>Parameters</h6><div class="param"><code>dataArray</code> ( <span class="param-type"><code>Array</code></span> )<div class="param-description">The array that contains the data to be visualized in the chart. The array in this parameter will be modified by function.</div></div><div class="param"><code>length</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The length of the x-axis data array.</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Array</code></span> )<div class="param-description">The array that got updated with missing values.</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-orderofmagnitude"><span class="member-tag">method</span> Chartist.orderOfMagnitude()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-orderofmagnitude-code">Show code</button></header><pre id="chartistcore-method-orderofmagnitude-code">
|
|
<code class="javascript">Chartist.orderOfMagnitude = function (value) {
|
|
return Math.floor(Math.log(Math.abs(value)) / Math.LN10);
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Calculate the order of magnitude for the chart scale</p></div><h6>Parameters</h6><div class="param"><code>value</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The value Range of the chart</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Number</code></span> )<div class="param-description">The order of magnitude</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-projectlength"><span class="member-tag">method</span> Chartist.projectLength()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-projectlength-code">Show code</button></header><pre id="chartistcore-method-projectlength-code">
|
|
<code class="javascript">Chartist.projectLength = function (svg, length, bounds, options) {
|
|
var availableHeight = Chartist.getAvailableHeight(svg, options);
|
|
return (length / bounds.range * availableHeight);
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Project a data length into screen coordinates (pixels)</p></div><h6>Parameters</h6><div class="param"><code>svg</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The svg element for the chart</div></div><div class="param"><code>length</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">Single data value from a series array</div></div><div class="param"><code>bounds</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">All the values to set the bounds of the chart</div></div><div class="param"><code>options</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The Object that contains all the optional values for the chart</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Number</code></span> )<div class="param-description">The projected data length in pixels</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-getavailableheight"><span class="member-tag">method</span> Chartist.getAvailableHeight()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-getavailableheight-code">Show code</button></header><pre id="chartistcore-method-getavailableheight-code">
|
|
<code class="javascript">Chartist.getAvailableHeight = function (svg, options) {
|
|
return Chartist.getHeight(svg._node) - (options.chartPadding * 2) - options.axisX.offset;
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Get the height of the area in the chart for the data series</p></div><h6>Parameters</h6><div class="param"><code>svg</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The svg element for the chart</div></div><div class="param"><code>options</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The Object that contains all the optional values for the chart</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Number</code></span> )<div class="param-description">The height of the area in the chart for the data series</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-gethighlow"><span class="member-tag">method</span> Chartist.getHighLow()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-gethighlow-code">Show code</button></header><pre id="chartistcore-method-gethighlow-code">
|
|
<code class="javascript">Chartist.getHighLow = function (dataArray) {
|
|
var i,
|
|
j,
|
|
highLow = {
|
|
high: -Number.MAX_VALUE,
|
|
low: Number.MAX_VALUE
|
|
};
|
|
|
|
for (i = 0; i < dataArray.length; i++) {
|
|
for (j = 0; j < dataArray[i].length; j++) {
|
|
if (dataArray[i][j] > highLow.high) {
|
|
highLow.high = dataArray[i][j];
|
|
}
|
|
|
|
if (dataArray[i][j] < highLow.low) {
|
|
highLow.low = dataArray[i][j];
|
|
}
|
|
}
|
|
}
|
|
|
|
return highLow;
|
|
};
|
|
|
|
// Find the highest and lowest values in a two dimensional array and calculate scale based on order of magnitude</code>
|
|
</pre><div class="member-content"><div class="description"><p>Get highest and lowest value of data array. This Array contains the data that will be visualized in the chart.</p></div><h6>Parameters</h6><div class="param"><code>dataArray</code> ( <span class="param-type"><code>Array</code></span> )<div class="param-description">The array that contains the data to be visualized in the chart</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Array</code></span> )<div class="param-description">The array that contains the highest and lowest value that will be visualized on the chart.</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-getbounds"><span class="member-tag">method</span> Chartist.getBounds()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-getbounds-code">Show code</button></header><pre id="chartistcore-method-getbounds-code">
|
|
<code class="javascript">Chartist.getBounds = function (svg, normalizedData, options, referenceValue) {
|
|
var i,
|
|
newMin,
|
|
newMax,
|
|
bounds = Chartist.getHighLow(normalizedData);
|
|
|
|
// Overrides of high / low from settings
|
|
bounds.high = options.high || (options.high === 0 ? 0 : bounds.high);
|
|
bounds.low = options.low || (options.low === 0 ? 0 : bounds.low);
|
|
|
|
// Overrides of high / low based on reference value, it will make sure that the invisible reference value is
|
|
// used to generate the chart. This is useful when the chart always needs to contain the position of the
|
|
// invisible reference value in the view i.e. for bipolar scales.
|
|
if (referenceValue || referenceValue === 0) {
|
|
bounds.high = Math.max(referenceValue, bounds.high);
|
|
bounds.low = Math.min(referenceValue, bounds.low);
|
|
}
|
|
|
|
bounds.valueRange = bounds.high - bounds.low;
|
|
bounds.oom = Chartist.orderOfMagnitude(bounds.valueRange);
|
|
bounds.min = Math.floor(bounds.low / Math.pow(10, bounds.oom)) * Math.pow(10, bounds.oom);
|
|
bounds.max = Math.ceil(bounds.high / Math.pow(10, bounds.oom)) * Math.pow(10, bounds.oom);
|
|
bounds.range = bounds.max - bounds.min;
|
|
bounds.step = Math.pow(10, bounds.oom);
|
|
bounds.numberOfSteps = Math.round(bounds.range / bounds.step);
|
|
|
|
// Optimize scale step by checking if subdivision is possible based on horizontalGridMinSpace
|
|
while (true) {
|
|
var length = Chartist.projectLength(svg, bounds.step / 2, bounds, options);
|
|
if (length >= options.axisY.scaleMinSpace) {
|
|
bounds.step /= 2;
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Narrow min and max based on new step
|
|
newMin = bounds.min;
|
|
newMax = bounds.max;
|
|
for (i = bounds.min; i <= bounds.max; i += bounds.step) {
|
|
if (i + bounds.step < bounds.low) {
|
|
newMin += bounds.step;
|
|
}
|
|
|
|
if (i - bounds.step > bounds.high) {
|
|
newMax -= bounds.step;
|
|
}
|
|
}
|
|
bounds.min = newMin;
|
|
bounds.max = newMax;
|
|
bounds.range = bounds.max - bounds.min;
|
|
|
|
bounds.values = [];
|
|
for (i = bounds.min; i <= bounds.max; i += bounds.step) {
|
|
bounds.values.push(i);
|
|
}
|
|
|
|
return bounds;
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Calculate and retrieve all the bounds for the chart and return them in one array</p></div><h6>Parameters</h6><div class="param"><code>svg</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The svg element for the chart</div></div><div class="param"><code>normalizedData</code> ( <span class="param-type"><code>Array</code></span> )<div class="param-description">The array that got updated with missing values.</div></div><div class="param"><code>options</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The Object that contains all the optional values for the chart</div></div><div class="param"><code>referenceValue</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The reference value for the chart.</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Object</code></span> )<div class="param-description">All the values to set the bounds of the chart</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-calculatelabeloffset"><span class="member-tag">method</span> Chartist.calculateLabelOffset()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-calculatelabeloffset-code">Show code</button></header><pre id="chartistcore-method-calculatelabeloffset-code">
|
|
<code class="javascript">Chartist.calculateLabelOffset = function (svg, data, labelClass, labelInterpolationFnc, offsetFnc) {
|
|
var offset = 0;
|
|
for (var i = 0; i < data.length; i++) {
|
|
// If interpolation function returns falsy value we skipp this label
|
|
var interpolated = labelInterpolationFnc(data[i], i);
|
|
if (!interpolated && interpolated !== 0) {
|
|
continue;
|
|
}
|
|
|
|
var label = svg.elem('text', {
|
|
dx: 0,
|
|
dy: 0
|
|
}, labelClass).text('' + interpolated);
|
|
|
|
// Check if this is the largest label and update offset
|
|
offset = Math.max(offset, offsetFnc(label._node));
|
|
// Remove label after offset Calculation
|
|
label.remove();
|
|
}
|
|
|
|
return offset;
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Calculate the needed offset to fit in the labels</p></div><h6>Parameters</h6><div class="param"><code>svg</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The svg element for the chart</div></div><div class="param"><code>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>labelClass</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">All css classes of the label</div></div><div class="param"><code>labelInterpolationFnc</code> ( <span class="param-type"><code>Function</code></span> )<div class="param-description">The function that interpolates the label value</div></div><div class="param"><code>offsetFnc</code> ( <span class="param-type"><code>Function</code></span> )<div class="param-description">Function to find greatest value of either the width or the height of the label, depending on the context</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Number</code></span> )<div class="param-description">The number that represents the label offset in pixels</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-polartocartesian"><span class="member-tag">method</span> Chartist.polarToCartesian()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-polartocartesian-code">Show code</button></header><pre id="chartistcore-method-polartocartesian-code">
|
|
<code class="javascript">Chartist.polarToCartesian = function (centerX, centerY, radius, angleInDegrees) {
|
|
var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
|
|
|
|
return {
|
|
x: centerX + (radius * Math.cos(angleInRadians)),
|
|
y: centerY + (radius * Math.sin(angleInRadians))
|
|
};
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Calculate cartesian coordinates of polar coordinates</p></div><h6>Parameters</h6><div class="param"><code>centerX</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">X-axis coordinates of center point of circle segment</div></div><div class="param"><code>centerY</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">X-axis coordinates of center point of circle segment</div></div><div class="param"><code>radius</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">Radius of circle segment</div></div><div class="param"><code>angleInDegrees</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">Angle of circle segment in degrees</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Number</code></span> )<div class="param-description">Coordinates of point on circumference</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-createchartrect"><span class="member-tag">method</span> Chartist.createChartRect()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-createchartrect-code">Show code</button></header><pre id="chartistcore-method-createchartrect-code">
|
|
<code class="javascript">Chartist.createChartRect = function (svg, options, xAxisOffset, yAxisOffset) {
|
|
return {
|
|
x1: options.chartPadding + yAxisOffset,
|
|
y1: (options.height || Chartist.getHeight(svg._node)) - options.chartPadding - xAxisOffset,
|
|
x2: (options.width || Chartist.getWidth(svg._node)) - options.chartPadding,
|
|
y2: options.chartPadding,
|
|
width: function () {
|
|
return this.x2 - this.x1;
|
|
},
|
|
height: function () {
|
|
return this.y1 - this.y2;
|
|
}
|
|
};
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Initialize chart drawing rectangle (area where chart is drawn) x1,y1 = bottom left / x2,y2 = top right</p></div><h6>Parameters</h6><div class="param"><code>svg</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The svg element for the chart</div></div><div class="param"><code>options</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The Object that contains all the optional values for the chart</div></div><div class="param"><code>xAxisOffset</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The offset of the x-axis to the border of the svg element</div></div><div class="param"><code>yAxisOffset</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The offset of the y-axis to the border of the svg element</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Object</code></span> )<div class="param-description">The chart rectangles coordinates inside the svg element plus the rectangles measurements</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-createxaxis"><span class="member-tag">method</span> Chartist.createXAxis()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-createxaxis-code">Show code</button></header><pre id="chartistcore-method-createxaxis-code">
|
|
<code class="javascript">Chartist.createXAxis = function (chartRect, data, grid, labels, options) {
|
|
// Create X-Axis
|
|
data.labels.forEach(function (value, index) {
|
|
var interpolatedValue = options.axisX.labelInterpolationFnc(value, index),
|
|
pos = chartRect.x1 + chartRect.width() / data.labels.length * index;
|
|
|
|
// If interpolated value returns falsey (except 0) we don't draw the grid line
|
|
if (!interpolatedValue && interpolatedValue !== 0) {
|
|
return;
|
|
}
|
|
|
|
if (options.axisX.showGrid) {
|
|
grid.elem('line', {
|
|
x1: pos,
|
|
y1: chartRect.y1,
|
|
x2: pos,
|
|
y2: chartRect.y2
|
|
}, [options.classNames.grid, options.classNames.horizontal].join(' '));
|
|
}
|
|
|
|
if (options.axisX.showLabel) {
|
|
// Use config offset for setting labels of
|
|
var label = labels.elem('text', {
|
|
dx: pos + 2
|
|
}, [options.classNames.label, options.classNames.horizontal].join(' ')).text('' + interpolatedValue);
|
|
|
|
// TODO: should use 'alignment-baseline': 'hanging' but not supported in firefox. Instead using calculated height to offset y pos
|
|
label.attr({
|
|
dy: chartRect.y1 + Chartist.getHeight(label._node) + options.axisX.offset
|
|
});
|
|
}
|
|
});
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Generate grid lines and labels for the x-axis into grid and labels group SVG elements</p></div><h6>Parameters</h6><div class="param"><code>chartRect</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The rectangle that sets the bounds for the chart in the svg element</div></div><div class="param"><code>data</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The Object that contains the data to be visualized in the chart</div></div><div class="param"><code>grid</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">Chartist.svg wrapper object to be filled with the grid lines of the chart</div></div><div class="param"><code>labels</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">Chartist.svg wrapper object to be filled with the lables of the chart</div></div><div class="param"><code>options</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The Object that contains all the optional values for the chart</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-createyaxis"><span class="member-tag">method</span> Chartist.createYAxis()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-createyaxis-code">Show code</button></header><pre id="chartistcore-method-createyaxis-code">
|
|
<code class="javascript">Chartist.createYAxis = function (chartRect, bounds, grid, labels, offset, options) {
|
|
// Create Y-Axis
|
|
bounds.values.forEach(function (value, index) {
|
|
var interpolatedValue = options.axisY.labelInterpolationFnc(value, index),
|
|
pos = chartRect.y1 - chartRect.height() / bounds.values.length * index;
|
|
|
|
// If interpolated value returns falsey (except 0) we don't draw the grid line
|
|
if (!interpolatedValue && interpolatedValue !== 0) {
|
|
return;
|
|
}
|
|
|
|
if (options.axisY.showGrid) {
|
|
grid.elem('line', {
|
|
x1: chartRect.x1,
|
|
y1: pos,
|
|
x2: chartRect.x2,
|
|
y2: pos
|
|
}, [options.classNames.grid, options.classNames.vertical].join(' '));
|
|
}
|
|
|
|
if (options.axisY.showLabel) {
|
|
labels.elem('text', {
|
|
dx: options.axisY.labelAlign === 'right' ? offset - options.axisY.offset + options.chartPadding : options.chartPadding,
|
|
dy: pos - 2,
|
|
'text-anchor': options.axisY.labelAlign === 'right' ? 'end' : 'start'
|
|
}, [options.classNames.label, options.classNames.vertical].join(' ')).text('' + interpolatedValue);
|
|
}
|
|
});
|
|
};</code>
|
|
</pre><div class="member-content"><div class="description"><p>Generate grid lines and labels for the y-axis into grid and labels group SVG elements</p></div><h6>Parameters</h6><div class="param"><code>chartRect</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The rectangle that sets the bounds for the chart in the svg element</div></div><div class="param"><code>bounds</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">All the values to set the bounds of the chart</div></div><div class="param"><code>grid</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">Chartist.svg wrapper object to be filled with the grid lines of the chart</div></div><div class="param"><code>labels</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">Chartist.svg wrapper object to be filled with the lables of the chart</div></div><div class="param"><code>offset</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">Offset for the y-axis</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></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-projectpoint"><span class="member-tag">method</span> Chartist.projectPoint()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-projectpoint-code">Show code</button></header><pre id="chartistcore-method-projectpoint-code">
|
|
<code class="javascript">Chartist.projectPoint = function (chartRect, bounds, data, index) {
|
|
return {
|
|
x: chartRect.x1 + chartRect.width() / data.length * index,
|
|
y: chartRect.y1 - chartRect.height() * (data[index] - bounds.min) / (bounds.range + bounds.step)
|
|
};
|
|
};
|
|
|
|
// TODO: With multiple media queries the handleMediaChange function is triggered too many times, only need one</code>
|
|
</pre><div class="member-content"><div class="description"><p>Determine the current point on the svg element to draw the data series</p></div><h6>Parameters</h6><div class="param"><code>chartRect</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The rectangle that sets the bounds for the chart in the svg element</div></div><div class="param"><code>bounds</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">All the values to set the bounds of the chart</div></div><div class="param"><code>data</code> ( <span class="param-type"><code>Array</code></span> )<div class="param-description">The array that contains the data to be visualized in the chart</div></div><div class="param"><code>index</code> ( <span class="param-type"><code>Number</code></span> )<div class="param-description">The index of the current project point</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Object</code></span> )<div class="param-description">The coordinates object of the current project point containing an x and y number property</div></div></div></article><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistcore-method-optionsprovider"><span class="member-tag">method</span> Chartist.optionsProvider()</h5><button class="api-code-button" data-toggle-visible="#chartistcore-method-optionsprovider-code">Show code</button></header><pre id="chartistcore-method-optionsprovider-code">
|
|
<code class="javascript">Chartist.optionsProvider = function (defaultOptions, options, responsiveOptions) {
|
|
var baseOptions = Chartist.extend(Chartist.extend({}, defaultOptions), options),
|
|
currentOptions,
|
|
mediaQueryListeners = [],
|
|
optionsListeners = [],
|
|
i;
|
|
|
|
function updateCrrentOptions() {
|
|
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]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function clearMediaQueryListeners() {
|
|
mediaQueryListeners.forEach(function(mql) {
|
|
mql.removeListener(updateCrrentOptions);
|
|
});
|
|
}
|
|
|
|
if (!window.matchMedia) {
|
|
throw 'window.matchMedia not found! Make sure youundefined're using a polyfill.';
|
|
} else if (responsiveOptions) {
|
|
|
|
for (i = 0; i < responsiveOptions.length; i++) {
|
|
var mql = window.matchMedia(responsiveOptions[i][0]);
|
|
mql.addListener(updateCrrentOptions);
|
|
mediaQueryListeners.push(mql);
|
|
}
|
|
}
|
|
// Execute initially so we get the correct current options
|
|
updateCrrentOptions();
|
|
|
|
return {
|
|
get currentOptions() {
|
|
return Chartist.extend({}, currentOptions);
|
|
},
|
|
addOptionsListener: function(callback) {
|
|
optionsListeners.push(callback);
|
|
},
|
|
removeOptionsListener: function(callback) {
|
|
optionsListeners.splice(optionsListeners.indexOf(callback), 1);
|
|
},
|
|
clear: function() {
|
|
optionsListeners = [];
|
|
clearMediaQueryListeners();
|
|
}
|
|
};
|
|
};
|
|
|
|
//http://schepers.cc/getting-to-the-point
|
|
Chartist.catmullRom2bezier = function (crp, z) {
|
|
var d = [];
|
|
for (var i = 0, iLen = crp.length; iLen - 2 * !z > i; i += 2) {
|
|
var p = [
|
|
{x: +crp[i - 2], y: +crp[i - 1]},
|
|
{x: +crp[i], y: +crp[i + 1]},
|
|
{x: +crp[i + 2], y: +crp[i + 3]},
|
|
{x: +crp[i + 4], y: +crp[i + 5]}
|
|
];
|
|
if (z) {
|
|
if (!i) {
|
|
p[0] = {x: +crp[iLen - 2], y: +crp[iLen - 1]};
|
|
} else if (iLen - 4 === i) {
|
|
p[3] = {x: +crp[0], y: +crp[1]};
|
|
} else if (iLen - 2 === i) {
|
|
p[2] = {x: +crp[0], y: +crp[1]};
|
|
p[3] = {x: +crp[2], y: +crp[3]};
|
|
}
|
|
} else {
|
|
if (iLen - 4 === i) {
|
|
p[3] = p[2];
|
|
} else if (!i) {
|
|
p[0] = {x: +crp[i], y: +crp[i + 1]};
|
|
}
|
|
}
|
|
d.push(
|
|
[
|
|
(-p[0].x + 6 * p[1].x + p[2].x) / 6,
|
|
(-p[0].y + 6 * p[1].y + p[2].y) / 6,
|
|
(p[1].x + 6 * p[2].x - p[3].x) / 6,
|
|
(p[1].y + 6 * p[2].y - p[3].y) / 6,
|
|
p[2].x,
|
|
p[2].y
|
|
]
|
|
);
|
|
}
|
|
|
|
return d;
|
|
};
|
|
|
|
}(window, document, Chartist));</code>
|
|
</pre><div class="member-content"><div class="description"><p>Provides options handling functionality with callback for options changes triggered by responsive options and media query matches</p></div><h6>Parameters</h6><div class="param"><code>defaultOptions</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">Default options from Chartist</div></div><div class="param"><code>options</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">Options set by user</div></div><div class="param"><code>responsiveOptions</code> ( <span class="param-type"><code>Array</code></span> )<div class="param-description">Optional functions to add responsive behavior to chart</div></div><div class="param"><code>optionsChangedCallbackFnc</code> ( <span class="param-type"><code>Function</code></span> )<div class="param-description">The callback that will be executed when a media change triggered new options to be used. The callback function will receive the new options as first parameter.</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>chartist.line.js</h3></header><div class="content"><section class="sub-section"><header><h4 id="module-chartistline">Module Chartist.Line</h4><div class="module-description"><p>The Chartist line chart can be used to draw Line or Scatter charts. If used in the browser you can access the global <code>Chartist</code> namespace where you find the <code>Line</code> function as a main entry point.</p></div><div class="module-members"><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistline-method-line"><span class="member-tag">method</span> Chartist.Line()</h5><button class="api-code-button" data-toggle-visible="#chartistline-method-line-code">Show code</button></header><pre id="chartistline-method-line-code">
|
|
<code class="javascript">Chartist.Line = function (query, data, options, responsiveOptions) {
|
|
|
|
var defaultOptions = {
|
|
axisX: {
|
|
offset: 10,
|
|
showLabel: true,
|
|
showGrid: true,
|
|
labelInterpolationFnc: Chartist.noop
|
|
},
|
|
axisY: {
|
|
offset: 15,
|
|
showLabel: true,
|
|
showGrid: true,
|
|
labelAlign: 'right',
|
|
labelInterpolationFnc: Chartist.noop,
|
|
scaleMinSpace: 30
|
|
},
|
|
width: undefined,
|
|
height: undefined,
|
|
showLine: true,
|
|
showPoint: true,
|
|
lineSmooth: true,
|
|
low: undefined,
|
|
high: undefined,
|
|
chartPadding: 5,
|
|
classNames: {
|
|
chart: 'ct-chart-line',
|
|
label: 'ct-label',
|
|
series: 'ct-series',
|
|
line: 'ct-line',
|
|
point: 'ct-point',
|
|
grid: 'ct-grid',
|
|
vertical: 'ct-vertical',
|
|
horizontal: 'ct-horizontal'
|
|
}
|
|
},
|
|
optionsProvider,
|
|
container = Chartist.querySelector(query),
|
|
svg;
|
|
|
|
function createChart(options) {
|
|
var xAxisOffset,
|
|
yAxisOffset,
|
|
seriesGroups = [],
|
|
bounds,
|
|
normalizedData = Chartist.normalizeDataArray(Chartist.getDataArray(data), data.labels.length);
|
|
|
|
// Create new svg object
|
|
svg = Chartist.createSvg(container, options.width, options.height, options.classNames.chart);
|
|
|
|
// initialize bounds
|
|
bounds = Chartist.getBounds(svg, normalizedData, options);
|
|
|
|
xAxisOffset = options.axisX.offset;
|
|
if (options.axisX.showLabel) {
|
|
xAxisOffset += Chartist.calculateLabelOffset(
|
|
svg,
|
|
data.labels,
|
|
[options.classNames.label, options.classNames.horizontal].join(' '),
|
|
options.axisX.labelInterpolationFnc,
|
|
Chartist.getHeight
|
|
);
|
|
}
|
|
|
|
yAxisOffset = options.axisY.offset;
|
|
if (options.axisY.showLabel) {
|
|
yAxisOffset += Chartist.calculateLabelOffset(
|
|
svg,
|
|
bounds.values,
|
|
[options.classNames.label, options.classNames.horizontal].join(' '),
|
|
options.axisY.labelInterpolationFnc,
|
|
Chartist.getWidth
|
|
);
|
|
}
|
|
|
|
var chartRect = Chartist.createChartRect(svg, options, xAxisOffset, yAxisOffset);
|
|
// Start drawing
|
|
var labels = svg.elem('g'),
|
|
grid = svg.elem('g');
|
|
|
|
Chartist.createXAxis(chartRect, data, grid, labels, options);
|
|
Chartist.createYAxis(chartRect, bounds, grid, labels, yAxisOffset, options);
|
|
|
|
// Draw the series
|
|
// initialize series groups
|
|
for (var i = 0; i < data.series.length; i++) {
|
|
seriesGroups[i] = svg.elem('g');
|
|
|
|
// If the series is an object and contains a name we add a custom attribute
|
|
if(data.series[i].name) {
|
|
seriesGroups[i].attr({
|
|
'series-name': data.series[i].name
|
|
}, Chartist.xmlNs.uri);
|
|
}
|
|
|
|
// Use series class from series data or if not set generate one
|
|
seriesGroups[i].addClass([
|
|
options.classNames.series,
|
|
(data.series[i].className || options.classNames.series + '-' + Chartist.alphaNumerate(i))
|
|
].join(' '));
|
|
|
|
var p,
|
|
pathCoordinates = [],
|
|
point;
|
|
|
|
for (var j = 0; j < normalizedData[i].length; j++) {
|
|
p = Chartist.projectPoint(chartRect, bounds, normalizedData[i], j);
|
|
pathCoordinates.push(p.x, p.y);
|
|
|
|
//If we should show points we need to create them now to avoid secondary loop
|
|
// Small offset for Firefox to render squares correctly
|
|
if (options.showPoint) {
|
|
point = seriesGroups[i].elem('line', {
|
|
x1: p.x,
|
|
y1: p.y,
|
|
x2: p.x + 0.01,
|
|
y2: p.y
|
|
}, options.classNames.point).attr({
|
|
'value': normalizedData[i][j]
|
|
}, Chartist.xmlNs.uri);
|
|
}
|
|
}
|
|
|
|
if (options.showLine) {
|
|
var svgPathString = 'M' + pathCoordinates[0] + ',' + pathCoordinates[1] + ' ';
|
|
|
|
// If smoothed path and path has more than two points then use catmull rom to bezier algorithm
|
|
if (options.lineSmooth && pathCoordinates.length > 4) {
|
|
|
|
var cr = Chartist.catmullRom2bezier(pathCoordinates);
|
|
for(var k = 0; k < cr.length; k++) {
|
|
svgPathString += 'C' + cr[k].join();
|
|
}
|
|
} else {
|
|
for(var l = 3; l < pathCoordinates.length; l += 2) {
|
|
svgPathString += 'L ' + pathCoordinates[l - 1] + ',' + pathCoordinates[l];
|
|
}
|
|
}
|
|
|
|
seriesGroups[i].elem('path', {
|
|
d: svgPathString
|
|
}, options.classNames.line, true).attr({
|
|
'values': normalizedData[i]
|
|
}, Chartist.xmlNs.uri);
|
|
}
|
|
}
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>This method creates a new line chart and returns an object handle to the internal closure. Currently you can use the returned object only for updating / redrawing the chart.</p></div><h6>Parameters</h6><div class="param"><code>query</code> ( <span class="param-type"><code>String</code></span> <span class="param-type"><code>Node</code></span> )<div class="param-description">A selector query string or directly a DOM element</div></div><div class="param"><code>data</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The data object 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 with a version and an update method to manually redraw the chart</div></div><h6>Examples</h6><pre class="api-example"><code class="js">// These are the default options of the line chart
|
|
var options = {
|
|
// Options for X-Axis
|
|
axisX: {
|
|
// The offset of the labels to the chart area
|
|
offset: 10,
|
|
// If labels should be shown or not
|
|
showLabel: true,
|
|
// If the axis grid should be drawn or not
|
|
showGrid: true,
|
|
// Interpolation function that allows you to intercept the value from the axis label
|
|
labelInterpolationFnc: function(value){return value;}
|
|
},
|
|
// Options for Y-Axis
|
|
axisY: {
|
|
// The offset of the labels to the chart area
|
|
offset: 15,
|
|
// If labels should be shown or not
|
|
showLabel: true,
|
|
// If the axis grid should be drawn or not
|
|
showGrid: true,
|
|
// For the Y-Axis you can set a label alignment property of right or left
|
|
labelAlign: 'right',
|
|
// Interpolation function that allows you to intercept the value from the axis label
|
|
labelInterpolationFnc: function(value){return value;},
|
|
// This value specifies the minimum height in pixel of the scale steps
|
|
scaleMinSpace: 30
|
|
},
|
|
// Specify a fixed width for the chart as a string (i.e. '100px' or '50%')
|
|
width: undefined,
|
|
// Specify a fixed height for the chart as a string (i.e. '100px' or '50%')
|
|
height: undefined,
|
|
// If the line should be drawn or not
|
|
showLine: true,
|
|
// If dots should be drawn or not
|
|
showPoint: true,
|
|
// Specify if the lines should be smoothed (Catmull-Rom-Splines will be used)
|
|
lineSmooth: true,
|
|
// Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value
|
|
low: undefined,
|
|
// Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value
|
|
high: undefined,
|
|
// Padding of the chart drawing area to the container element and labels
|
|
chartPadding: 5,
|
|
// Override the class names that get used to generate the SVG structure of the chart
|
|
classNames: {
|
|
chart: 'ct-chart-line',
|
|
label: 'ct-label',
|
|
series: 'ct-series',
|
|
line: 'ct-line',
|
|
point: 'ct-point',
|
|
grid: 'ct-grid',
|
|
vertical: 'ct-vertical',
|
|
horizontal: 'ct-horizontal'
|
|
}
|
|
};
|
|
</code></pre><pre class="api-example"><code class="js">// Create a simple line chart
|
|
var data = {
|
|
// A labels array that can contain any sort of values
|
|
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
|
|
// Our series array that contains series objects or in this case series data arrays
|
|
series: [
|
|
[5, 2, 4, 2, 0]
|
|
]
|
|
};
|
|
|
|
// As options we currently only set a static size of 300x200 px
|
|
var options = {
|
|
width: '300px',
|
|
height: '200px'
|
|
};
|
|
|
|
// In the global name space Chartist we call the Line function to initialize a line chart. As a first parameter we pass in a selector where we would like to get our chart created. Second parameter is the actual data object and as a third parameter we pass in our options
|
|
Chartist.Line('.ct-chart', data, options);
|
|
</code></pre><pre class="api-example"><code class="js">// Create a line chart with responsive options
|
|
|
|
var data = {
|
|
// A labels array that can contain any sort of values
|
|
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
|
|
// Our series array that contains series objects or in this case series data arrays
|
|
series: [
|
|
[5, 2, 4, 2, 0]
|
|
]
|
|
};
|
|
|
|
// In adition to the regular options we specify responsive option overrides that will override the default configutation based on the matching media queries.
|
|
var responsiveOptions = [
|
|
['screen and (min-width: 641px) and (max-width: 1024px)', {
|
|
showPoint: false,
|
|
axisX: {
|
|
labelInterpolationFnc: function(value) {
|
|
// Will return Mon, Tue, Wed etc. on medium screens
|
|
return value.slice(0, 3);
|
|
}
|
|
}
|
|
}],
|
|
['screen and (max-width: 640px)', {
|
|
showLine: false,
|
|
axisX: {
|
|
labelInterpolationFnc: function(value) {
|
|
// Will return M, T, W etc. on small screens
|
|
return value[0];
|
|
}
|
|
}
|
|
}]
|
|
];
|
|
|
|
Chartist.Line('.ct-chart', data, null, responsiveOptions);</code></pre></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistline-function-update"><span class="member-tag">function</span> update()</h5><button class="api-code-button" data-toggle-visible="#chartistline-function-update-code">Show code</button></header><pre id="chartistline-function-update-code">
|
|
<code class="javascript">function update() {
|
|
createChart(optionsProvider.currentOptions);
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Updates the chart which currently does a full reconstruction of the SVG DOM</p></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistline-function-detach"><span class="member-tag">function</span> detach()</h5><button class="api-code-button" data-toggle-visible="#chartistline-function-detach-code">Show code</button></header><pre id="chartistline-function-detach-code">
|
|
<code class="javascript">function detach() {
|
|
window.removeEventListener('resize', update);
|
|
optionsProvider.clear();
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>This method will detach the chart from any event listeners that have been added. This includes window.resize and media query listeners for the responsive options. Call this method in order to de-initialize dynamically created / removed charts.</p></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistline-function-addoptionslistener"><span class="member-tag">function</span> addOptionsListener()</h5><button class="api-code-button" data-toggle-visible="#chartistline-function-addoptionslistener-code">Show code</button></header><pre id="chartistline-function-addoptionslistener-code">
|
|
<code class="javascript">function addOptionsListener(callback) {
|
|
optionsProvider.addOptionsListener(callback);
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Add a listener for the responsive options updates. Once the chart will switch to a new option set the listener will be called with the new options.</p></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistline-function-removeoptionslistener"><span class="member-tag">function</span> removeOptionsListener()</h5><button class="api-code-button" data-toggle-visible="#chartistline-function-removeoptionslistener-code">Show code</button></header><pre id="chartistline-function-removeoptionslistener-code">
|
|
<code class="javascript">function removeOptionsListener(callback) {
|
|
optionsProvider.removeOptionsListener(callback);
|
|
}
|
|
|
|
// If this container already contains chartist, let's try to detach first and unregister all event listeners
|
|
if(container.chartist) {
|
|
container.chartist.detach();
|
|
}
|
|
|
|
// 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
|
|
optionsProvider = Chartist.optionsProvider(defaultOptions, options, responsiveOptions);
|
|
createChart(optionsProvider.currentOptions);
|
|
|
|
// TODO: Currently we need to re-draw the chart on window resize. This is usually very bad and will affect performance.
|
|
// This is done because we can't work with relative coordinates when drawing the chart because SVG Path does not
|
|
// work with relative positions yet. We need to check if we can do a viewBox hack to switch to percentage.
|
|
// See http://mozilla.6506.n7.nabble.com/Specyfing-paths-with-percentages-unit-td247474.html
|
|
// Update: can be done using the above method tested here: http://codepen.io/gionkunz/pen/KDvLj
|
|
// The problem is with the label offsets that can't be converted into percentage and affecting the chart container
|
|
function updateChart() {
|
|
createChart(optionsProvider.currentOptions);
|
|
}
|
|
|
|
window.addEventListener('resize', updateChart);
|
|
|
|
// Public members
|
|
var api = {
|
|
version: Chartist.version,
|
|
update: update,
|
|
detach: detach,
|
|
addOptionsListener: addOptionsListener,
|
|
removeOptionsListener: removeOptionsListener
|
|
};
|
|
|
|
container.chartist = api;
|
|
|
|
return api;
|
|
};
|
|
|
|
}(window, document, Chartist));</code>
|
|
</pre><div class="member-content"><div class="description"><p>Remove a responsive options listener that was previously added using the addOptionsListener method.</p></div></div></article></div></header></section></div><aside class="side-notes"></aside></section><section class="documentation-section full"><header><h3>chartist.pie.js</h3></header><div class="content"><section class="sub-section"><header><h4 id="module-chartistpie">Module Chartist.Pie</h4><div class="module-description"><p>The pie chart module of Chartist that can be used to draw pie, donut or gauge charts</p></div><div class="module-members"><article class="module-member method"><header class="member-header"><h5 class="member-title" id="chartistpie-method-pie"><span class="member-tag">method</span> Chartist.Pie()</h5><button class="api-code-button" data-toggle-visible="#chartistpie-method-pie-code">Show code</button></header><pre id="chartistpie-method-pie-code">
|
|
<code class="javascript">Chartist.Pie = function (query, data, options, responsiveOptions) {
|
|
|
|
var defaultOptions = {
|
|
width: undefined,
|
|
height: undefined,
|
|
chartPadding: 5,
|
|
classNames: {
|
|
chart: 'ct-chart-pie',
|
|
series: 'ct-series',
|
|
slice: 'ct-slice',
|
|
donut: 'ct-donut',
|
|
label: 'ct-label'
|
|
},
|
|
startAngle: 0,
|
|
total: undefined,
|
|
donut: false,
|
|
donutWidth: 60,
|
|
showLabel: true,
|
|
labelOffset: 0,
|
|
labelInterpolationFnc: Chartist.noop,
|
|
labelOverflow: false,
|
|
labelDirection: 'neutral'
|
|
},
|
|
optionsProvider,
|
|
container = Chartist.querySelector(query),
|
|
svg;
|
|
|
|
function determineAnchorPosition(center, label, direction) {
|
|
var toTheRight = label.x > center.x;
|
|
|
|
if(toTheRight && direction === 'explode' ||
|
|
!toTheRight && direction === 'implode') {
|
|
return 'start';
|
|
} else if(toTheRight && direction === 'implode' ||
|
|
!toTheRight && direction === 'explode') {
|
|
return 'end';
|
|
} else {
|
|
return 'middle';
|
|
}
|
|
}
|
|
|
|
function createChart(options) {
|
|
var seriesGroups = [],
|
|
chartRect,
|
|
radius,
|
|
labelRadius,
|
|
totalDataSum,
|
|
startAngle = options.startAngle,
|
|
dataArray = Chartist.getDataArray(data);
|
|
|
|
// Create SVG.js draw
|
|
svg = Chartist.createSvg(container, options.width, options.height, options.classNames.chart);
|
|
// Calculate charting rect
|
|
chartRect = Chartist.createChartRect(svg, options, 0, 0);
|
|
// Get biggest circle radius possible within chartRect
|
|
radius = Math.min(chartRect.width() / 2, chartRect.height() / 2);
|
|
// Calculate total of all series to get reference value or use total reference from optional options
|
|
totalDataSum = options.total || dataArray.reduce(function(previousValue, currentValue) {
|
|
return previousValue + currentValue;
|
|
}, 0);
|
|
|
|
// If this is a donut chart we need to adjust our radius to enable strokes to be drawn inside
|
|
// Unfortunately this is not possible with the current SVG Spec
|
|
// See this proposal for more details: http://lists.w3.org/Archives/Public/www-svg/2003Oct/0000.html
|
|
radius -= options.donut ? options.donutWidth / 2 : 0;
|
|
|
|
// If a donut chart then the label position is at the radius, if regular pie chart it's half of the radius
|
|
// see https://github.com/gionkunz/chartist-js/issues/21
|
|
labelRadius = options.donut ? radius : radius / 2;
|
|
// Add the offset to the labelRadius where a negative offset means closed to the center of the chart
|
|
labelRadius += options.labelOffset;
|
|
|
|
// Calculate end angle based on total sum and current data value and offset with padding
|
|
var center = {
|
|
x: chartRect.x1 + chartRect.width() / 2,
|
|
y: chartRect.y2 + chartRect.height() / 2
|
|
};
|
|
|
|
// Draw the series
|
|
// initialize series groups
|
|
for (var i = 0; i < data.series.length; i++) {
|
|
seriesGroups[i] = svg.elem('g', null, null, true);
|
|
|
|
// If the series is an object and contains a name we add a custom attribute
|
|
if(data.series[i].name) {
|
|
seriesGroups[i].attr({
|
|
'series-name': data.series[i].name
|
|
}, Chartist.xmlNs.uri);
|
|
}
|
|
|
|
// Use series class from series data or if not set generate one
|
|
seriesGroups[i].addClass([
|
|
options.classNames.series,
|
|
(data.series[i].className || options.classNames.series + '-' + Chartist.alphaNumerate(i))
|
|
].join(' '));
|
|
|
|
var endAngle = startAngle + dataArray[i] / totalDataSum * 360;
|
|
// If we need to draw the arc for all 360 degrees we need to add a hack where we close the circle
|
|
// with Z and use 359.99 degrees
|
|
if(endAngle - startAngle === 360) {
|
|
endAngle -= 0.01;
|
|
}
|
|
|
|
var start = Chartist.polarToCartesian(center.x, center.y, radius, startAngle - (i === 0 ? 0 : 0.2)),
|
|
end = Chartist.polarToCartesian(center.x, center.y, radius, endAngle),
|
|
arcSweep = endAngle - startAngle <= 180 ? '0' : '1',
|
|
d = [
|
|
// Start at the end point from the cartesian coordinates
|
|
'M', end.x, end.y,
|
|
// Draw arc
|
|
'A', radius, radius, 0, arcSweep, 0, start.x, start.y
|
|
];
|
|
|
|
// If regular pie chart (no donut) we add a line to the center of the circle for completing the pie
|
|
if(options.donut === false) {
|
|
d.push('L', center.x, center.y);
|
|
}
|
|
|
|
// Create the SVG path
|
|
// If this is a donut chart we add the donut class, otherwise just a regular slice
|
|
var path = seriesGroups[i].elem('path', {
|
|
d: d.join(' ')
|
|
}, options.classNames.slice + (options.donut ? ' ' + options.classNames.donut : ''));
|
|
|
|
// Adding the pie series value to the path
|
|
path.attr({
|
|
'value': dataArray[i]
|
|
}, Chartist.xmlNs.uri);
|
|
|
|
// If this is a donut, we add the stroke-width as style attribute
|
|
if(options.donut === true) {
|
|
path.attr({
|
|
'style': 'stroke-width: ' + (+options.donutWidth) + 'px'
|
|
});
|
|
}
|
|
|
|
// If we need to show labels we need to add the label for this slice now
|
|
if(options.showLabel) {
|
|
// Position at the labelRadius distance from center and between start and end angle
|
|
var labelPosition = Chartist.polarToCartesian(center.x, center.y, labelRadius, startAngle + (endAngle - startAngle) / 2),
|
|
interpolatedValue = options.labelInterpolationFnc(data.labels ? data.labels[i] : dataArray[i], i);
|
|
|
|
seriesGroups[i].elem('text', {
|
|
dx: labelPosition.x,
|
|
dy: labelPosition.y,
|
|
'text-anchor': determineAnchorPosition(center, labelPosition, options.labelDirection)
|
|
}, options.classNames.label).text('' + interpolatedValue);
|
|
}
|
|
|
|
// Set next startAngle to current endAngle. Use slight offset so there are no transparent hairline issues
|
|
// (except for last slice)
|
|
startAngle = endAngle;
|
|
}
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>This method creates a new pie chart and returns an object that can be used to redraw the chart.</p></div><h6>Parameters</h6><div class="param"><code>query</code> ( <span class="param-type"><code>String</code></span> <span class="param-type"><code>Node</code></span> )<div class="param-description">A selector query string or directly a DOM element</div></div><div class="param"><code>data</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The data object in the pie chart needs to have a series property with a one dimensional data array. The values will be normalized against each other and don't necessarily need to be in percentage.</div></div><div class="param"><code>[options]</code> ( <span class="param-type"><code>Object</code></span> )<div class="param-description">The options object with options that override the default options. Check the examples for a detailed list.</div></div><div class="param"><code>[responsiveOptions]</code> ( <span class="param-type"><code>Array</code></span> )<div class="param-description">Specify an array of responsive option arrays which are a media query and options object pair => [[mediaQueryString, optionsObject],[more...]]</div></div><h6>Returns</h6><div class="return">( <span class="param-type"><code>Object</code></span> )<div class="param-description">An object with a version and an update method to manually redraw the chart</div></div><h6>Examples</h6><pre class="api-example"><code class="js">// Default options of the pie chart
|
|
var defaultOptions = {
|
|
// Specify a fixed width for the chart as a string (i.e. '100px' or '50%')
|
|
width: undefined,
|
|
// Specify a fixed height for the chart as a string (i.e. '100px' or '50%')
|
|
height: undefined,
|
|
// Padding of the chart drawing area to the container element and labels
|
|
chartPadding: 5,
|
|
// Override the class names that get used to generate the SVG structure of the chart
|
|
classNames: {
|
|
chart: 'ct-chart-pie',
|
|
series: 'ct-series',
|
|
slice: 'ct-slice',
|
|
donut: 'ct-donut',
|
|
label: 'ct-label'
|
|
},
|
|
// The start angle of the pie chart in degrees where 0 points north. A higher value offsets the start angle clockwise.
|
|
startAngle: 0,
|
|
// An optional total you can specify. By specifying a total value, the sum of the values in the series must be this total in order to draw a full pie. You can use this parameter to draw only parts of a pie or gauge charts.
|
|
total: undefined,
|
|
// If specified the donut CSS classes will be used and strokes will be drawn instead of pie slices.
|
|
donut: false,
|
|
// Specify the donut stroke width, currently done in javascript for convenience. May move to CSS styles in the future.
|
|
donutWidth: 60,
|
|
// If a label should be shown or not
|
|
showLabel: true,
|
|
// Label position offset from the standard position which is half distance of the radius. This value can be either positive or negative. Positive values will position the label away from the center.
|
|
labelOffset: 0,
|
|
// An interpolation function for the label value
|
|
labelInterpolationFnc: function(value, index) {return value;},
|
|
// Label direction can be 'neutral', 'explode' or 'implode'. The labels anchor will be positioned based on those settings as well as the fact if the labels are on the right or left side of the center of the chart. Usually explode is useful when labels are positioned far away from the center.
|
|
labelDirection: 'neutral'
|
|
};
|
|
</code></pre><pre class="api-example"><code class="js">// Simple pie chart example with four series
|
|
Chartist.Pie('.ct-chart', {
|
|
series: [10, 2, 4, 3]
|
|
});
|
|
</code></pre><pre class="api-example"><code class="js">// Drawing a donut chart
|
|
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
|
|
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
|
|
Chartist.Pie('.ct-chart', {
|
|
series: [20, 10, 30, 40]
|
|
}, {
|
|
chartPadding: 30,
|
|
labelOffset: 50,
|
|
labelDirection: 'explode'
|
|
});</code></pre></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistpie-function-update"><span class="member-tag">function</span> update()</h5><button class="api-code-button" data-toggle-visible="#chartistpie-function-update-code">Show code</button></header><pre id="chartistpie-function-update-code">
|
|
<code class="javascript">function update() {
|
|
createChart(optionsProvider.currentOptions);
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Updates the chart which currently does a full reconstruction of the SVG DOM</p></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistpie-function-detach"><span class="member-tag">function</span> detach()</h5><button class="api-code-button" data-toggle-visible="#chartistpie-function-detach-code">Show code</button></header><pre id="chartistpie-function-detach-code">
|
|
<code class="javascript">function detach() {
|
|
window.removeEventListener('resize', update);
|
|
optionsProvider.clear();
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>This method will detach the chart from any event listeners that have been added. This includes window.resize and media query listeners for the responsive options. Call this method in order to de-initialize dynamically created / removed charts.</p></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistpie-function-addoptionslistener"><span class="member-tag">function</span> addOptionsListener()</h5><button class="api-code-button" data-toggle-visible="#chartistpie-function-addoptionslistener-code">Show code</button></header><pre id="chartistpie-function-addoptionslistener-code">
|
|
<code class="javascript">function addOptionsListener(callback) {
|
|
optionsProvider.addOptionsListener(callback);
|
|
}</code>
|
|
</pre><div class="member-content"><div class="description"><p>Add a listener for the responsive options updates. Once the chart will switch to a new option set the listener will be called with the new options.</p></div></div></article><article class="module-member function"><header class="member-header"><h5 class="member-title" id="chartistpie-function-removeoptionslistener"><span class="member-tag">function</span> removeOptionsListener()</h5><button class="api-code-button" data-toggle-visible="#chartistpie-function-removeoptionslistener-code">Show code</button></header><pre id="chartistpie-function-removeoptionslistener-code">
|
|
<code class="javascript">function removeOptionsListener(callback) {
|
|
optionsProvider.removeOptionsListener(callback);
|
|
}
|
|
|
|
// If this container already contains chartist, let's try to detach first and unregister all event listeners
|
|
if(container.chartist) {
|
|
container.chartist.detach();
|
|
}
|
|
|
|
// 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
|
|
optionsProvider = Chartist.optionsProvider(defaultOptions, options, responsiveOptions);
|
|
createChart(optionsProvider.currentOptions);
|
|
|
|
// TODO: Currently we need to re-draw the chart on window resize. This is usually very bad and will affect performance.
|
|
// This is done because we can't work with relative coordinates when drawing the chart because SVG Path does not
|
|
// work with relative positions yet. We need to check if we can do a viewBox hack to switch to percentage.
|
|
// See http://mozilla.6506.n7.nabble.com/Specyfing-paths-with-percentages-unit-td247474.html
|
|
// Update: can be done using the above method tested here: http://codepen.io/gionkunz/pen/KDvLj
|
|
// The problem is with the label offsets that can't be converted into percentage and affecting the chart container
|
|
function updateChart() {
|
|
createChart(optionsProvider.currentOptions);
|
|
}
|
|
|
|
window.addEventListener('resize', updateChart);
|
|
|
|
// Public members
|
|
var api = {
|
|
version: Chartist.version,
|
|
update: update,
|
|
detach: detach,
|
|
addOptionsListener: addOptionsListener,
|
|
removeOptionsListener: removeOptionsListener
|
|
};
|
|
|
|
container.chartist = api;
|
|
|
|
return api;
|
|
};
|
|
|
|
}(window, document, Chartist));</code>
|
|
</pre><div class="member-content"><div class="description"><p>Remove a responsive options listener that was previously added using the addOptionsListener method.</p></div></div></article></div></header></section></div><aside class="side-notes"></aside></section><section class="documentation-section full"><header><h3>chartist.svg.js</h3></header><div class="content"><section class="sub-section"><header><h4 id="module-chartistsvg">Module Chartist.svg</h4><div class="module-description"><p>Chartist SVG module for simple SVG DOM abstraction</p></div><div class="module-members"></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><!--[if lt IE 9]>
|
|
<script src="scripts/oldie.js"></script>
|
|
<![endif]--><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> |