How to Create Dynamic Pie and Funnel Charts in PHP using CanvasJS ?
Last Updated :
25 Jul, 2024
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=
"https://canvasjs.com/assets/script/jquery-1.11.1.min.js">
</script>
<script type="text/javascript" src=
"https://canvasjs.com/assets/script/canvasjs.min.js">
</script>
<script>
$(document).ready(function(){
// User dynamic data from PHP
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
}] // End data
});// End chart
chart.render();
});// End button click
});// End document ready
</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=
"https://canvasjs.com/assets/script/jquery-1.11.1.min.js">
</script>
<script type="text/javascript" src=
"https://canvasjs.com/assets/script/canvasjs.min.js">
</script>
<script>
$(document).ready(function(){
// User dynamic data from PHP
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,
// Height of the funnel neck
neckHeight: "35%",
neckWidth: "20%",
dataPoints: passedArray
}]// End data
});// End chart
chart.render();
});// End button click
});// End document ready
</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.
Similar Reads
How to create a Pie Chart using HTML & CSS ?
A Pie Chart is a type of graph that displays data in a circular shape and is generally used to show percentage or proportional data. The percentage represented in the graph by each category is provided near the corresponding slice of one portion of the pie chart. These charts are very good for displ
2 min read
How to Create Charts from XML file using CanvasJS ?
Canvas JS is a Charting library that supports multiple devices for displaying the Chart & is easy to use with HTML & Javascript. It provides a different plugin option that facilitates the creation of the basic chart by using the data from the XML file. In this article, we will learn to creat
5 min read
How to Implement Charts from External Files using CanvasJS ?
In this article, we will learn to implement bar and column charts from JSON and CSV external files using the Canvas JS plugin. Bar charts are the pictorial representation of data in groups, either in horizontal or vertical bars where the length of the bar represents the value of the data present on
4 min read
How to create 3D cube using canvas in HTML5 ?
In this article, we will see How to create 3D cube using canvas in HTML5. Approach: We will use the canvas element. The HTML Canvas element is used to draw graphics with the help of javascript. It can be used to draw different types of shapes, graphs or create simple and complex animations. Keep in
3 min read
How to Implement Financial Charts using CanvasJS ?
In this article, we will learn to implement Financial Charts using the CanvasJS plugin. A candlestick chart is a financial chart that shows the price movement of stocks, derivatives, and other financial instruments in real time, there are simply four essential components that must be examined. The o
6 min read
How to create a canvas circle using Fabric.js ?
In this article, we are going to see how to create a canvas circle using FabricJS. The canvas means the circle is movable and can be stretched according to requirement. Further, the circle can be customized when it comes to initial stroke color, fill color, stroke width, or radius. Approach: To make
2 min read
How to create an Area Chart using CSS ?
In this article, we will see how to create Area charts using CSS. There are many Libraries available, which can help us to build area charts, although, here, we will be using pure HTML and CSS to create an Area Chart. An Area Chart is a graphical representation of quantitative data where multiple da
4 min read
How to Implement Spline Charts using CanvasJS ?
In this article, we will learn to implement single and multi-series Spline charts using Canvas JS plugin Spline Chart can be defined as a type of line chart which is used to plot time-dependent variables. The basic difference between a Line and a spline chart is the points on the spline chart are co
3 min read
How to Implement Error Combination Charts using CanvasJS ?
In this article, we will learn to implement various Error charts using the Canvas JS plugin. An error chart is used to show the uncertainty range of values in any data information relative to an average value of any variable. The "I" like vars represent the predictable deviation in any measurement o
8 min read
How to create a canvas image using Fabric.js ?
Creating a canvas image using Fabric.js is a powerful method for generating dynamic and interactive graphical content on the web. Fabric.js, a robust JavaScript library, simplifies the process of working with the HTML5 canvas element by providing a rich API for manipulating shapes, text, and images.
2 min read