article

نحوه رسم چارت و نمودار آماری با php و mysql

php-chart

همانطور که می دانیم گستره استفاده از زبان برنامه نویسی php در رابطه با سیستم مدیریت پایگاه داده mysql، به ذخیره و بازیابی اطلاعات محدود نمی شود، بلکه به عنوان مثال می توان از اطلاعات موجود، آمار کاملی به دست آورد و آنها را با هم مقایسه نمود و نهایتا نتیجه را بر روی نمودار، به صورت آماری ترسیم کرد، از این شیوه می توان به فرض در نمایش آمار بازدیدها و یا در هر سایتی که با آمار و ارقام سر و کار دارد، استفاده نمود؛ از این رو در این آموزش، کدی کاربردی را قرار داده ایم که علی رغم ساده بودن از نظر کدنویسی و حجم خیلی کم، کاربرد و انعطاف پذیری خیلی خوبی دارد، این کد برای رسم نمودارها و مقایسه آمار داده ها، چه به صورت استاتیک و چه به صورت داینامیک و با اطلاعات موجود در دیتابیس، به راحتی قابل استفاده است.

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


برای استفاده از این کد، تنها کافی است بسته زیر را دریافت و فایل های موجود در آن را به سرور انتقال داده و مطابق با نیاز خود، موارد قابل تغییر را تنظیم کنید.
دانلود اسکریپت رسم چارت و نمودار آماری - حجم: کمتر از 10 کیلوبایت
بسته بالا حاوی چند فایل با نام های graph.php (فایل نمونه برنامه برای تست)، chart.class.php (فایل اصلی برنامه، حاوی توابع و تنظیمات)، style.css (برای اعمال تنظیمات مربوط به استایل و ظاهر) و پوشه تصاویر است.
توضیح:
- برای استفاده از کد، ابتدا فایل chart.class.php را در صفحه مورد نظر وارد کنید (برای مثال ما این کار را در صفحه نمونه، به صورت include_once انجام داده ایم).
- سپس برای اعمال استایل ظاهری مناسب، فایل style.css را هم به صورت آدرس صحیح، در صفحه ایمپورت کنید (می توانید از صفحه نمونه، الگو برداری کنید).
- سپس کافی است مقادیر را برای نمایش آمار، چه از طریق دیتابیس و چه به صورت استاتیک تعیین کنید (در فایل graph.php ما به صورت استاتیک مقادیری را جهت مثال قرار داده ایم) و کلاس displayChart را فراخوانی کنید (این کار نیز به صورت پیش فرض انجام شده است).
محتویات فایل graph.php، جهت نمونه:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ترسیم نمودار با کدهای php</title>
<!--http://webgoo.ir-->
<link rel="stylesheet" href="chart/style.css" />
</head>
<body>
<?php
//ایمپورت فایل اصلی در صفحه
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);
//نحوه استفاده
$mc = new Chart($statistical);
$mc->displayChart('مقایسه آمار - نمایش به صورت عمودی',1,500,250);
?>
</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 $metaSpaceHorizontal = 60; // Total space needed for chart title + bar title + bar value
var $metaSpaceVertical = 60; // Total space needed for chart title + bar title + bar value
var $variousColors;//true or false

function Chart($data){
$this->data = $data;
}
function displayChart($title='', $type, $width=300, $height=200, $variousColor=true){
$this->type = $type;
$this->title = $title;
$this->width = $width;
$this->height = $height;
$this->variousColors = $variousColor;
echo '<div class="chartbox" style="width:'.$this->width.'px; height:'.$this->height.'px;"><h2>'.$this->title.'</h2>'."rn";
if ($this->type == 1) $this->drawVertical();
else $this->drawHorizontal();
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(){
$multi = ($this->height -$this->metaSpaceHorizontal) / $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->variousColors) $color = ($i % 5) + 1;
else $color = 1;
$i++;
echo '<div class="barv">'."rn";
echo '<div class="barvvalue" style="margin-top:'.$b.'px; width:'.$barw.'px;">'.$value.'</div>'."rn";
 echo '<div><img src="chart/images/bar'.$color.'.png" width="'.$barw.'" height="'.$a.'" alt="'.$color.'" />
</div>'."rn";
echo '<div class="barvvalue" style="width:'.$barw.'px;">'.$key.'</div>'."rn";
echo '</div>'."rn";
}
}
function drawHorizontal(){
$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->variousColors) $color = ($i % 5) + 1;
else $color = 1;
$i++;
echo '<div class="barh" style="height:'.$barh.'px;">'."rn";
echo '<div class="barhcaption" style="line-height:'.$barh.'px; width:50px;">'.$key.'</div>'."rn";
 echo '<div class="barhimage"><img src="chart/images/barh'.$color.'.png" alt="'.$color.'" style="width:'.$b.'px; height:'.$barh.'px;" /></div>'."rn";
echo '<div class="barhvalue" style="line-height:'.$barh.'px; width:30px;">'.$value.'</div>'."rn";
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:4px;
border:1px solid #333;
overflow:hidden;
background-color:#f9f9f9;
padding:4px;
}
.chartbox h2{
font-size: 11px;
padding:0px;
margin:10px 0px 0px 0px;
}
/* Vertical chart elements */
.barv{
margin: 2px;
display:inline-block;
float:right;
}
.barvvalue {
padding:0px;
margin:0px;
font-size: 11px;
text-align: center;
}
/* Horizontal chart elements */
.barh{
margin: 4px;
text-align:left;
clear:both;
}
.barhvalue {
padding:0px;
margin:0px 5px;
font-family:Tahoma, Geneva, sans-serif;
font-size: 12px;
text-align: left;
overflow:hidden;
float:left;
}
.barhcaption {
padding:0px;
margin:0px 5px;
font-family:Tahoma, Geneva, sans-serif;
font-size: 12px;
text-align: right;
overflow:hidden;
float:left;
}
.barhimage {
float:left;
}

موارد قابل تنظیم و تغییر در برنامه رسم چارت و نمودار آماری


همانطور که پیش تر گفتیم، این کد با وجود حجم کم و پیچیده نبودن کدنویسی آن، دارای انعطاف پذیری خوبی است، در زیر به مواردی که می توان آنها را تغییر داد و سفارشی نمود، اشاره می کنیم.
- نمایش به صورت عمودی یا افقی: بدین منظور کافی است مقدار صفر یا یک را در هنگام فراخوانی اسکریپت، جایگزین کنید، مثلا فراخوانی کلاس به صورت زیر، نمودار را به صورت افقی نشان می دهد.
$mc = new Chart($statistical);
$mc->displayChart('مقایسه آمار - نمایش به صورت افقی',0,500,250);
و با تغییر مقادیر از صفر به یک، نمودار به صورت عمودی ترسیم می شود.
$mc = new Chart($statistical);
$mc->displayChart('مقایسه آمار - نمایش به صورت عمودی',1,500,250);
- تعداد ستون های آمار: تعداد ستون ها بستگی به تعداد متغیری دارد که به صورت آرایه تعریف می کنید، در مثال پیش فرض، روزهای هفته را در هفت متغیر با آماری فرضی قرار داده ایم.
- تنظیمات ظاهری: تنظیمات ظاهری اصلی برنامه، از طریق فایل css آن (style.css) قابل اعمال است، همچنین در خود فایل chart.class.php، در صورت آشنایی با php می توان تغییراتی اعمال کرد (توصیه می کنیم اگر تسلط لازم را ندارید، از تغییر مقادیر پیش فرض خودداری کنید).
- استفاده از رنگ ثابت یا متغیر: برای استفاده از یک رنگ ثابت در ستون های آماری، باید مقادیر متغیر variousColor را در تابع displayChart به false تغییر دهید (اگر مقدار true باشد، ستون های آمار، هر کدام رنگی اتفاقی خواهند داشت)، این تابع در خطوط اولیه فایل chart.class.php تعریف شده و در حالت پیش فرض مقادیر آن به صورت variousColor=true$ مشخص است.
- استفاده چند باره از کد با تنظیمات متفاوت: از این کد می توانید به هر تعداد که بخواهید، با تنظیمات مشابه استفاده کنید، منتها اگر قصد دارید که چند چارت آماری، اما با تنظیمات متفاوت در یک صفحه داشته باشید، باید توابع را مجددا تعریف و چند قسمت را در تابع جدید تغییر دهید، برای مثال ممکن است در تابع پیش فرض، رنگ انتخاب شده در حالتی که رنگ تمام نمودارها به یک شکل است (variousColor برابر false است)، شماره 1 باشد (قسمت else $color = 1 در تابع drawVertical)، پس برای تابع جدید باید ابتدا نام جدید انتخاب کنید (مثلا displayChart2) و سپس تمام عبارات drawVertical را به drawVertical2 تغییر دهید، به این صورت تابعی جدید با تنظیمات جدید خواهید داشت (در هنگامی فراخوانی نیز، باید نام تابع جدید را فراخوانی کنید).

چگونه آمار را از دیتابیس با php و mysql به دست آوریم؟


آنچه در کد برنامه مورد نیاز است، اعدادی برای مقایسه و ایجاد نمودار آماری است، لذا اینکه این اعداد به چه صورت (داینامیک یا استاتیک) تعریف شوند اهمیتی ندارد، اما در کار با mysql این عدد ممکن است تعداد ردیف ها یا تعداد نتایجی باشد که از یک پُرس و جو به دست می آید، یا ممکن است مقادیر ذخیره شده در فیلد ها باشد، برای مثال درخواست زیر پرس و جویی از mysql می کند و تعداد نتایج به دست آمده را در متغیری می ریزد.
$result = mysql_query("SELECT stats FROM stat WHERE visit < 20")
or die(mysql_error());
$total = mysql_num_rows($result);
کد بالا از جدول فرضی stat ردیف stats را در صورتی که مقادیر visit کوچکتر از 20 باشد انتخاب می کند و تعداد ردیف ها را با تابع mysql_num_rows به متغیر total اختصاص می دهد، اکنون این متغیر و مقادیر آن قابل استفاده در برنامه است، برای مقادیر دیگر نیز به همین شکل می توان اعداد را برای مقایسه با هم به دست آورد.

پیش نمایش برنامه رسم چارت و نمودار آماری با php و mysql


در لینک زیر نمونه ای از پیش نمایش برنامه را با آمار استاتیک قرار داده ایم که می توانید ملاحظه کنید.
پیش نمایش
sectionدسته بندی: آموزش کاربردی » MySQL
related مطالب بیشتر:
» آموزش ساخت پنل ورود و خروج سایت با php و mysql
» صفحه بندی مطالب و محتوا با PHP و MySQL
» آموزش ساخت فرم عضویت در سایت با php و mysql
» آموزش ساخت فرم تماس با php و mysql
» ایجاد لینک دانلود مدت دار با PHP و MySQL
commentنظرات (۱۷ یادداشت برای این مطلب ارسال شده است)
نویسنده: سعید
زمان: ۱۷:۰۶:۲۰ - تاریخ: ۱۳۹۱/۰۳/۳۰
آقا دست گلت درد نکنه خیلی این اسکریپت به دردم خورد یه دنیا ممنونم
پاسخ: 
خواهش می کنیم. از اینکه مطلب مفید واقع شد، خوشحالیم.
نویسنده: فرحناز
زمان: ۱۰:۰۲:۵۵ - تاریخ: ۱۳۹۱/۰۶/۰۴
بي نهايت ممنون بابت اين مطالب ارزنده.موفق باشيد
نویسنده: رضا شیخله
زمان: ۲۱:۵۸:۴۹ - تاریخ: ۱۳۹۱/۰۷/۱۰
سایت بسیار خوبی دارید.
با افتخار لینکتون کردم.
موفق باشید.
پاسخ: 
نظر لطف شماست.
نویسنده: nikdel
زمان: ۱۵:۳۲:۲۳ - تاریخ: ۱۳۹۱/۰۷/۱۶
سلام
مورد آموزش شما بسیار خوب است.
اما یک اسکریپت برای رسم نمودار است که نمودار پویا می سازد
اگه اشتباه نکنم های چارت بود
با تشکر
پاسخ: 
سلام
ممنون از اطلاع رسانی شما، البته برنامه highcharts مبتنی بر jQuery و سایر کتابخانه های جاوا اسکریپت است و نسبت به نمودار فعلی که به php است، معایب و مزایایی دارد، مزیت آن قابلیت های متنوع و کاربر پسند است و عیب آن مبتنی بر جاوا اسکریپت بودن و حجم زیاد در مقایسه با اسکریپت فعلی است.
نویسنده: mohsen
زمان: ۱۰:۳۴:۱۳ - تاریخ: ۱۳۹۱/۰۸/۰۲
با سلام
این مطالب بسار مفید بود
نویسنده: سجاد
زمان: ۰۱:۱۰:۴۶ - تاریخ: ۱۳۹۱/۰۸/۲۱
مرسی از سایت خوبتون امیدوارم هر روز بهتر از دیروز بشه سعی مطالب از این دست در سایت بگذارید
نویسنده: maryam
زمان: ۱۲:۱۶:۳۴ - تاریخ: ۱۳۹۲/۰۲/۱۷
ممنون از مطالب مفیدتون
نویسنده: maryam
زمان: ۱۱:۴۵:۲۸ - تاریخ: ۱۳۹۲/۰۲/۲۲
با سلام
من بعد از پیاده سازی مطالبی که در این قسمت گفتید یه مشکلی با include_once دارم.
خطای
"failed to open stream: no suitable wrapper could be found"
رو بعد اجرای برنامه میده.
خوندم که واسه رفع این مشکل باید allow_url رو در فایل php.ini با on ست کنم چون دیفالتش off
این کار رو کردم error رفع شد ولی همچنان فانکشن chart() رو نمیشناسه و error میده:
"Class 'Chart' not found in"
از طرفی میدونم که on کردن allow_url مشکل امنیتی داره
لطفا راهنمایی کنید
پاسخ: 
سلام
در حالت عادی نیازی به استفاده از قابلیت allow_url در PHP نیست، این قابلیت زمانی کاربرد دارد که بخواهید به طور مثال یک فایل را از سروری دیگر در فایل اصلی وارد کنید، در صورتی که در اینجا باید کل فایل ها را در کنار هم در یک سرور قرار دهید، اگر مسیر قسمت include یا include_once صحیح باشد، کلاس Chart به درستی برای فایل graph.php قابل دسترسی خواهد بود.
برای آشنایی بیشتر فایل نمونه را دانلود و در لوکال هاست تست کنید.
نویسنده: maryam
زمان: ۱۱:۰۴:۵۸ - تاریخ: ۱۳۹۲/۰۲/۲۷
ممنون از راهنماییتون. و ممنون از اینکه جوابمو زود دادین.
من تو شاخه ی htdocs یه فولدر واسه برنامه ام درست کردم و تو شاخه برنامه ام هم زیر شاخه هایی واسه فایل هایی که به هم مرتبط اند و کار خاصی رو انجام میدن تعریف کردم و فکر می کنم آدرس ها رو هم تو کدها درست داده بودم ولی کار نمی کرد و error-ی که قبلا گفته بودم رو میداد.
بعدش اومدم همه ی فایلامو از زیر شاخه ها به شاخه ی اصلی برنامه ام انتقال دادم و آدرس ها رو آپدیت کردم. درست کار کرد!!! ولی نمی فهمم چرا باید با این کار درست کار کنه؟
پاسخ: 
تنظیم آدرس ها در قسمت include برای فایل هایی که در دایرکتوری های مختلف قرار دارند کار حساسی است و باید در این زمینه تجربه نسبی داشته باشید تا دچار مشکل نشوید، به طور مثال فرض کنید چینش فایل ها و فولدر ها در سروری به شکل زیر است:
htdocs
|
chart---->graph.php
class---->chart---->chart.class.php
در اینجا برای قرار دادن فایل chart.class.php داخل فایل graph.php، باید اینچنین نوشت:
include_once('../class/chart/chart.class.php');
علامت .. یعنی یک دایرکتوری از فایل فعلی بالاتر، دایرکتوری class، دایرکتوری chart، فایل chart.class.php.
نویسنده: maryam
زمان: ۱۱:۵۳:۱۷ - تاریخ: ۱۳۹۲/۰۲/۲۸
ممنون از راهنمایی تون
نویسنده: سيد محمود معاشري
زمان: ۱۶:۴۲:۱۲ - تاریخ: ۱۳۹۲/۰۵/۱۱
سلام
خدا خيرت بده. دست گلت درد نكنه. سورس خيلي خوبي بود. خيلي بدردم خورد. ممنونم ازت دوست عزيز
نویسنده: maryam
زمان: ۱۸:۱۹:۳۵ - تاریخ: ۱۳۹۲/۰۷/۱۵
سلام
من از کد شما چندین بار در برنامه ام استفاده کردم تا فرضا نمودارهای ماهانه رو در کنار هم نمایش بدم. نمودار ها زیر هم نشون داده میشه. چطور میتونم تعداد مشخصی از نمودار ها در یک سطر داشته باشم؟
ممنون
پاسخ: 
سلام
اگر منظور از نمودارها، ستون های داخلی (به فرض ستون مربوط به روز شنبه، یکشنبه و...) است، همان طور که در پیش نمایش مشخص است، کد از این نظر مشکلی ندارد و در این صورت ایراد باید از استایل CSS صفحه یا کدنویسی شما باشد، اما اگر منظورتان قرار دادن چندین بلاک نموداری در کنار هم است، برای این کار باید با CSS آشنا باشید و کلاس chartbox را ویرایش کرده و قسمت display:block را به display:inline-block تغییر دهید (ممکن است علاوه بر این و با توجه به محتویات صفحه، نیاز به تنظیمات دیگری باشد).
نویسنده: رهرو
زمان: ۲۳:۵۳:۱۴ - تاریخ: ۱۳۹۲/۰۹/۲۷
سلام
تشکر و سپاس از آموزش های جامعتون
فایل رو در آدرس زیر ریختم:
C:\xampp\htdocs\include_once

و فایل chart.class.php را در صفحه include_once.php ریختم. اما نمیتونم style.css رو ایمپورت کنم و ارور زیر رو میفرسته:
MySQL said: Documentation
#1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '.chartbox {
display:block' at line 2
حالا نمیدونم چکار کنم؟
ممنون میشم جوابم رو بدید.
پاسخ: 
سلام
به نظر خطای دریافتی به پایگاه داده و وجود خطا در پرس و جوها ارتباط دارد نه خود چارت و...، به هر صورت خطایابی و رفع مشکل نیازمند بررسی دقیق و تست حقیقی کدها (در یک سرور یا لوکال هاست) است.
نویسنده: noorblog
زمان: ۰۹:۲۹:۴۴ - تاریخ: ۱۳۹۲/۱۰/۲۶
سلام
بهترین سایت در زمینه سورس و کد میباشد
واقعا ممنون
نویسنده: maryam
زمان: ۲۳:۱۴:۲۷ - تاریخ: ۱۳۹۳/۰۲/۱۰
سلام
میخواستم بدونم آیا امکانی وجود داره که اگر کاربر خواست، بتونه این نمودارها رو در برنامه اکسل هم باز کنه؟
یعنی میشه امکانی قرار داد تا کاربر بتونه داده های همین نمودار ها رو در برنامه اکسل ببینه و از امکانات اون برای برخی از تحلیل ها استفاده کنه؟ اگر این امکان وجود داره ممنون میشم راهنمایی کنید.
پاسخ: 
سلام
این مبحثی جداگانه است و باید داده ها را به یک تابع یا کلاس مخصوص بدهید، برای راهنمایی بیشتر یک کتابخانه رایگان قوی برای ایجاد فایل های اکسل در PHP با قابلیت پشتیبانی از زبان فارسی (UTF-8) وجود دارد، لطفا به سایت زیر مراجعه کنید:
https://phpexcel.codeplex.com
paged صفحه 1 از 2




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

6 × 6
 refresh
آگهی
آموزش طراحی سایت
onliner.ir

فیلم های آموزشی رایگان
درگاه پرداخت
paypaad
استفاده از مطالب و خدمات «وبگو» رایگان است، درگاه پرداخت صرفا برای مواردی است که نیاز به پرداخت هزینه دارند.