رسم نمودار و چارت از داده‌های دیتابیس

02 مرداد 1399

یکی از راه‌های ترسیم نمودار و چارت در محیط وب، استفاده از chart.js - کتابخانه‌ای مبتنی بر جاوااسکریپت - است. حال چطور می‌توانیم داده‌های دیتابیس را در قالب نمودار ترسیم کنیم؟ در این مقاله به کمک ajax اطلاعاتی را که توسط php از دیتابیس خوانده‌ایم جهت نمایش chart.js آماده می‌کنیم.

مثال اول:

پیش از پرداختن به برنامه اصلی، ابتدا با فراخوانی کتابخانه مورد نظر - به ساده‌ترین شکل - یک نمودار ترسیم می‌کنیم. فرض کنید می‌خواهیم مولفه «الف» را با مقدار 100 ترسیم کنیم. همان‌طور که در سطرهای پایین مشاهده می‌کنید، ایجاد یک نمودار شامل چند مولفه اصلی است:

<html>
<head>
	<meta charset="utf-8">
	<title>چارت</title>
</head>
<body>
	<canvas id="my_chart"></canvas>
</body>
<script src="chart.min.js"></script>
<script>
var ctx = document.getElementById('my_chart').getContext('2d');
var myChart = new Chart(ctx, {
	type: 'bar',
	data: {
		labels: ['الف'],
		datasets: [{
			label: 'الف',
			data: [100]
		}]
	}
});
</script>
</html>

مثال دوم:

مثال بالا نمونه ساده‌ای از پیاده‌سازی کتابخانه بود. حال قصد داریم دیتابیس را نیز وارد ماجرا کنیم. می‌خواهیم میزان فروش خود را در طول یک سال از جدولی در دیتابیس خوانده و به نمایش درآوریم. محور افقی در اینجا ماه‌های سال و محور عمودی میزان فروش است.

جدول tbl.json شامل مولفه‌هایی مانند کد ماه، عنوان ماه و مقدار فروش است
فایل load.php اطلاعات را از جدول دیتابیس می‌خواند و به فرمت مناسب در می‌آورد
فایل index.php نیز فرمت آماده شده از فایل قبل را خوانده و در اختیار اسکریپت chart.js قرار می‌دهد
مولفه type نوع نمایش نمودار را تغییر می‌دهد و می‌تواند مقادیری مانند line ، bar ، doughnut ، pie ، radar و غیره باشد

tbl.json

[{"month": 1, "title": "فروردین", "amount": "2"}, 
{"month": 2, "title": "اردیبهشت", "amount": "3"}, 
{"month": 3, "title": "خرداد", "amount": "1"}, 
{"month": 4, "title": "تیر", "amount": "4"}, 
{"month": 5, "title": "مرداد", "amount": "2"}, 
{"month": 6, "title": "شهریور", "amount": "3"}, 
{"month": 7, "title": "مهر", "amount": "1"}, 
{"month": 8, "title": "آبان", "amount": "3"}, 
{"month": 9, "title": "آذر", "amount": "4"}, 
{"month": 10, "title": "دی", "amount": "2"}, 
{"month": 11, "title": "بهمن", "amount": "1"}, 
{"month": 12, "title": "اسفند", "amount": "3"}]

load.php

<?PHP
$chartData		= array();
$res				= array();
$labelsArr		= array();
$datasets		= array();

$res['data']			= array();
$res['label']			= "میزان فروش";
$res['backgroundColor']	= "rgba(231, 76, 60, 0.5)";

$jsonString = file_get_contents('tbl.json');
$row = json_decode($jsonString, true);
if($row) {

	for($i=0;$i<count($row);$i++) {

		array_push($res['data'],$row[$i]['amount']);
		array_push($labelsArr,$row[$i]['title']);
	}
}

array_push($datasets,$res);
$chartData['datasets'] 	= $datasets;
$chartData['labels'] 	= $labelsArr;

echo json_encode($chartData,JSON_UNESCAPED_UNICODE);
?>

index.php

<!DOCTYPE html>
<html lang="fa">
<head>
	<meta charset="utf-8">
	<title>چارت</title>
</head>
<body>
	<canvas id="my_chart"></canvas>
</body>
<script src="chart.min.js"></script>
<script src="jquery.min.js"></script>
<script>
$( document ).ready(function() {
	$.ajax({
		url: "load.php",
		type : "GET",
		success: function(res) {

			var ctx = $("#my_chart");
			Chart.defaults.global.defaultFontFamily = 'tahoma';
			Chart.defaults.global.defaultFontSize = 10;

			var barGraph = new Chart(ctx, {
				type: 'line',
				data: JSON.parse(res),
				options: {
					responsive: true,
					title: {
						display: true,
						text: 'گزارش نموداری درآمد'
					},
					scales: {
						yAxes: [{
							ticks: {
								suggestedMin: 0
							}
						}]
					}
				}
			});					
		}
	});	
});		
</script>
</html>

مثال سوم:

در ادامه علاوه بر میزان فروش، مولفه هزینه را هم به گزارش اضافه می‌کنیم. بنابراین چارت به ما نشان خواهد داد که میزان فروش و هزینه در طول سال و در مقایسه با یکدیگر چقدر است.

جدول tbl1.json شامل مولفه‌هایی مانند کد ماه، عنوان ماه و مقدار فروش است
جدول tbl2.json شامل ویژگی مولفه‌های نمودار است
فایل load.php اطلاعات را از جدول دیتابیس می‌خواند و به فرمت مناسب در می‌آورد
فایل index.php نیز فرمت آماده شده از فایل قبل را خوانده و در اختیار اسکریپت chart.js قرار می‌دهد
مولفه type نوع نمایش نمودار را تغییر می‌دهد و می‌تواند مقادیری مانند line ، bar ، doughnut ، pie ، radar و غیره باشد

tbl1.json

[{"month": 1, "title": "فروردین", "amount": "2", "cost": "1"}, 
{"month": 2, "title": "اردیبهشت", "amount": "3", "cost": "2"}, 
{"month": 3, "title": "خرداد", "amount": "1", "cost": "1"}, 
{"month": 4, "title": "تیر", "amount": "4", "cost": "3"}, 
{"month": 5, "title": "مرداد", "amount": "2", "cost": "3"}, 
{"month": 6, "title": "شهریور", "amount": "3", "cost": "2"}, 
{"month": 7, "title": "مهر", "amount": "1", "cost": "2"}, 
{"month": 8, "title": "آبان", "amount": "3", "cost": "1"}, 
{"month": 9, "title": "آذر", "amount": "4", "cost": "3"}, 
{"month": 10, "title": "دی", "amount": "2", "cost": "1"}, 
{"month": 11, "title": "بهمن", "amount": "1", "cost": "0"}, 
{"month": 12, "title": "اسفند", "amount": "3", "cost": "2"}]

tbl2.json

[{"title": "فروش", "bg": "rgba(231, 76, 60, 0.5)", "field": "amount"}, 
{"title": "هزینه", "bg": "rgba(52, 152, 219, 0.5)", "field": "cost"}]

load.php

<?PHP
$chartData	= array();
$res			= array();
$labelsArr	= array();
$datasets	= array();

$jsonString 	= file_get_contents('tbl2.json');
$row2 		= json_decode($jsonString, true);
$count2 		= count($row2);

for($c=0;$c<$count2;$c++) 
	$res[$c]['data'] = array();

$jsonString 	= file_get_contents('tbl1.json');
$row 		= json_decode($jsonString, true);
if($row) {

	for($i=0;$i<count($row);$i++)  {

		for($c=0;$c<$count2;$c++) 
			array_push($res[$c]['data'],$row[$i][$row2[$c]['field']]);
		array_push($labelsArr,$row[$i]['title']);
	}
	
	for($c=0;$c<$count2;$c++) {
		
		$res[$c]['label'] 			= $row2[$c]['title'];
		$res[$c]['backgroundColor'] 	= $row2[$c]['bg'];	
		array_push($datasets,$res[$c]);
	}
}

$chartData['datasets'] 	= $datasets;
$chartData['labels'] 	= $labelsArr;

echo json_encode($chartData,JSON_UNESCAPED_UNICODE);
?>

index.php

<!DOCTYPE html>
<html lang="fa">
<head>
	<meta charset="utf-8">
	<title>چارت</title>
</head>
<body>
	<canvas id="my_chart"></canvas>
</body>
<script src="chart.min.js"></script>
<script src="jquery.min.js"></script>
<script>
$( document ).ready(function() {
	$.ajax({
		url: "load.php",
		type : "GET",
		success: function(res) {

			var ctx = $("#my_chart");
			Chart.defaults.global.defaultFontFamily = 'tahoma';
			Chart.defaults.global.defaultFontSize = 10;

			var barGraph = new Chart(ctx, {
				type: 'bar',
				data: JSON.parse(res),
				options: {
					responsive: true,
					title: {
						display: true,
						text: 'گزارش نموداری'
					},
					scales: {
						yAxes: [{
							ticks: {
								suggestedMin: 0
							}
						}]
					}
				}
			});					
		}
	});	
});		
</script>
</html>