Funnel Charts are used to represent data in different stages of a process like interview, sales process, etc. Given example shows simple PHP Funnel Chart that also includes source code which you can try running locally.
<?php $dataPoints = array( array("label"=>"Prospects", "y"=>2130), array("label"=>"Inquiries", "y"=>1043), array("label"=>"Applicants", "y"=>501), array("label"=>"Admits", "y"=>295), array("label"=>"Enrolled", "y"=>135) ) ?> <!DOCTYPE HTML> <html> <head> <script> window.onload = function() { var chart = new CanvasJS.Chart("chartContainer", { theme: "dark2", animationEnabled: true, title: { text: "School Admission Process" }, data: [{ type: "funnel", indexLabel: "{label} - {y}", yValueFormatString: "#,##0", showInLegend: true, legendText: "{label}", dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?> }] }); chart.render(); } </script> </head> <body> <div id="chartContainer" style="height: 370px; width: 100%;"></div> <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script> </body> </html>
The width and height of neck in Funnel Chart can be customized using neckWidth and neckHeight. Other common customizations include valueRepresents, color, indexLabelPlacement, etc.