شما اینجا هستید: خانه » پی اچ پی » آموزش highcharts با استفاده از php و mysql

آموزش highcharts با استفاده از php و mysql

در برنامه نویسی ساخت چارت از دیتابیس، فاکتور خیلی مهمی هست. چون بدون مشاهده آمارها به صورت بصری درک روند و ارزیابی داده ها برای مصرف کننده خیلی سخت و گاهی غیرممکن میشه.
در این پست قصد دارم به صورت مختصر یک پروژه ساده با اسکریپت highcharts به همراه خروجی گرفتن از دیتابیس mysql بهتون آموزش بدم.

 

highcharts چیست ؟

اسکریپت Highcharts، کتابخانه ای از انواع نمودارهای خطی، دایره ای، ستونی، پراکنده و… است. های چارت با بهره گیری از جاوا اسکریپت و html5 دارای انواعی از طرح های زیبا و کاربرپسند است و با داشتن مستنداتی بسیار قوی، این قابلیت را دارد که به راحتی توسط طراحان و توسعه دهندگان، به کار گرفته شود. (مطالعه امکانات Highcharts)

 

نحوه کار highcharts :
این کتابخانه بر پایه جاوا اسکریپت و جی کوئری نوشته شده و جهت کار با اون، باید از کدهایی استفاده کرد که شباهت بسیاری به زبان json دارند. همچنین، این اسکریپت از طرح های مختلفی برخورداره و هر کدوم از این طرح ها دارای تنظیمات مخصوص به خودشون هستند. هدف ما از این پست، آشنا کردن شما با این اسکریپت در یک مثال rtl شده است. (مطالعه مستندات Highcharts )

 

در این پروژه ابتدا نیاز داریم که دیتابیس mysql رو می سازیم بعد تنظیمات اتصال به دیتابیس رو در با php کدنویسی میکنیم و در نهایت هم در صفحه index.php دیتاهای دیتابیس رو میگیریم و Json میکنیم و اسکریپت رو کانفیگ میکنیم .

– ساخت دیتابیس

– ساخت تنظیمات دیتابیس

– ساخت فایل index.php

در نهایت خروجی کار ما به صورت زیر نشون داده میشه :

 

قدم اول : ساخت دیتابیس

ابتدا یک دیتابیس به هر نامی که دوست دارید بسازید سپس نیاز به ۲ تا table به نام های demo_viewer و demo_click داریم. من براتون sql خود دیتابیس رو میزارم و شما فقط Run SQL کردن در دیتابیس تیبیل و دیتای تست رو میتونید داشته باشید.

ساخت جدول demo_viewer

 

ساخت جدول demo_click

دیتاها شامل تعداد کلیک و مشاهده ها در سال های ۲۰۱۳-۲۰۱۴-۲۰۱۵-۲۰۱۶-۲۰۱۷ هست .

 

قدم دوم : ساخت تنظیمات اتصال به دیتابیس

حالا ما نیاز داریم تنظیمات اتصال به دیتابیسی رو که ساختیم در php انجام بدیم . برای این کار یک فایل به نام “db_config.php” بسازید و کد زیر رو داخلش بزارید :

 

قدم سوم : ساخت فایل index.php

ما توی این فایل میایم ابتدا به ۲ تا جدولمون وصل میشیم و دیتا ها رو میگیریم و Json میکنیم و خروجی Json شده رو به اسکریپ highcharts وصل میکنیم که نمایش بده .

برای این کار یک فایل به اسم “index.php” بسازید و کد زیر رو داخلش بزارید :

 

و درنهایت پروژه رو توسط Wamp و یا Xammp اجرا کنید و خروجی رو مشاهده کنید.

پی نوشت ۱ : شما میتونید bootstrap.min.css و  jquery.js و highcharts.js را دانلود کنید و در کنار پروژه بزارید. در این پروژه هر سه تا فایل از سرورهای cdn خودشون داره فراخوانی میشه و بدون اینترنت نمایش داده نمیشه .

پی نوشت ۲ : براتون فایل ها و دیتابیس پروژه رو هم به صورت zip گذاشتم (دانلود پروژه Highcharts)

 

از سال 87 با php آشنا شدم و تا حدودی باهاش کار کردم. یه مدتیه شروع کردم به کار کردن Laravel و اینجا سعی میکنم نکات و آموزش هایی که در مورد php و Laravel یاد میگیرم رو به صورت مختصر و کاربردی براتون بگم.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *