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>