# A SVG Funnel chart showing the key stages of plan CD1

A demonstration of the Funnel chart. This chart is customised using custom tooltips, a key, the labels are positioned in the middle of each "segment" and the background bars are set to use a gradient that goes towards white on the right-hand-side. The font size of the labels has been increased too.

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: 400px" id="chart-container"></div>

This is the code that generates the chart:

    <script>
        funnel = new RGraph.SVG.Funnel({
            id: 'chart-container',
            data: [100,75,50,25],
            options: {
                title: 'A "key stages of plan CD1" funnel',
                titleSubtitle: 'Each stage is depicted by a separate color',
                gutterTop: 75,
                gutterLeft: 300,
                gutterRight: 5,
                linewidth: 0,
                colors: ['#3EB0BB','#EE7E34','#677E9D'],
                backgroundBars: true,
                backgroundBarsColors: [
                    'Gradient(#3EB0BB:white)',
                    'Gradient(#EE7E34:white)',
                    'Gradient(#677E9D:white)'
                ],
                //backgroundBarsOpacity: 0.25,

                labels: [
                    'Introduction (75%)',
                    'Site visit (50%)',
                    'Finalisation (25%)'
                ],
                labelsSize: 26,
                labelsItalic: true,
                labelsBold: false,
                labelsColor: 'gray',
                labelsHalign: 'left',
                labelsPosition: 'section', // Can also be edge
                //labelsBackground: 'red',

                tooltips: [
                    'Stage 1 (75%)',
                    'Stage 2 (50%)',
                    'Stage 3 (25%)'
                ]
                //tooltipsEvent: 'click',
                //tooltipsCssClass: 'RGrph_tooltip',
                //tooltipsEffect: 'fade',
                //tooltipsOverride: function ()
                //{
                //}
                ,key: ['Introduction','Site visit','Finalisation']
            }
        }).draw();

        RGraph.SVG.tooltips.style.backgroundColor = 'black';
        RGraph.SVG.tooltips.style.color           = 'white';
        RGraph.SVG.tooltips.style.fontSize        = '26pt'
    </script>