How to make dynamic chart in PHP using canvasJS?

CanvasJS is a JavaScript library which is used to make a different type of charts easily for the webpage. For example Bar chart, Pie chart, Column chart, Area chart, Line chart, etc.

Let’s take an example that needs to create a graph in which we can display monthly sold and purchased products. We will consider two arrays which we can also consider from our database. Once we get the data from the database and stored in arrays, it can easily draw a dynamic graph using library canvasJS.

Create a file and save it in a project folder. The filename chart_sample.php contains data in the form of an array, where the first array represents the purchased products and the second array represents the sols products list. Now, use canvasJS to draw a graph.



Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<?php
  
// First array for purchased product
$purchased= array(10, 15, 19, 0, 5, 7, 0, 0, 12, 13, 10, 1);
  
// Second array for sold product
$sold= array(7, 12, 14, 0, 3, 7, 0, 0, 10, 7, 5, 0);
   
// Data to draw graph for purchased products
$dataPoints = array(
    array("label"=> "Jan", "y"=> $purchased[0]),
    array("label"=> "Feb", "y"=> $purchased[1]),
    array("label"=> "March", "y"=> $purchased[2]),
    array("label"=> "April", "y"=> $purchased[3]),
    array("label"=> "May", "y"=> $purchased[4]),
    array("label"=> "Jun", "y"=> $purchased[5]),
    array("label"=> "July", "y"=> $purchased[6]),
    array("label"=> "Aug", "y"=> $purchased[7]),
    array("label"=> "Sep", "y"=> $purchased[8]),
    array("label"=> "Oct", "y"=> $purchased[9]),
    array("label"=> "Nov", "y"=> $purchased[10]),
    array("label"=> "Dec", "y"=> $purchased[11])
);
   
// Data to draw graph for sold products
$dataPoints2 = array(
    array("label"=> "Jan", "y"=> $sold[0]),
    array("label"=> "Feb", "y"=> $sold[1]),
    array("label"=> "March", "y"=> $sold[2]),
    array("label"=> "April", "y"=> $sold[3]),
    array("label"=> "May", "y"=> $sold[4]),
    array("label"=> "Jun", "y"=> $sold[5]),
    array("label"=> "July", "y"=> $sold[6]),
    array("label"=> "Aug", "y"=> $sold[7]),
    array("label"=> "Sep", "y"=> $sold[8]),
    array("label"=> "Oct", "y"=> $sold[9]),
    array("label"=> "Nov", "y"=> $sold[10]),
    array("label"=> "Dec", "y"=> $sold[11])
);
       
?>
   
<!DOCTYPE HTML>
<html>
<head>  
    </script>
    <script>
        window.onload = function () {
           
            var chart = new CanvasJS.Chart("chartContainer", {
                animationEnabled: true,
                title:{
                    text: "Monthly Purchased and Sold Product"
                },    
                axisY: {
                    title: "Purchased",
                    titleFontColor: "#4F81BC",
                    lineColor: "#4F81BC",
                    labelFontColor: "#4F81BC",
                    tickColor: "#4F81BC"
                },
                axisY2: {
                    title: "Sold",
                    titleFontColor: "#C0504E",
                    lineColor: "#C0504E",
                    labelFontColor: "#C0504E",
                    tickColor: "#C0504E"
                },    
                toolTip: {
                    shared: true
                },
                legend: {
                    cursor:"pointer",
                    itemclick: toggleDataSeries
                },
                data: [{
                    type: "column",
                    name: "Purchased",
                    legendText: "Purchased",
                    showInLegend: true, 
                    dataPoints:<?php echo json_encode($dataPoints,
                            JSON_NUMERIC_CHECK); ?>
                },
                {
                    type: "column",    
                    name: "Sold",
                    legendText: "Sold",
                    axisYType: "secondary",
                    showInLegend: true,
                    dataPoints:<?php echo json_encode($dataPoints2,
                            JSON_NUMERIC_CHECK); ?>
                }]
            });
            chart.render();
               
            function toggleDataSeries(e) {
                if (typeof(e.dataSeries.visible) === "undefined"
                            || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                }
                else {
                    e.dataSeries.visible = true;
                }
                chart.render();
            }
           
        }
    </script>
</head>
  
<body>
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

chevron_right


Output:

Reference: CanvasJS



My Personal Notes arrow_drop_up

Web Developer, Technical Content Engineer

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.