Step 1: Download Chart.js<\/h4>\r\n
The first step is to download Chart.js from the official website, or you can use the CDN link to include the Chart.js library.<\/p>\r\n![\"code-js\"](\"https:\/\/designcollection.in\/blog\/wp-content\/uploads\/2023\/03\/js.png\")
\r\n\r\n
Initialize Chart.js and load data into dynamic charts<\/h4>\r\n
The following JavaScript contains four separate functions. It creates bar, doughnut, pie and stacked-column charts.<\/p>\r\n
Each function requests the PHP endpoint to get the dynamic chart data.It uses the jQuery post method to call the PHP file from JavaScript. In a previous tutorial, we have seen how to use jQuery load method to render HTML dynamicallyThe endpoint URL includes the chart type in its query string. Based on this param the response data will vary.<\/p>\r\n![\"graph-2\"](\"https:\/\/designcollection.in\/blog\/wp-content\/uploads\/2023\/03\/How-to-Create-Dynamic-Stacked-Bar-Doughnut-and-Pie-charts-in-PHP-with-Chart.js-1.jpg\")
\r\n\r\n
This script loads the dynamic response data into the chart. The chart legends and labels are also dynamic from the database fetched using PHP.<\/p>\r\n
graph.php<\/p>\r\n
\r\nfunction showBarChart() {\r\n\t{\r\n\t\t$.post(\"ajax-endpoint\/get-chart-data.php?chart_type=bar\",\r\n\t\t\tfunction(data) {\r\n\t\t\t\tconsole.log(data);\r\n\t\t\t\tvar name = [];\r\n\t\t\t\tvar marks = [];\r\n\r\n\t\t\t\tfor (var i in data) {\r\n\t\t\t\t\tname.push(data[i].student_name);\r\n\t\t\t\t\tmarks.push(data[i].marks);\r\n\t\t\t\t}\r\n\r\n\t\t\t\tvar chartdata = {\r\n\t\t\t\t\tlabels: name,\r\n\t\t\t\t\tdatasets: [\r\n\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\tlabel: 'Student Marks',\r\n\t\t\t\t\t\t\tbackgroundColor: '#49e2ff',\r\n\t\t\t\t\t\t\tborderColor: '#46d5f1',\r\n\t\t\t\t\t\t\thoverBackgroundColor: '#CCCCCC',\r\n\t\t\t\t\t\t\thoverBorderColor: '#666666',\r\n\t\t\t\t\t\t\tdata: marks\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t]\r\n\t\t\t\t};\r\n\r\n\t\t\t\tvar graphTarget = $(\"#bar-chart\");\r\n\r\n\t\t\t\tvar graph = new Chart(graphTarget, {\r\n\t\t\t\t\ttype: 'bar',\r\n\t\t\t\t\tdata: chartdata\r\n\t\t\t\t});\r\n\t\t\t});\r\n\t}\r\n}\r\n\r\nfunction showPieChart() {\r\n\t{\r\n\t\t$.post(\"ajax-endpoint\/get-chart-data.php?chart_type=pie\",\r\n\t\t\tfunction(data) {\r\n\t\t\t\tvar name = [];\r\n\t\t\t\tvar marks = [];\r\n\t\t\t\tvar bgColor = [];\r\n\r\n\t\t\t\tfor (var i in data) {\r\n\t\t\t\t\tname.push(data[i].label);\r\n\t\t\t\t\tmarks.push(data[i].data);\r\n\t\t\t\t\tbgColor.push(data[i].backgroundColor);\r\n\t\t\t\t}\r\n\r\n\t\t\t\tvar chartdata = {\r\n\t\t\t\t\tlabels: name,\r\n\t\t\t\t\tdatasets: [\r\n\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\tlabel: 'Student Marks',\r\n\t\t\t\t\t\t\tbackgroundColor: bgColor,\r\n\t\t\t\t\t\t\tdata: marks\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t]\r\n\t\t\t\t};\r\n\r\n\t\t\t\tvar graphTarget = $(\"#pie-chart\");\r\n\r\n\t\t\t\tvar graph = new Chart(graphTarget, {\r\n\t\t\t\t\ttype: 'pie',\r\n\t\t\t\t\tdata: chartdata\r\n\t\t\t\t});\r\n\t\t\t});\r\n\t}\r\n}\r\n\r\nfunction showDoughnutChart() {\r\n\t{\r\n\t\tChart.pluginService.register({\r\n\t\t\tbeforeDraw: function(chart) {\r\n\t\t\t\tvar width = chart.chart.width,\r\n\t\t\t\t\theight = chart.chart.height + 35,\r\n\t\t\t\t\tctx = chart.chart.ctx;\r\n\r\n\t\t\t\tctx.save();\r\n\t\t\t\tctx.font = \"bold 1.5em sans-serif\";\r\n\t\t\t\tctx.textBaseline = \"middle\";\r\n\r\n\r\n\t\t\t\tvar text = \"100\",\r\n\t\t\t\t\ttextX = Math.round((width - ctx.measureText(text).width) \/ 2),\r\n\t\t\t\t\ttextY = height \/ 2;\r\n\t\t\t\tctx.fillStyle = 'rgba(0, 0, 0, 1)';\r\n\t\t\t\tctx.fillText(text, textX, textY);\r\n\t\t\t\tctx.restore();\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\t$.post(\"ajax-endpoint\/get-chart-data.php?chart_type=doughnut\",\r\n\t\t\tfunction(data) {\r\n\t\t\t\tvar name = [];\r\n\t\t\t\tvar marks = [];\r\n\t\t\t\tvar bgColor = [];\r\n\r\n\t\t\t\tfor (var i in data) {\r\n\t\t\t\t\tname.push(data[i].label);\r\n\t\t\t\t\tmarks.push(data[i].data);\r\n\t\t\t\t\tbgColor.push(data[i].backgroundColor);\r\n\t\t\t\t}\r\n\r\n\t\t\t\tvar chartdata = {\r\n\t\t\t\t\tlabels: name,\r\n\t\t\t\t\tdatasets: [\r\n\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\tlabel: 'Student Marks',\r\n\t\t\t\t\t\t\tbackgroundColor: bgColor,\r\n\t\t\t\t\t\t\tdata: marks\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t]\r\n\t\t\t\t};\r\n\r\n\t\t\t\tvar graphTarget = $(\"#doughnut-chart\");\r\n\r\n\t\t\t\tvar graph = new Chart(graphTarget, {\r\n\t\t\t\t\ttype: 'doughnut',\r\n\t\t\t\t\tdata: chartdata,\r\n\t\t\t\t\toptions: {\r\n\t\t\t\t\t}\r\n\t\t\t\t});\r\n\t\t\t});\r\n\t}\r\n}\r\n\r\n\r\nfunction showStackedVerticalChart() {\r\n\t{\r\n\t\t$.post(\"ajax-endpoint\/get-chart-data.php?chart_type=vertical-bar\",\r\n\t\t\tfunction(data) {\r\n\t\t\t\tvar chartdata = {\r\n\t\t\t\t\tlabels: ['Marks'],\r\n\t\t\t\t\tdatasets: data\r\n\t\t\t\t};\r\n\r\n\t\t\t\tvar graphTarget = $(\"#stacked-vertical-chart\");\r\n\r\n\t\t\t\tvar graph = new Chart(graphTarget, {\r\n\t\t\t\t\ttype: 'bar',\r\n\t\t\t\t\tdata: chartdata,\r\n\t\t\t\t\toptions: {\r\n\t\t\t\t\t\tscales: {\r\n\t\t\t\t\t xAxes: [{\r\n\t\t\t\t\t \tbarPercentage: 0.3,\r\n \t\t\t\t\tstacked: true\r\n\t\t\t\t\t }],\r\n\t\t\t\t\t yAxes: [{\r\n\t\t\t\t\t \tstacked: true\r\n\t\t\t\t\t }]\r\n\t\t\t\t\t }\r\n\t\t\t\t\t}\r\n\t\t\t\t});\r\n\t\t\t});\r\n\t}\r\n}\r\n<\/pre>\r\nCreate PHP Model, Utils to prepare chart data<\/h4>\r\n
When we create a chart in PHP with dynamic data, it depends on the model or service handers on the server-side.<\/p>\r\n\r\n
The model prepares the dynamic data format from an external source like files or a database.<\/p>\r\n\r\n
In this model, the handlers read the chart data from the database. The chart.tbl_marks table maps the student identity data with the marks one-to-one.<\/p>\r\n
Student.php<\/p>\r\n
\r\n\r\nnamespace Phppot;\r\n\r\nclass Student\r\n{\r\n\r\n private $dbConn;\r\n\r\n public function __construct()\r\n {\r\n require_once __DIR__ . '\/DataSource.php';\r\n $this->dbConn = new DataSource();\r\n }\r\n\r\n function getStudentMark()\r\n {\r\n $query = \"SELECT student_id,student_name,marks FROM tbl_marks ORDER BY student_id\";\r\n $result = $this->dbConn->select($query);\r\n return $result;\r\n }\r\n}\r\n<\/pre>\r\nAnd, it has the utils class to dynamically supply the background color to the chart.The Util class generates the random color code to the chart slices and the stacked bars.When we see how to create charts using Google Charts, it has a fixed array of colors supplied to the chart slices.The Google Charts services also provide very good results for showing statistical graphs.<\/p>\r\n
Util.php<\/p>\r\n
\r\n\r\nnamespace Phppot;\r\n\r\nclass Util\r\n{\r\n\r\n function getRGBRandom()\r\n {\r\n $rgbRandom = str_pad(dechex(mt_rand(0, 255)), 2, '0', STR_PAD_LEFT);\r\n return $rgbRandom;\r\n }\r\n\r\n function getRandomColor()\r\n {\r\n $randomColor = \"#\";\r\n for ($i = 0; $i < 3; $i ++) {\r\n $randomColor .= $this->getRGBRandom();\r\n }\r\n return $randomColor;\r\n }\r\n}\r\n<\/pre>\r\nDatabase script<\/h4>\r\n
This database script shows the statements to create the table structure. It also has the sample data to load into the chart initialization process. Download the code and import the script to run this chart example.In a previous article, we have created a database to keep attendance data. Thereby, it created charts using Google charts.<\/p>\r\n
\r\n-- Table structure for table `tbl_marks`\r\n--\r\n\r\nCREATE TABLE `tbl_marks` (\r\n `student_id` int(10) UNSIGNED NOT NULL,\r\n `student_name` varchar(35) NOT NULL,\r\n `marks` int(11) DEFAULT 0\r\n) ENGINE=InnoDB DEFAULT CHARSET=utf8;\r\n\r\n--\r\n-- Dumping data for table `tbl_marks`\r\n--\r\n\r\nINSERT INTO `tbl_marks` (`student_id`, `student_name`, `marks`) VALUES\r\n(1, 'Matthew', 39),\r\n(2, 'Hannah', 46),\r\n(3, 'Merlin', 65),\r\n(4, 'Jelin', 90),\r\n(5, 'Hilda', 75);\r\n\r\n--\r\n-- Indexes for dumped tables\r\n--\r\n\r\n--\r\n-- Indexes for table `tbl_marks`\r\n--\r\nALTER TABLE `tbl_marks`\r\n ADD PRIMARY KEY (`student_id`);\r\n\r\n<\/pre>\r\nConclusion<\/h4>\r\n
This article described how to create a chart in PHP with JavaScript library Chart.js. The example code has structured dynamic blocks and the backend logic.We have displayed the marks statistics in the form of a pie chart, doughnut chart and stacked bar chart. In the doughnut chart, it displays the text to state the mark out of which the student marks are shown.The separate graph initializations script made the chart rendering process easier. It contains code to supply JSON response into the JavaScript to plot the metrics into the chart UI.With dynamic data loading, it is possible to make use of this code in a real-time application easily.<\/p>\r\n\r\n