A basic SVG 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,
            gutterLeft: 200
        }
    }).draw();
</script>

« Back