A basic SVG Funnel chart

Here's a demo of a simple SVG Funnel chart. With Funnel charts the labels can be centered on the edge of each segment or in the center of each segment. Here they're centered on the edges. Unlike the canvas Funnel chart the SVG version does cannot taper to a point. Depending on the data that you have you could actually create an inverted Funnel chart.

This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.funnel.js"></script>
Put this where you want the chart to show up:
<div style="width: 500px; height: 500px" id="chart-container"></div>
This is the code that generates the chart:
<script>
    // The data
    data = [50,48,42,31,25,16,8];
    
    // Make the labels
    labels = [];
    data.forEach(function (v,k,arr)
    {
        labels[k] = 'Stage ' + (k+1) + ' (' + v + '%)';
    });

    new RGraph.SVG.Funnel({
        id: 'chart-container',
        data: [50,48,42,31,25,16,8],
        options: {
            labelsPosition: 'edge',
            labels: labels,
            labelsHalign: 'left',
            labelsSize: 20,
            marginLeft: 200
        }
    }).draw();
</script>