استفاده از chart.js برای نمایش دادههای mysql


ناصر نادری 1395/01/12

بنام خدا .

یکی از مهمترین مباحثی که در زمینه طراحی نرم افزارهای تحت وب باهاش مواجه هستیم  نمایش نمودارها یی بر اساس داده های موجود در دیتابیس هست. به عنوان مثال میخواییم تعداد بازدید روزانه از سایت رو بصورت یک نمودار میله ای نمایش بدیم.  قبلا برای اینکار در زبانهایی مانند جاوا  در بستر J2EE و یا زبان C#  در ASP.Net از اجزاء یا کامپوننت های تحت سرور استفاده میشد. یا اینکه با استفاده از طراحی های گرافیکی HTML&CSS و زبان جاوا اسکریپت  اشکالی رو مثل نمودار ها طراحی میکردن .

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

مشکل اصلی برنامه نویسان در استفاده از کتابخانه های جاوا اسکریپت نحوه ارسال داده های موجود  در پایگاه داده  به رابط کاربری هست. در این جلسه از سری آموزشهای مباحث ویژه سعی کردیم در حد توان با یک مثال عملی نحوه استفاده از chart.js و ارتباطش با بانک اطلاعاتی mysql از طریق زبان php رو ارائه بدیم.

قبل از هرچیز باید فایل مربوط به این کتابخانه با نام Chart.js رو دانلود کنید که البته داخل فایل ضمیمه این پروژه وجود داره. تمام چیزی که نیاز دارید برای شروع کار همینه.

توی مسیر هاست apache خودتون یک پوشه درست کنید و توش یه فایل با نام index.php ایجاد کنید و فایل chart.js رو یا در همون مسیر یا اینکه توی یه پوشه به نام js در همون مسیر (برای  حفظ نظم)  کپی کنید .

فایل index.php رو باز کنید و قبل از هرچیز فایل جاوا اسکریپت chart.js رو بهش اضافه کنید :

 <html>
<head>

    <script type="text/javascript" src="js/Chart.js"></script>

</head>
<body>

</body> 

دراین پروژه ما فرض کردیم که توی  mysql یک  بانک اطلاعاتی با نام appinapps_training داریم که توش یک جدول با نام tbl_salary یا جدول حقوق کارمندان که بسیار ساده هست و شامل سه فیلد code,name و salary هست.

خیلی ساده میتونید این جدول رو ایجاد کنید و اطلاعات بالا رو توش بریزید که برای کار ما آماده شه . کد ایجاد این جدول رو پایین داریم :

 CREATE TABLE IF NOT EXISTS `tbl_salary` (
`code` bigint(10) NOT NULL AUTO_INCREMENT,
`name` varchar(50) COLLATE utf8_bin NOT NULL,
`salary` varchar(15) COLLATE utf8_bin NOT NULL,
PRIMARY KEY (`code`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=9 ;

--
-- Dumping data for table `tbl_salary`
--

INSERT INTO `tbl_salary` (`code`, `name`, `salary`) VALUES
(1, 'Naser Naderi', '1500000'),
(2, 'Reza Nagilo', '1200000'),
(3, 'Ali Rezaie', '200000'),
(4, 'Mohseni', '1300000'),
(5, 'Simar', '900000'),
(6, 'Bulent', '1100000'),
(7, 'Reza', '2500000'),
(8, 'Ibrahim', '2000000'); 

خب حالا که جدول و دیتابیس رو داریم میتونیم باقی کار رو ادامه بدیم کد php زیر رو داخل فایل index.php  بنویسید. در این کد ما ضمن اتصال به پایگاه داده ها اطلاعات رو از جدول میخونیم و  داخل دو آرایه Names مربوط به اسامی و Salaries مربوط به  حقوق میریزه.

 <?php
//اتصال به بانک اطلاعاتی
$servername = "localhost";
$username = "root";
$password = "";
$database = "appinapps_traning";

// ایجاد اتصال
$conn = new mysqli($servername, $username, $password, $database);

// بررسی اتصال یا عدم اتصال
if ($conn->connect_error) {
    die("اتصال ناموفق: " . $conn->connect_error);
}

//تعریف آرایه اسامی و حقوق برای نمایش در نمودار
$Names=array();
$Salaries=array();

//دریافت داده ها از بانک اطلاعاتی
$sql = "SELECT code,name,salary FROM tbl_salary";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // دریاقت داده ها از بانک اطلاعاتی
    $i=0;
    while($row = $result->fetch_assoc()) {
        //ارسال داده ها به آرایه های اسامی و  حقوق
        $Names[$i]=$row['name'];
        $Salaries[$i]=$row['salary'];
        $i++;
    }
} else {
echo "رکوردی وجود ندارد";
}


?> 

تا حالا هر کاری کردیم مربوط به واکشی اطلاعات از بانک اطلاعاتی mysql بود. حالا میرسیم به نحوه نمایش اطلاعات در نمودار. برای اینکار ابتدا باید یک تگ canvas داخل تگ html با کلاس chart بصورت زیر تعریف کنیم.

  <div class="chart">
   <canvas id="lineChart" style="height:250px"></canvas>
</div> 

با استفاده از  شناسه  lineChart  کد جاوا اسکریپتی که خواهیم نوشت (البته کپی میکنیم!!!) داخل این تگ canvas نمودار رو رسم میکنه. کد جاوا اسکریپت زیر این کار رو انجام میده:

  $(function() {

    // این متغییر آبجکتی است که حاوی تنظیمات اولیه مربوط به رسم نمودار است
    var areaChartOptions = {
        //Boolean - If we should show the scale at all
        showScale: true,
        //Boolean - Whether grid lines are shown across the chart
        scaleShowGridLines: false,
        //String - Colour of the grid lines
        scaleGridLineColor:  "rgba(0,0,0,.05)",
        //Number - Width of the grid lines
        scaleGridLineWidth: 1,
        //Boolean - Whether to show horizontal lines (except X axis)
        scaleShowHorizontalLines: true,
        //Boolean - Whether to show vertical lines (except Y axis)
        scaleShowVerticalLines: true,
        //Boolean - Whether the line is curved between points
        bezierCurve: true,
        //Number - Tension of the bezier curve between points
        bezierCurveTension: 0.3,
        //Boolean - Whether to show a dot for each point
        pointDot: false,
        //Number - Radius of each point dot in pixels
        pointDotRadius: 4,
        //Number - Pixel width of point dot stroke
        pointDotStrokeWidth: 1,
        //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
        pointHitDetectionRadius: 20,
        //Boolean - Whether to show a stroke for datasets
        datasetStroke: true,
        //Number - Pixel width of dataset stroke
        datasetStrokeWidth: 2,
        //Boolean - Whether to fill the dataset with a color
        datasetFill: true,
        //String - A legend template
        legendTemplate: "<ul  class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length;  i++){%                                         ><li><span                      style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
        //Boolean - whether to maintain the  starting aspect ratio or not when responsive, if set to false, will take up  entire container
        maintainAspectRatio: true,
        //Boolean - whether to make the chart responsive to window resizing
        responsive: true
};



//این آبجکت در بر دارنده اطلاعات آماری یا داده های لازم برای نمایش در نمودار هست 
var lineChartData = {
//در این بخش برچسپ های لازم برای نمایش در روی محور افقی رو که همون اسامی گرفته  شده از کد php هست مینویسیم
labels: ["<?php echo $Names[0]; ?>", "<?php echo $Names[1]; ?>", "<?php echo  $Names[2]; ?>", "<?php echo $Names[3]; ?>", "<?php echo $Names[4]; ?>", "<?php  echo $Names[5]; ?>"],
datasets: [
{
label: "Electronics",
fillColor: "rgba(210, 214, 222, 1)",
strokeColor: "rgba(210, 214, 222, 1)",
pointColor: "rgba(210, 214, 222, 1)",
pointStrokeColor: "#c1c7d1",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
//اینها هم داده های ما که همون آرایه حقوق گرفته شده در کد php هست
data: [<?php echo $Salaries[0]; ?>, <?php echo $Salaries[1]; ?>,
<?php echo $Salaries[2]; ?>, <?php echo $Salaries[3]; ?>,
<?php echo $Salaries[4]; ?>,<?php echo $Salaries[5]; ?>]
}

]

};

//در این بخش آبجکت chart ایجاد میشه
var lineChartCanvas = $("#lineChart").get(0).getContext("2d");
var lineChart = new Chart(lineChartCanvas);
var lineChartOptions = areaChartOptions;
lineChartOptions.datasetFill = false;
lineChart.Line(lineChartData, lineChartOptions);


}); 

حالا برید سراغ مرورگرتون و اگه سرور apache باز هست و فعال، آدرس صفحتون رو تایپ کنید و نتیجه رو ملاحظه کنید.

فایل پروژه رو میتونید در بخش فایل ضمیمه دانلود کنید .

دانلود سورس

فایلهای ضمیمه
توجه! هیچ فایل ضمیمه ای برای این مطلب یافت نشد
درباره نویسنده
admin
ناصر نادری
prgnaderi11@hotmail.com
نظرات شما
نظر جدید