Funnel chart visualization using HTML5 canvas
npm install funnel-chartA funnel chart visualization using HTML5 canvas.
Via Bower:
``shell`
$ bower install funnel-chart --save
Via npm:
`shell`
$ npm install funnel-chart --save
First we need to include the funnel-chart.js library on the page.
The library is available in the global variable FunnelChart.
`html`
The funnel-chart library also supports AMD and CommonJS loaders.
The chart requires an HTML
`html`
The chart must then be instantiated in the following manner:
`js`
FunnelChart(canvas, settings);
The canvas argument can be a string representing the element id:
`js`
FunnelChart('my-funnel', {
values: [1012, 891, 96, 18],
labels: [
'Impressions',
'Clicks',
'Purchases',
'Repeat Purchases'
]
});
or it can be an HTMLElement reference:
`js`
FunnelChart(document.getElementById('my-canvas'), {
...
});
or a jQuery selector:
`js`
FunnelChart($('canvas').get(0), {
...
});
The chart will be sized to best fit the dimensions of its
The settings argument is an object containing a number of required and optional fields.
`js
{
/ Required /
// Array - Numeric values that will be displayed in each funnel section
// in descending order
values: [3512, 891, 652, 81],
/ Optional /
// Array - These labels should correspond to the array entries in the
// values setting. Omit the labels setting if you do not wish to display
// labels.
labels: [
'Impressions',
'Clicks',
'Purchases',
'Repeat Purchases'
],
// Array - String values that correspond
values: [3512, 891, 652, 81],
// Boolean - Whether to display % change between sections
displayPercentageChange: true,
// Number - The number of decimal places that should be displayed for %
// change values
pPrecision: 1,
// String - The color of the horizontal label lines (if labels are shown)
labelLineColor: '#eee',
// String or Array - The font color(s) of the labels.
labelFontColor: '#657274',
// String or Array - The color(s) of the funnel sections.
sectionColor: '#0498b3',
// String or Array - The color(s) of the funnel percentage sections.
pSectionColor: '#bfd1d4',
// String - The font for labels and values
font: 'Helvetica Neue',
// Number - The maximum font size in pixels (px) for labels and values.
// This will always be used where possible unless the height of the
// funnel sections is too small to permit it, in which case the font size
// will be automatically reduced to fit
maxFontSize: 13,
// String - The font weight for labels and values.
fontWeight: 'bold',
// String or Array - The font color(s) for funnel sections
sectionFontColor: '#fff',
// String or Array - The font color(s) for % change sections
pSectionFontColor: '#657274',
// Number - The height of the % change sections compared to the main
// funnel sections. This is a percent value.
pSectionHeightPercent: 100,
// Number - The percentage of the full canvas width that should be
// reserved for display of labels (if provided). The funnel will expand
// to fit the remainder.
labelWidthPercent: 30,
// Number - The percentage width difference between the top and the
// bottom of the funnel.
funnelReductionPercent: 40,
// Number - The space between the right hand edge of the funnel and the
// label text in pixels.
labelOffset: 10
// Number - The line height between each funnel section
lineHeight: 1
}
``