Detailed explanation of making dynamic charts in PHP based on canvasJS

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/202008/04/2020080415471934199.jpg" class="lazy" alt="Detailed explanation of making dynamic charts in PHP based on canvasJS" >

CanvasJS is a JavaScript library for easily creating other types of charts for web pages. For example, bar chart, pie chart, column chart, area chart, line chart, etc.

Let's take the example of needing to create a chart where we can show the products sold and purchased each month. We will consider two arrays, we can also consider them from the database. Once we get the data from the database and store it in an array, it can be easily drawn with dynamic graphics using canvasJS.

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

For example:

<?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]) 
);

?>

rrree

Related learning recommendations: PHP programming from entry to proficiency

The above is the detailed content of Detailed explanation of making dynamic charts in PHP based on canvasJS. For more information, please follow other related articles on the PHP Chinese website!