Beautiful SVG Funnel Chart JavaScript Library – FunnelGraph.js

Category: Chart & Graph , Javascript , Recommended | April 12, 2019
Author: greghub
Views Total: 566
Official Page: Go to website
Last Update: April 12, 2019
License: MIT

Preview:

Beautiful SVG Funnel Chart JavaScript Library – FunnelGraph.js

Description:

The FunnelGraph.js JavaScript library helps you dynamically draws a beautiful, customizable, SVG-based, horizontal/vertical funnel chart to represent stages in a process.

How to use it:

Install & download.

# NPM
$ npm install funnel-graph-js --save

Load the core stylesheet and theme CSS in the document.

<link rel="stylesheet" href="/dist/css/main.min.css">
<link rel="stylesheet" href="/dist/css/theme.min.css">

Create a placeholder for the funnel chart.

<div class="funnel">
</div>

Load the JavaScript at the bottom of the document.

<script src="/dist/js/funnel-graph.js"></script>

Define labels, values and colors in a data object.

const myData = {
  labels: ['Impressions', 'Add To Cart', 'Buy'],
  colors: ['#FFB178', '#FF3C8E'],
  values: [12000, 5700, 360]
}

Two-dimensional funnel graph is supported as well.

const myData = {
  labels: ['Impressions', 'Add To Cart', 'Buy'],
  subLabels: ['Direct', 'Social Media', 'Ads'],
  colors: [
    ['#FFB178', '#FF78B1', '#FF3C8E'],
    ['#A0BBFF', '#EC77FF'],
    ['#A0F9FF', '#7795FF']
  ],
  values: [
    [3500, 2500, 6500],
    [3300, 1400, 1000],
    [600, 200, 130]
  ]
};

Initialize the funnel graph.

var graph = new FunnelGraph({
    container: '.funnel',
    data: myData
});

Draw the funnel graph in the placeholder element.

graph.draw();

Config the funnel graph with the following options.

var graph = new FunnelGraph({
    container: '.funnel',
    data: myData,
    direction: 'horizontal', // or 'vertical'
    gradientDirection: 'horizontal', // or 'vertical'
    displayPercent: true,
    width: 800,
    height: 800,
    subLabelValue: 'percent'
});

API methods.

// changes to vertical view
graph.makeVertical();

// changes to horizontal view
graph.makeHorizontal();

// toggles the direction
graph.toggleDirection();

// changes to vertical graditent
graph.gradientMakeVertical();

// changes to horizontal gradient
graph.gradientMakeHorizontal();

// toggles the gradient direction
graph.gradientToggleDirection();

// updates the height/width
graph.updateHeight();
graph.updateWidth();

// updates data
graph.updateData({data});

// updates options
graph.update({options});

Changelog:

v1.3.7 (04/12/2019)

  • Add option to display sub-label raw value

v1.3.6 (03/07/2019)

  • Add method to create center line for shapes
  • Fixed theme issue

v1.3.4 (02/28/2019)

  • Update theme

You Might Be Interested In:


Leave a Reply