نحوه رسم چارت و نمودار آماری با PHP و MySQL

دانلود اسکریپت رسم چارت و نمودار آماری

با PHP و MySQL

رسم چارت و نمودار آماری در وب با روش های متعدد مبتنی بر زبان های سمت سرور یا سمت کاربر میسر است، در اسکریپتی که در این آموزش بررسی می کنیم رسم چارت توسط کلاسی به زبان PHP انجام می شود، در کنار کلاس اصلی اسکریپت چند نمونه فایل نیز کدنویسی کرده ایم تا با نحوه استفاده از برنامه به صورت مستقل یا در ارتباط با پایگاه داده MySQL آشنا شویم، برای شروع فایل فشرده اسکریپت را از آدرس زیر دریافت می کنیم:
دانلود اسکریپت رسم چارت و نمودار آماری با PHP و MySQL - حجم: کمتر از 15 کیلوبایت
بسته بالا حاوی چند فایل و دایرکتوری با نام ها و کارکردهای مختلف به شرح زیر است:
- فایل php-chart.php جهت تست برنامه در حالت مستقل (بدون استفاده از دیتابیس) کاربرد دارد، برای اجرای این فایل نیاز به انجام تنظیمات خاصی نیست و کافی است در مرورگر آن را مشابه نمونه زیر فراخوانی کنیم:

localhost/test/php-chart.php

این فراخوانی در حالت لوکال هاست است و قاعدتا در سایت آنلاین باید آدرس سایت را جایگزین کنیم.
- فایل mysql-chart.php جهت تست برنامه در حالت اتصال با پایگاه داده MySQL کاربرد دارد، برای اجرای این فایل لازم است که ابتدا یک دیتابیس در سرور خود ایجاد و تنظیماتی را به شرحی که در ادامه خواهیم گفت انجام دهیم.
- فایل chart_config.php در دایرکتوری config حاوی تنظیمات اتصال به دیتابیس (عنوان دیتابیس، نام کاربری، کلمه عبور) و مواردی مانند نام جدول است، این اطلاعات باید مطابق با دیتابیس ایجاد شده تنظیم شوند در غیر اینصورت ارتباط برنامه با دیتابیس برقرار نخواهد شد و احیانا خطایی مشابه به متن زیر دریافت خواهیم کرد:

Warning: mysqli_connect(): (HY000/1044): Access denied for user ''@'localhost' to database 'dbname' in www\test\mysql-chart.php on line 29

- فایل chart-table.php در دایرکتوری table جهت ایجاد جدول و درج نمونه اطلاعات اولیه در دیتابیس کاربرد دارد، کافی است بعد از اعمال تنظیمات اتصال این فایل را به صورت نمونه زیر در مرورگر فراخوانی کنیم:

localhost/test/table/chart-table.php

نام جدول و مقادیر کاملا دلخواه و فرضی هستند.
- فایل chart_class.php در دایرکتوری chart حاوی کدنویسی کلاس اصلی برنامه است که وظیفه ترسیم نمودار در دو حالت عمودی و افقی را برعهده دارد، نمودارهای ترسیم شده از تصاویر موجود در فولدر image و استایل فایل style.css پیروی می کنند که جهت سفارشی سازی می توانیم آنها را مطابق نیاز و سلیقه خود تغییر داده و ویرایش کنیم.

نحوه استفاده از اسکریپت رسم چارت و نمودار آماری

با PHP و MySQL

- برای استفاده از کد ابتدا فایل chart_class.php را در صفحه مورد نظر وارد می کنیم، برای مثال ما این کار را در نمونه صفحات php-chart.php و mysql-chart.php به صورت include_once انجام داده ایم:

include_once('chart/chart_class.php');

- سپس برای اعمال استایل ظاهری مناسب فایل style.css موجود در دایرکتوری chart را به صورت آدرس دهی صحیح در صفحه وارد می کنیم (می توانیم از کدنویسی صفحات موجود الگوبرداری کنیم):

<link rel="stylesheet" href="chart/style.css">

- در گام آخر کافی است مقادیر را برای نمایش آمار به صورت مستقل یا در ارتباط با پایگاه داده در قالب متغیر تعیین کنیم (در فایل php-chart.php به صورت استاتیک مقادیری را جهت مثال قرار داده ایم و در فایل mysql-chart.php این مقادیر به صورت داینامیک از دیتابیس دریافت و به متغیر statistical نسبت داده می شوند) و در نهایت کلاس displayChart را در دو حالت عمودی و افقی فراخوانی می کنیم:

$mc = new Chart($statistical);
$mc->displayChart('نمودار آماری - نمایش به صورت افقی', 0, 500, 250, true, 1);

$mc = new Chart($statistical);
$mc->displayChart('نمودار آماری - نمایش به صورت عمودی', 1, 500, 250, false, 2);

همان طور که مشخص است هسته اصلی اسکریپت به صورت شی گرا نوشته شده است.

سفارشی سازی برنامه رسم چارت و نمودار آماری با PHP و MySQL

کلاس رسم چارت و نموداری آماری که در این آموزش بررسی کردیم قابلیت های خوبی برای سفارشی سازی و اعمال تغییرات دلخواه به شرح زیر دارد:
- نمایش به صورت عمودی یا افقی: بدین منظور کافی است مقدار 0 یا 1 را در هنگام فراخوانی کلاس به عنوان آرگیومنت سوم جایگزین کنیم، به طور مثال فراخوانی کلاس در حالت زیر نمودار را به شکل افقی نمایش می دهد.

$mc = new Chart($statistical);
$mc->displayChart('نمودار آماری - نمایش به صورت افقی', 0, 500, 250, true, 2);

و با تغییر مقادیر از 0 به 1، نمودار به صورت عمودی ترسیم می شود.

$mc = new Chart($statistical);
$mc->displayChart('نمودار آماری - نمایش به صورت عمودی', 1, 500, 250, true, 2);

- تعداد ستون های چارت: تعداد ستون های چارت بستگی به تعداد پارامتری دارد که به صورت آرایه (Array Index) تعریف و مقداردهی می کنیم، در مثال پیش فرض روزهای هفته را در متغیر statistical با اطلاعات آماری فرضی قرار داده ایم و در نتیجه هفت ستون در نمودار به صورت عمودی یا افقی ترسیم می شود.
- تنظیمات ظاهری: تنظیمات ظاهری اصلی برنامه از طریق فایل CSS آن موجود در دایرکتوری chart قابل اعمال است، همچنین در صورت آشنایی با PHP در خود فایل chart_class.php می توانیم تغییراتی در خروجی HTML نهایی اعمال کنیم.
- استفاده از رنگ ثابت یا متغیر: برای استفاده از رنگ ثابت در ستون های آماری باید مقادیر متغیر various_colors را در متد displayChart به صورت false مقداردهی کنیم، همچنین اگر می خواهیم هر کدام از ستون های نمودار رنگی اتفاقی داشته باشند به جای false مقدار true را تنظیم می کنیم، این پارامتر در هنگام فراخوانی متد به صورت آرگیومنت پنجم مشخص است:

$mc->displayChart('نمودار آماری - نمایش به صورت عمودی', 1, 500, 250, false, 2);

محتویات فایل های اسکریپت رسم چارت و نمودار آماری

با PHP و MySQL

محتویات فایل php-chart.php، جهت بررسی برنامه به صورت مستقل:

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ترسیم نمودار آماری با PHP</title>
<!-- Webgoo.ir -->
<link rel="stylesheet" href="chart/style.css">
<style>
body {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
direction: rtl;
}
</style>
</head>
<body>
<?php
//متغیر پیش فرض
@$statistical = array();

//وارد کردن فایل کلاس ترسیم نمودار
include_once('chart/chart_class.php');

//تعریف مقادیر آمار در متغیر
$statistical["شنبه"] = 20;
$statistical["یکشنبه"] = 30;
$statistical["دوشنبه"] = 60;
$statistical["سه شنبه"] = 25;
$statistical["چهارشنبه"] = 44;
$statistical["پنج شنبه"] = 17;
$statistical["جمعه"] = 66;

//نحوه فراخوانی
$mc = new Chart($statistical);
$mc->displayChart('نمودار آماری - نمایش به صورت افقی', 0, 500, 250, true, 1);

//نحوه فراخوانی
$mc = new Chart($statistical);
$mc->displayChart('نمودار آماری - نمایش به صورت عمودی', 1, 500, 250, false, 2);
?>
<hr>
- ورودی کلاس به صورت آرایه است که در هنگام فراخوانی به عنوان آرگیومنت به کلاس داده می شود.
<br><br>
- متد displayChart شش آرگیومنت دارد که به ترتیب شامل عنوان چارت، عمودی یا افقی بودن، عرض به پیکسل، ارتفاع به پیکسل،
استفاده یا عدم استفاده از رنگ های متنوع و در نهایت عدد رنگ انتخابی کاربر است.
<br><br>
- تعداد رنگ های انتخابی با توجه به تصاویر موجود در دایرکتوری image می تواند از عدد 1 تا 5 متغیر باشد.
</body>
</html>

محتویات فایل mysql-chart.php، جهت بررسی برنامه در ارتباط با MySQL:

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ترسیم نمودار آماری با PHP و MySQL</title>
<!-- Webgoo.ir -->
<link rel="stylesheet" href="chart/style.css">
<style>
body {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
direction: rtl;
}
</style>
</head>
<body>
<?php
//متغیر پیش فرض
@$statistical = array();

//وارد کردن فایل کلاس ترسیم نمودار
include_once('chart/chart_class.php');

//وارد کردن فایل اطلاعات اتصال و تنظیمات پایگاه داده
include_once('config/chart_config.php');

//اتصال با دیتابیس
$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if(!$conn) {
    echo "Error!: " . mysqli_connect_errno() . ' - ' . mysqli_connect_error();
    exit;
} else {
    //سازگاری با حروف فارسی
    $sql = "SET NAMES 'utf8'";
    $query = mysqli_query($conn, $sql);

    //دریافت مقادیر از دیتابیس
    $sql = "SELECT `day`, `stat` FROM $tbl_name LIMIT 10";
    $result = mysqli_query($conn, $sql);

    if(!$result) {
        echo "Selecting From Table $tbl_name: Error! " . mysqli_error($conn);
    } else {
        if(mysqli_num_rows($result) > 0) {
            while($row = mysqli_fetch_assoc($result)) {
                $statistical[$row["day"]] = $row["stat"];
            }

            //نحوه فراخوانی
            $mc = new Chart($statistical);
            $mc->displayChart('نمودار آماری - نمایش به صورت افقی', 0, 500, 250, true, 1);

            //نحوه فراخوانی
            $mc = new Chart($statistical);
            $mc->displayChart('نمودار آماری - نمایش به صورت عمودی', 1, 500, 250, false, 2);
        } else {
            echo "نتیجه ای یافت نشد!";
        }
    }
}

//پایان اتصال
mysqli_close($conn);
?>
<hr>
- قبل از اجرای این فایل ابتدا باید یک دیتابیس با نام دلخواه در برنامه phpMyAdmin ایجاد نمائیم.
<br><br>
- در گام دوم فایل chart_config.php موجود در دایرکتوری config را مطابق با اطلاعات دیتابیس خود ویرایش می کنیم.
<br><br>
- سپس فایل chart-table.php موجود در دایرکتوری table را در مرورگر فراخوانی و اجرا می کنیم تا جدول و ستون ها ساخته و نمونه اطلاعات پایگاه داده درج شوند.
<br><br>
- پس از ایجاد دیتابیس، تنظیم اطلاعات اتصال، ساخت جدول، ستون ها و درج نمونه اطلاعات، می توانیم فایل mysql-chart.php را در مرورگر فراخوانی و اجرا
کنیم.
</body>
</html>

محتویات فایل chart_config.php، تنظیمات اتصال به پایگاه داده:

<?php
//اطلاعات اتصال و تنظیمات پایگاه داده
$db_host = "localhost";
$db_user = "dbuser";
$db_pass = "";
$db_name = "dbname";
$tbl_name = "tblname";

محتویات فایل chart-table.php، جهت ساخت جدول و نمونه اطلاعات پیش فرض دیتابیس:

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ساخت جدول و ورود نمونه اطلاعات در MySQL</title>
<!-- Webgoo.ir -->
<style>
body {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
direction: rtl;
}
</style>
</head>
<body>
<?php
//وارد کردن فایل اطلاعات اتصال و تنظیمات پایگاه داده
include_once('../config/chart_config.php');

//اتصال با دیتابیس
$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if(!$conn) {
    echo "Error!: " . mysqli_connect_errno() . ' - ' . mysqli_connect_error();
    exit;
} else {
    echo "PHP & MySQL Connection: Ok!<br>";

    //سازگاری با حروف فارسی
    $sql = "SET NAMES 'utf8'";
    $query = mysqli_query($conn, $sql);

    //ساخت جدول و ستون ها
    $sql = "CREATE TABLE $tbl_name(
    id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
    day VARCHAR(255),
    stat INT(11) UNSIGNED DEFAULT 0) 
    ENGINE=MyISAM DEFAULT CHARACTER SET=utf8 COLLATE=utf8_persian_ci";
    $query = mysqli_query($conn, $sql);
    if(!$query) {
        echo "Creating Table $tbl_name: Error! " . mysqli_error($conn);
    } else {
        echo "Creating Table $tbl_name: OK!<br>";

        //ذخیره نمونه اطلاعات در جدول
        $sql = "INSERT INTO $tbl_name(`day`, `stat`) VALUES('شنبه', '12')";
        $query = mysqli_query($conn, $sql);

        $sql = "INSERT INTO $tbl_name(`day`, `stat`) VALUES('یکشنبه', '45')";
        $query = mysqli_query($conn, $sql);

        $sql = "INSERT INTO $tbl_name(`day`, `stat`) VALUES('دوشنبه', '143')";
        $query = mysqli_query($conn, $sql);

        $sql = "INSERT INTO $tbl_name(`day`, `stat`) VALUES('سه شنبه', '121')";
        $query = mysqli_query($conn, $sql);

        $sql = "INSERT INTO $tbl_name(`day`, `stat`) VALUES('چهارشنبه', '66')";
        $query = mysqli_query($conn, $sql);

        $sql = "INSERT INTO $tbl_name(`day`, `stat`) VALUES('پنجشنبه', '112')";
        $query = mysqli_query($conn, $sql);

        $sql = "INSERT INTO $tbl_name(`day`, `stat`) VALUES('جمعه', '34')";
        $query = mysqli_query($conn, $sql);

        if(!$query) {
            echo "Inserting Into Table $tbl_name: Error! " . mysqli_error($conn);
        } else {
            echo "Inserting Into Table $tbl_name: OK!";
        }
    }
}

//پایان اتصال
mysqli_close($conn);
?>
<hr>
- قبل از فراخوانی و اجرای این فایل ابتدا باید یک دیتابیس با نام دلخواه در برنامه phpMyAdmin ساخته باشیم.
<br><br>
- اطلاعات اتصال و تنظیمات پایگاه داده در فایل chart_config.php در دایرکتوری config قرار دارد.
<br><br>
- در قسمت تنظیمات اتصال به پایگاه داده در لوکال هاست معمولا می توانیم از نام کاربری root بدون کلمه عبور استفاده کنیم.
<br><br>
- عنوان دیتابیس، جدول، ستون ها و نمونه مقادیر کاملا فرضی هستند و صرفا جهت تست و بررسی نحوه ترسیم نمودار در PHP و MySQL
درج شده اند.
</body>
</html>

محتویات فایل chart_class.php، کلاس اصلی برنامه:

<?php
class Chart {
    var $data;  // The data array to display
    var $type; // Vertical:1 or Horizontal:0 chart
    var $title; // The title of the chart
    var $width;  // The chart box width
    var $height; // The chart box height
    var $meta_space_horizontal = 60; // Total space needed for chart title + bar title + bar value
    var $meta_space_vertical = 60; // Total space needed for chart title + bar title + bar value
    var $various_colors;//true or false

    function Chart($data) {
        $this->data = $data;
    }

    function displayChart($title = '', $type, $width = 300, $height = 200, $various_colors = true, $user_color) {
        $this->type = $type;
        $this->title = $title;
        $this->width = $width;
        $this->height = $height;
        $this->various_colors = $various_colors;
        echo '<div class="chartbox" style="width:' . $this->width . 'px; height:' . $this->height . 'px;"><h2>' . $this->title . '</h2>' . "\r\n";
        if($this->type == 1)
            $this->drawVertical($user_color);
        else $this->drawHorizontal($user_color);
        echo '</div>';
    }

    function getMaxDataValue() {
        $max = 0;
        foreach($this->data as $key => $value) {
            if($value > $max)
                $max = $value;
        }
        return $max;
    }

    function getElementNumber() {
        return sizeof($this->data);
    }

    function drawVertical($user_color) {
        $multi = ($this->height - $this->meta_space_horizontal) / $this->getMaxDataValue();
        $max = $multi * $this->getMaxDataValue();
        $barw = floor($this->width / $this->getElementNumber()) - 4;
        $i = 1;
        foreach($this->data as $key => $value) {
            $b = floor($max - ($value * $multi));
            $a = $max - $b;
            if($this->various_colors)
                $color = ($i % 5) + 1;
            else $color = $user_color;
            $i++;
            echo '<div class="barv">' . "\r\n";
            echo '<div class="barvvalue" style="margin-top:' . $b . 'px; width:' . $barw . 'px;">' . $value . '</div>' . "\r\n";
            echo '<div><img src="chart/images/bar' . $color . '.png" width="' . $barw . '" height="' . $a . '" alt="' . $color . '">
</div>' . "\r\n";
            echo '<div class="barvvalue" style="width:' . $barw . 'px;">' . $key . '</div>' . "\r\n";
            echo '</div>' . "\r\n";
        }
    }

    function drawHorizontal($user_color) {
        $multi = ($this->width - 170) / $this->getMaxDataValue();
        $max = $multi * $this->getMaxDataValue();
        $barh = floor(($this->height - 50) / $this->getElementNumber());
        $i = 1;
        foreach($this->data as $key => $value) {
            $b = floor($value * $multi);
            if($this->various_colors)
                $color = ($i % 5) + 1;
            else $color = $user_color;
            $i++;
            echo '<div class="barh" style="height:' . $barh . 'px;">' . "\r\n";
            echo '<div class="barhcaption" style="line-height:' . $barh . 'px; width:50px;">' . $key . '</div>' . "\r\n";
            echo '<div class="barhimage"><img src="chart/images/barh' . $color . '.png" alt="' . $color . '" style="width:' . $b . 'px; height:' . $barh . 'px;"></div>' . "\r\n";
            echo '<div class="barhvalue" style="line-height:' . $barh . 'px; width:30px;">' . $value . '</div>' . "\r\n";
            echo '</div>';
        }
    }
}

محتویات فایل style.css، اعمال تنظیمات ظاهری:

/* The sorrounding chart box */
.chartbox {
    display: block;
    height: 700px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 11px;
    color: #333;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 8px;
    border: 1px solid #333;
    overflow: hidden;
    background-color: #f9f9f9;
    padding: 4px;
}
.chartbox h2 {
    font-size: 11px;
    padding: 0;
    margin: 10px 0 0 0;
}
/* Vertical chart elements */
.barv {
    margin: 2px;
    display: inline-block;
    float: right;
}
.barvvalue {
    padding: 0;
    margin: 0;
    font-size: 11px;
    text-align: center;
}
/* Horizontal chart elements */
.barh {
    margin: 4px;
    text-align: left;
    clear: both;
}
.barhvalue {
    padding: 0;
    margin: 0 5px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    text-align: left;
    overflow: hidden;
    float: left;
}
.barhcaption {
    padding: 0;
    margin: 0 5px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    text-align: right;
    overflow: hidden;
    float: left;
}
.barhimage {
    float: left;
}

پیش نمایش آنلاین برنامه رسم چارت و نمودار آماری با PHP و MySQL

در لینک زیر پیش نمایش آنلاین برنامه را با آمار استاتیک (بدون استفاده از دیتابیس) جهت تست و بررسی قرار داده ایم.
پیش نمایش آنلاین