### Initialize and Draw Funnel Graph

Source: https://github.com/greghub/funnel-graph-js/blob/master/examples/example.html

Initializes a new FunnelGraph instance with configuration options like container, data, direction, and dimensions. It then draws the graph to the specified DOM element. This serves as the primary setup for displaying a funnel chart.

```javascript
var dataExample3 = {
  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]
  ],
};

var graph = new FunnelGraph({
  container: '.funnel',
  gradientDirection: 'horizontal',
  data: dataExample3,
  displayPercent: true,
  direction: 'horizontal',
  width: 800,
  height: 300,
  subLabelValue: 'raw'
});

graph.draw();
```

--------------------------------

### Funnel Graph Initialization and Drawing

Source: https://github.com/greghub/funnel-graph-js/blob/master/examples/example-multiple.html

This snippet demonstrates how to initialize and draw funnel graphs using the FunnelGraph constructor. It includes sample data with different configurations for labels, values, colors, and sub-labels, and iterates through them to create multiple graphs. The example also shows common options like gradient direction, display percentage, and sub-label value.

```css
html, body { min-height: 100%; }
body { margin: 0; background: #393862; }
.funnel { margin: 24px auto; }
.example-funnels { display: flex; flex-direction: column; }
```

```javascript
var examples = [
  {
    values: [11000, 3000, 240],
    colors: ['#FFB178', '#FF3C8E']
  },
  {
    labels: ['Impressions 2', 'Add To Cart 2', 'Buy 2'],
    colors: ['#A0BBFF', '#EC77FF'],
    values: [12000, 5700, 360]
  },
  {
    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]
    ]
  }
];

var graphs = [];

for(var i = 0; i < examples.length; i++) {
  var graph = new FunnelGraph({
    container: '#examplefunnel' + i,
    gradientDirection: 'horizontal',
    data: examples[i],
    displayPercent: true,
    direction: 'horizontal',
    width: 800,
    height: 300,
    subLabelValue: 'percent'
  });
  graph.draw();
  graphs.push(graph);
}

console.log("Graphs spawned: ", graphs);
```

--------------------------------

### Install FunnelGraph.js via NPM

Source: https://github.com/greghub/funnel-graph-js/blob/master/README.md

Installs the FunnelGraph.js library using the Node Package Manager (NPM). This is the recommended method for integrating the library into modern JavaScript projects.

```shell
npm i funnel-graph-js
```

--------------------------------

### Funnel Graph Data Structures

Source: https://github.com/greghub/funnel-graph-js/blob/master/examples/example.html

Defines various data structures for funnel-graph-js. These examples illustrate how to format labels, sub-labels, colors, and values for different chart configurations, including single-color gradients and multi-color segments.

```javascript
var dataExample1 = { colors: ['#FFB178', '#FF3C8E'], values: [11000, 3000, 240] };
var dataExample2 = { labels: ['Impressions 2', 'Add To Cart 2', 'Buy 2'], colors: ['#FFB178', '#FF3C8E'], values: [12000, 5700, 360] };
var dataExample3 = {
  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]
  ],
};
```

--------------------------------

### Update Funnel Graph Data

Source: https://github.com/greghub/funnel-graph-js/blob/master/examples/example.html

Demonstrates how to update the funnel chart with new data using the `updateData()` method. Event listeners are set up to switch between different predefined data sets (`dataExample1`, `dataExample2`, `dataExample3`).

```javascript
document.querySelector('#useData1').addEventListener('click', function () {
  graph.updateData(dataExample1);
});

document.querySelector('#useData2').addEventListener('click', function () {
  graph.updateData(dataExample2);
});

document.querySelector('#useData3').addEventListener('click', function () {
  graph.updateData(dataExample3);
});
```

--------------------------------

### Control Funnel Graph Gradients

Source: https://github.com/greghub/funnel-graph-js/blob/master/examples/example.html

Attaches event listeners to control the gradient direction of the funnel chart segments. It uses methods like `gradientMakeVertical()`, `gradientMakeHorizontal()`, and `gradientToggleDirection()` to apply gradient effects.

```javascript
document.querySelector('#gradientMakeVertical').addEventListener('click', function () {
  graph.gradientMakeVertical();
});

document.querySelector('#gradientMakeHorizontal').addEventListener('click', function () {
  graph.gradientMakeHorizontal();
});

document.querySelector('#gradientToggleDirection').addEventListener('click', function () {
  graph.gradientToggleDirection();
});
```

--------------------------------

### Control Funnel Graph Direction

Source: https://github.com/greghub/funnel-graph-js/blob/master/examples/example.html

Provides JavaScript event listeners to dynamically change the funnel chart's orientation between vertical and horizontal. It utilizes the `makeVertical()` and `makeHorizontal()` methods of the FunnelGraph instance.

```javascript
document.querySelector('#makeVertical').addEventListener('click', function () {
  graph.setWidth(300);
  graph.setHeight(400);
  graph.makeVertical();
});

document.querySelector('#makeHorizontal').addEventListener('click', function () {
  graph.setWidth(800);
  graph.setHeight(300);
  graph.makeHorizontal();
});

document.querySelector('#toggleDirection').addEventListener('click', function () {
  graph.direction === 'horizontal' ? document.querySelector('#makeVertical').click() : document.querySelector('#makeHorizontal').click();
});
```

--------------------------------

### Initialize and Draw Funnel Graph (JavaScript)

Source: https://github.com/greghub/funnel-graph-js/blob/master/README.md

Demonstrates the basic initialization of a FunnelGraph with container, gradient direction, data, and display percentage settings, followed by drawing the graph.

```js
var graph = new FunnelGraph({
    container: '.funnel',
    gradientDirection: 'horizontal',
    data: {...},
    displayPercent: true,
    direction: 'horizontal'
});

graph.draw();
```

--------------------------------

### Include FunnelGraph.js from Local Files

Source: https://github.com/greghub/funnel-graph-js/blob/master/README.md

Demonstrates how to link the FunnelGraph.js library and its CSS files when downloaded locally. This method requires manual management of library files.

```html
<link rel="stylesheet" type="text/css" href="../dist/css/main.min.css">
<link rel="stylesheet" type="text/css" href="../dist/css/theme.min.css">

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

--------------------------------

### Funnel Graph Options Reference (APIDOC)

Source: https://github.com/greghub/funnel-graph-js/blob/master/README.md

Comprehensive reference for all configuration options available for the Funnel Graph JS library, detailing their purpose, type, requirements, possible values, and defaults.

```APIDOC
FunnelGraph Options:

- container: Selector of the element that will hold the chart
  - Type: `string`
  - Required: Yes
  - Example: '.funnel-container'

- direction: Whether the chart visualization is displayed vertically or horizontally
  - Type: `string`
  - Required: No
  - Options: 'vertical', 'horizontal'
  - Default: 'horizontal'

- gradientDirection: Whether the gradient applied to the segments of the graph is displayed from top to bottom or from left to right
  - Type: `string`
  - Required: No
  - Options: 'vertical', 'horizontal'
  - Default: 'horizontal'

- displayPercent: Whether to display the automatically calculated percentage values below the labels
  - Type: `boolean`
  - Required: No
  - Options: `true`, `false`
  - Default: `true`

- data: Object containing information about values, labels and colors of the chart
  - Type: `object`
  - Required: Yes

- width: Width of the funnel graph
  - Type: `number`
  - Required: No
  - Default: Container width
  - Example: 800

- height: Height of the funnel graph
  - Type: `number`
  - Required: No
  - Default: Container height
  - Example: 300

- subLabelValue: Whether display percentage or real value of segment
  - Type: `string`
  - Required: No
  - Options: `percent`, `raw`
  - Default: `percent`
```

--------------------------------

### Apply Solid Color (JavaScript)

Source: https://github.com/greghub/funnel-graph-js/blob/master/README.md

Explains how to apply a single solid color to the entire funnel graph by providing a hex color string to the `color` option.

```js
{
    color: '#FF5500'
}
```

--------------------------------

### Define Data with Labels and Colors (JavaScript)

Source: https://github.com/greghub/funnel-graph-js/blob/master/README.md

Illustrates how to provide labels, colors, and values for the funnel graph data in a structured object format.

```js
data: {
    labels: ['Impressions', 'Add To Cart', 'Buy'],
    colors: ['orange', 'red'],
    values: [12000, 5700, 360]
}
```

--------------------------------

### Apply Gradient Color (JavaScript)

Source: https://github.com/greghub/funnel-graph-js/blob/master/README.md

Demonstrates how to apply a gradient color to the funnel graph by passing an array of color strings to the `color` option.

```js
{
    color: ['orange', 'red']
}
```

--------------------------------

### Funnel Graph Data and Options Updates

Source: https://github.com/greghub/funnel-graph-js/blob/master/README.md

Methods to update the chart's data and general configuration options.

```APIDOC
FunnelGraphJS Data and Options Updates:

updateData({data})
  - Updates the data displayed in the funnel graph.
  - Parameters:
    - data: An object containing the new data, typically with a 'labels' array.
      Example: { labels: ['Stage 1', 'Stage 2', 'Stage 3'] }
  - Returns: void (or chart instance for chaining).

update({options})
  - Updates various options of the funnel graph, allowing for comprehensive configuration changes.
  - Parameters:
    - options: An object containing the options to update. Supported options include:
      - gradientDirection: 'horizontal' or 'vertical'
      - data: The new data object for the chart.
      - displayPercent: boolean, to show percentages.
      - direction: 'horizontal' or 'vertical' for chart orientation.
      - height: number, new chart height.
      - width: number, new chart width.
      Example: { gradientDirection: 'horizontal', data: {...}, displayPercent: true, direction: 'horizontal', height: 300, width: 500 }
  - Returns: void (or chart instance for chaining).
```

--------------------------------

### Include FunnelGraph.js via CDN

Source: https://github.com/greghub/funnel-graph-js/blob/master/README.md

Includes the FunnelGraph.js library and its required CSS themes directly in an HTML document using Content Delivery Network (CDN) links. This is suitable for quick integration or static websites.

```html
<link rel="stylesheet" type="text/css" href="https://unpkg.com/funnel-graph-js@1.3.9/dist/css/main.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/funnel-graph-js@1.3.9/dist/css/theme.min.css">

<script src="https://unpkg.com/funnel-graph-js@1.3.9/dist/js/funnel-graph.min.js"></script>
```

--------------------------------

### Define Simple Data Array (JavaScript)

Source: https://github.com/greghub/funnel-graph-js/blob/master/README.md

Provides the most basic way to define data for the funnel graph using a simple array of numerical values.

```js
data: [12000, 5700, 360]
```

--------------------------------

### Define Two-Dimensional Data (JavaScript)

Source: https://github.com/greghub/funnel-graph-js/blob/master/README.md

Shows how to structure data for a two-dimensional funnel graph, including main labels, sub-labels, multi-dimensional colors, and values.

```js
data: {
    labels: ['Impressions', 'Add To Cart', 'Buy'],
    subLabels: ['Direct', 'Social Media', 'Ads'],
    colors: [
        ['#FFB178', '#FF78B1', '#FF3C8E'],
        'red',
        ['blue']
    ],
    values: [
        [2000, 4000, 6000],
        [3000, 1000, 1700],
        [200, 30, 130]
    ]
}
```

--------------------------------

### Funnel Graph Dimension Updates

Source: https://github.com/greghub/funnel-graph-js/blob/master/README.md

Methods to dynamically update the height and width of the funnel chart.

```APIDOC
FunnelGraphJS Dimension Updates:

updateHeight()
  - Updates the height of the funnel graph.
  - Parameters: Requires a new height value (e.g., number).
  - Returns: void (or chart instance for chaining).

updateWidth()
  - Updates the width of the funnel graph.
  - Parameters: Requires a new width value (e.g., number).
  - Returns: void (or chart instance for chaining).
```

--------------------------------

### Configure Display Percent (JavaScript)

Source: https://github.com/greghub/funnel-graph-js/blob/master/README.md

Shows how to disable the automatic display of percentage values below the labels in the funnel graph by setting the `displayPercent` option to false.

```js
{
    displayPercent: false
}
```

--------------------------------

### Configure Graph Direction (JavaScript)

Source: https://github.com/greghub/funnel-graph-js/blob/master/README.md

Illustrates how to change the orientation of the funnel graph from horizontal to vertical by setting the `direction` option.

```js
{
    direction: 'vertical'
}
```

--------------------------------

### Funnel Graph Gradient Control

Source: https://github.com/greghub/funnel-graph-js/blob/master/README.md

Methods to manage the display and direction of gradients applied to the funnel chart sections.

```APIDOC
FunnelGraphJS Gradient Control:

gradientMakeVertical()
  - Applies a vertical gradient to all sections of the funnel chart, from top to bottom.
  - Parameters: None.
  - Returns: void (or chart instance for chaining).

gradientMakeHorizontal()
  - Applies a horizontal gradient to all sections of the funnel chart, from left to right.
  - Parameters: None.
  - Returns: void (or chart instance for chaining).

gradientToggleDirection()
  - Toggles the current display direction of the gradient applied to the funnel chart sections.
  - Parameters: None.
  - Returns: void (or chart instance for chaining).
```

--------------------------------

### Funnel Graph Direction Control

Source: https://github.com/greghub/funnel-graph-js/blob/master/README.md

Methods to set and toggle the display orientation of the funnel chart between vertical and horizontal layouts.

```APIDOC
FunnelGraphJS Direction Control:

makeVertical()
  - Displays the funnel chart vertically.
  - Parameters: None.
  - Returns: void (or chart instance for chaining).

makeHorizontal()
  - Displays the funnel chart horizontally.
  - Parameters: None.
  - Returns: void (or chart instance for chaining).

toggleDirection()
  - Toggles the current display direction of the funnel chart between vertical and horizontal.
  - Parameters: None.
  - Returns: void (or chart instance for chaining).
```

--------------------------------

### Configure Gradient Direction (JavaScript)

Source: https://github.com/greghub/funnel-graph-js/blob/master/README.md

Shows how to control the direction of the gradient applied to the funnel graph segments, defaulting to 'horizontal'.

```js
{
    gradientDirection: 'vertical' // defaults to 'horizontal'
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.