How to Create Dynamic Pie and Funnel Charts in PHP using CanvasJS ?
Last Updated :
05 Jun, 2023
In this article, we will learn to implement Pie and Funnel Charts dynamically in PHP using the Canvas JS plugin.
A pie chart or circle graph in Data handling, is one type of pictorial representation of a given set of data, which is used to illustrate numerical problems by dividing a circular statistical graphic into slices or sectors. Here, the term “pie” corresponds to the word whole, while the term “sectors” or “slices” corresponds to parts of the whole.
A Funnel Chart is a type of chart that is used to represent how the data moves through a process. Funnel charts are widely used to represent the sales funnels, recruitment, and order fulfillment process.
Syntax:
new CanvasJS.Chart($("#ID"), {
data: [{
type: "pie",
dataPoints: [
{...},
]
}]
});
Note: Change the type attribute to “funnel” in the case of implementing funnel Charts using Canvas JS.
Approach:
- In the PHP part of the code, data is in the form of an array, where the array represents the data to be displayed in the selected chart.
- In the HTML design, use the <div> tag for showing the pie or funnel chart.
- In the script part of the code, instantiate the CanvasJS object by setting the type, data, datapoints, and other options properties of the library.
- Include the CDN link in the head section of the code to use the plugin’s features.
- Render the chart using the render() method of the Canvas JS plugin on a button-click event on the main page.
- Set other attributes or properties as needed for the styling of the chart as given in the following example codes.
- Make charts depending on the data available for code implementation.
CDN Link:
<script src=
"https://canvasjs.com/assets/script/canvasjs.min.js">
</script>
Example 1: The following code demonstrates the simple example of a Pie Chart showing the Water encroachment data in land in the form of pie sections. The initial data is taken in the form of a PHP array which is later used in the Canvas JS object instantiation in the script part of the code. The chart is rendered on the click event of a button in the HTML part.
PHP
<?php
$myArray = array(
array("label"=>"Irrigations", "y"=>28),
array("label"=>"Domestic", "y"=>24),
array("label"=>"Industrial", "y"=>18),
array("label"=>"Energy", "y"=>19),
array("label"=>"Manufacturing", "y"=>8),
array("label"=>"Others", "y"=>3)
)
?>
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src=
</script>
<script type="text/javascript" src=
</script>
<script>
$(document).ready(function(){
var passedArray = <?php echo json_encode($myArray); ?>;
$("#btnID").click(function(){
var chart = new CanvasJS.Chart("chartID", {
title:{
text: "Pie chart for Water encroachment Data"
},
data: [{
type: "pie",
animationEnabled: true,
indexLabelFontSize: 18,
fillOpacity: .7,
toolTipContent: "<i>{label}</i>: <b>{y}</b>",
radius: "80%",
startAngle: 75,
indexLabel: "{label} - {y}",
yValueFormatString: "##\"%\"",
dataPoints: passedArray
}]
});
chart.render();
});
});
</script>
</head>
<body>
<div style="text-align:center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Canvas JS Pie Chart
</h3>
</div>
<center>
<button id="btnID">
Render Chart
</button>
<center><br>
<div id="chartID"
style="height:400px;
max-width:950px;
margin:0px auto;">
</div>
</body>
</html>
|
Output:
Example 2: The following code demonstrates a very simple example of a chart showing multiple stages for an e-commerce website. As earlier mentioned, the initial data is taken in the form of a PHP array. Adding or setting different sets of custom options for just changing the look and feel of the graph using attributes like indexLabelPlacement,valueRepresents, color, fillOpacity, neckHeight, and neckWidth is implemented. Refer to the output for a better understanding.
PHP
<?php
$myarray = array(
array("label"=>"Search a Product", "y"=>1000),
array("label"=>"Checks features", "y"=>800),
array("label"=>"Check reviews", "y"=>600),
array("label"=>"Add to cart", "y"=>350),
array("label"=>"Final Purchase", "y"=>150)
)
?>
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src=
</script>
<script type="text/javascript" src=
</script>
<script>
$(document).ready(function(){
var passedArray =
<?php echo json_encode($myarray); ?>;
$("#btnID").click(function(){
var chart = new CanvasJS.Chart("chartID", {
title: {
text: "Funnel chart for e-commerce website"
},
data: [{
type: "funnel",
indexLabelPlacement: "inside",
valueRepresents: "area",
color: "green",
fillOpacity: .6,
neckHeight: "35%",
neckWidth: "20%",
dataPoints: passedArray
}]
});
chart.render();
});
});
</script>
</head>
<body>
<div style="text-align:center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>Canvas JS Funnel Chart </h3>
</div>
<center>
<button id="btnID">
Render Chart
</button>
<center><br>
<div id="chartID"
style="height:400px;
max-width:950px;
margin:0px auto;">
</div>
</body>
</html>
|
Output:
Whenever the user needs to show a section/slice from a whole data, we use a pie chart. Whenever we need to show multiple stages of a whole long process, it’s better to use the interactive funnel chart.
Share your thoughts in the comments
Please Login to comment...