A SVG Funnel chart showing the key stages of plan CD1

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>

« Back