HomeОбразованиеRelated VideosMore From: Prof Dr Sabri Erdem

Creating Dashboards Using Google Charts. PHP, and MySQL Database (Subtitles Added)

395 ratings | 139219 views
I recommend you turn on the Subtitles for understanding better.
Html code for embedding videos on your blog
Text Comments (93)
이승환 (3 months ago)
Great, Thanks~
jeanne luces (4 months ago)
what if the data needed to be graphed came from combination of tables? thank you.
Mohamed Osman (2 months ago)
Perhaps consider creating a view that contain all your data in one place?
Anis Suraya (5 months ago)
hello, how can i get this code?
Prof Dr Sabri Erdem (5 months ago)
Dear Anis, As you watch and see the explanations in the subtitle, there is no code too much here. You can write down yourself easily. Good luck.
Ahmad Nabil (7 months ago)
hi sir. can i get the code ?
Prof Dr Sabri Erdem (7 months ago)
No need to get any code. Just watch and read the instructions please.
Hani Varoqua (8 months ago)
Good job.
Daniel de Windt (8 months ago)
What is the name of the songs? It is nice
Daniel de Windt (7 months ago)
Ok for the one person who put a thum-up.... I found it! Eric Satie - 3 Gymnopédies (1889): No. 3: Lent et grave https://www.youtube.com/watch?v=5pyhBJzuixM&t=1305s
Binary Code Software (9 months ago)
excelent tut prof. congratulations
Amit Chandrakar (1 year ago)
you should put code also ....
Prof Dr Sabri Erdem (1 year ago)
Amit Chandrakar all things you need are in the video
Manju M (1 year ago)
could you pls email the code to [email protected]
Prof Dr Sabri Erdem (1 year ago)
Manju M Dear manju no need to send a code since They were all autogenerated codes as 90 percent.
Ranvir singh (1 year ago)
Great Tutorial!! Thank You. Can I ask you how can I add a horizontal target line on the area chart?
Ranvir singh (1 year ago)
Prof Dr Sabri Erdem Thank you so much for reply. I will have look and let you know.
Prof Dr Sabri Erdem (1 year ago)
Hi dear, thank you for your response. we are limited by Google's API functionalities. Please check them in their web guide. Inform me later please. Good luck.
Wilfredo Mendez (1 year ago)
Excellent tut, thanks
Serdar Polat (1 year ago)
Parmaklarına sağlık 👍
sajini mucherla (1 year ago)
Hi,This tutorial really helped me a lot  but I was unable to align those graphs to rightside all they were lying on the same side. Can you please help me regarding this??
Abdoel Haris (1 year ago)
I like this... can you please send the code to my email : [email protected] thank you in advance
Omforen Indonesia (1 year ago)
Prof. could you give me source code so i can implement in my computer
Moe Lalati (1 year ago)
i found a similar, less complicated solution, only tested on Pie Charts now for dynamic allocation
Moe Lalati (1 year ago)
i've some questions, is this post still alive ?
Moe Lalati (1 year ago)
Thank you, got it sorted out
Sabri Erdem (1 year ago)
yes?
Mohamed Mohamed (1 year ago)
Without code is useless
Muhammad Shahizuddin (1 year ago)
thanks for this tuts, old man... ahaha, your music selection need to be improved.. :D
Rich Williams (2 years ago)
wish this had voice on it,, find it hard to wach a screen with no chat
Hugo Ibáñez (2 years ago)
canyou send me the code pls ???
Shivaji Kushare (2 years ago)
mail the code [email protected] please
Shivaji Kushare (2 years ago)
sir mail the code mi
SANJIV RAI (2 years ago)
how did u link mysql data in ur html website?? you just had ready made databases and showed how to add vales(we all know that) show us how to link them
Nick carrjim (2 years ago)
where is the lick to download?
duong nguyen (2 years ago)
Please. Can you help me. I want to draw another air line, but I do not know where wrong, but could not draw chart. <?php $servername = 'localhost'; $username = 'abc'; $password = 'xxx'; $dbname = 'abc'; $mysqli = new mysqli($servername, $username, $password, $dbname); if($mysqli->connect_error){ die("Connection failed: ". $mysqli->connect_error); } $query = "SELECT * FROM data_zigbee"; $qresult= $mysqli->query($query); $results = array(); while ($res = $qresult->fetch_assoc()) { $results[] = $res; } $line_chart_data = array(); foreach ($results as $result) { $line_chart_data[] = array($result['timeupload'],$result['humidity'],$result['temperature']); } $line_chart_data = json_encode($line_chart_data); mysqli_free_result($qresult); mysqli_close($mysqli); ?> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1',{'packages':['corechart'] } ); google.setOnLoadCallback(drawAnnotations); function drawAnnotations(){ var data = new google.visualization.DataTable(); data.addColumn('string', 'Date'); data.addColumn('number', 'Humidity'); data.addColumn('number', 'Temperature'); data.addRows(<?php echo $line_chart_data?>); var options = { width: 600, height: 400, legend: { position: 'top', maxLines: 3}, line : {groupWidth: '75%'}, isStacked: true }; var chart = new google.visualization.LineChart(document.getElementById('line_chart_div')); chart.draw(data, options); } </script> </head> <body>a <div id='line_chart_div'> </div> </body>
aisyah caca (2 years ago)
how to download dashboard that youve downloaded under your screen? im little bit confused when you open your application (i mean dreamwaver) and then there are so many chart. how can be like that? thankyou for respon sir.
Katsumotoyeah (2 years ago)
could you send the codes to [email protected] thanks.
Prof Dr Sabri Erdem (2 years ago)
Hi, In fact, no need to post any code, that's all as you see in screen. Good luck!
Peter Hurk (2 years ago)
My only ran the piechard the barchart does not appear...
Prof Dr Sabri Erdem (2 years ago)
Hi did you fix your problem? Indeed there should not be a issue changing chart types if you change all required identifiers as in video tutorial.
marcos jardim (2 years ago)
please, post php code ...
Prof Dr Sabri Erdem (2 years ago)
Hi, No need to post any code, that's all as you see in screen.
Ghouili Zied (2 years ago)
good , can you send this code to my email at [email protected]
Jesus Life (2 years ago)
nice tutorial~! but the background music drove me sleepy within the first 5 min.. let me advice a more dynamic song given that there's no voice explaining/following the instructions.
https://www.youtube.com/watch?v=N36mFdkwyEc
Prof Dr Sabri Erdem (2 years ago)
I can change the background music. On the other hand, Same response as to others for adding voice: I consider to add voice but in this case, people in my country may have a difficulty to watch it If I put voice in English. Or vice versa! Hard situation! :)
antonio rasenfulli (2 years ago)
nice tutorial, what is the title of the song in the background?
Pramod Khandalkar (2 years ago)
where is the code?????????????
Pramod Khandalkar (2 years ago)
hm
Prof Dr Sabri Erdem (2 years ago)
Hi, No need to post any code, that's all as you see in screen.
jiansheng ding (2 years ago)
Feel so sad to watch the tutorial , why this background.
Prof Dr Sabri Erdem (2 years ago)
Any musical suggestion? It should not be copyrighted!
Mar kus (2 years ago)
it's a nice tutorial but a little much on one video
Prof Dr Sabri Erdem (2 years ago)
Thank you. I will try to extend it in the next semester.
Mar kus (2 years ago)
i had 2 problems the first was nowhere was JQuery integrated the second was this: data.addRows({$pie_chart_data}); there we are trying to use a php variable in javascript and it dind't worked for me here is the (for me ) working code for a pieChart made with a xampp server: <head> <?php $servername = 'localhost'; $username = 'root'; $password = ''; $dbname = 'charts'; $mysqli = new mysqli($servername, $username, $password, $dbname); if($mysqli->connect_error){ die("Connection failed: ". $mysqli->connect_error); } $query = "select * from piechart"; $qresult= $mysqli->query($query); $results = array(); while ($res = $qresult->fetch_assoc()) { $results[] = $res; } $pie_chart_data = array(); foreach ($results as $result) { $pie_chart_data[] = array($result['status'],(int)$result['num_patients']); } $pie_chart_data = json_encode($pie_chart_data); mysqli_free_result($qresult); mysqli_close($mysqli); ?> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1.0',{'packages':['corechart'] } ); google.setOnLoadCallback(drawChart); function drawChart(){ var data = new google.visualization.DataTable(); data.addColumn('string', 'Age Range'); data.addColumn('number', 'Number'); data.addRows(<?php echo $pie_chart_data?>); var options = { title: ' ' }; var chart = new google.visualization.PieChart(document.getElementById('pie_chart_div')); chart.draw(data, options); } jQuery(document).ready(function(){ jQuery(window).resize(function(){ drawChart(); }); }); </script> </head> <body> <div id='pie_chart_div'> </div> </body>
Faye (1 year ago)
savior
AKARAPU HARISH (1 year ago)
thaks
duong nguyen (2 years ago)
Thanks!
Mar kus (2 years ago)
line chart (another db ) <?php $servername = 'localhost'; $username = 'root'; $password = ''; $dbname = 'aktienkurse'; $mysqli = new mysqli($servername, $username, $password, $dbname); if($mysqli->connect_error){ die("Connection failed: ". $mysqli->connect_error); } $query = "SELECT * FROM `^gdaxi` ORDER BY `Date` ASC "; $qresult= $mysqli->query($query); $results = array(); while ($res = $qresult->fetch_assoc()) { $results[] = $res; } $line_chart_data = array(); foreach ($results as $result) { $line_chart_data[] = array($result['Date'],(double)$result['AdjClose']); } $line_chart_data = json_encode($line_chart_data); mysqli_free_result($qresult); mysqli_close($mysqli); ?> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1',{'packages':['corechart'] } ); google.setOnLoadCallback(drawAnnotations); function drawAnnotations(){ var data = new google.visualization.DataTable(); data.addColumn('string', 'Date'); data.addColumn('number', 'AdjClose'); data.addRows(<?php echo $line_chart_data?>); var options = { width: 600, height: 400, legend: { position: 'top', maxLines: 3}, line : {groupWidth: '75%'}, isStacked: true }; var chart = new google.visualization.LineChart(document.getElementById('line_chart_div')); chart.draw(data, options); } </script> </head> <body> <div id='line_chart_div'> </div> </body>
Mar kus (2 years ago)
bar chart: <?php $servername = 'localhost'; $username = 'root'; $password = ''; $dbname = 'charts'; $mysqli = new mysqli($servername, $username, $password, $dbname); if($mysqli->connect_error){ die("Connection failed: ". $mysqli->connect_error); } $query = "select * from barchart"; $qresult= $mysqli->query($query); $results = array(); while ($res = $qresult->fetch_assoc()) { $results[] = $res; } $bar_chart_data = array(); foreach ($results as $result) { $bar_chart_data[] = array($result['utilization'],(int)$result['used'],(int)$result['free']); } $bar_chart_data = json_encode($bar_chart_data); mysqli_free_result($qresult); mysqli_close($mysqli); ?> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1',{'packages':['corechart', 'bar'] } ); google.setOnLoadCallback(drawAnnotations); function drawAnnotations(){ var data = new google.visualization.DataTable(); data.addColumn('string', 'utilization'); data.addColumn('number', 'free'); data.addColumn('number', 'used'); data.addRows(<?php echo $bar_chart_data?>); var options = { width: 600, height: 400, legend: { position: 'top', maxLines: 3}, bar : {groupWidth: '75%'}, isStacked: true }; var chart = new google.visualization.PieChart(document.getElementById('bar_chart_div')); chart.draw(data, options); } jQuery(document).ready(function(){ jQuery(window).resize(function(){ drawChart(); }); }); </script> </head> <body> <div id='bar_chart_div'> </div> </body>
Enrico Webers (2 years ago)
The music! It drives me mental!
Prof Dr Sabri Erdem (2 years ago)
Any suggestion? It should not be copyrighted!
lamiss lina (2 years ago)
can you please mail the code to : [email protected] . Thank you in advance.
zbysiusp 1 (3 years ago)
Can you please mail the code to [email protected]?
can you please mail the code to [email protected]
Ladi Oyekanmi (3 years ago)
Pls, mail this code to [email protected] Thanks
An Gel (3 years ago)
can you please send your code to [email protected] thanks in advance
dill peters (3 years ago)
did any one get this code
dill peters (3 years ago)
can u please email the code [email protected]
Sajjad Ali Abro (3 years ago)
if its possible will you please send the code on [email protected]
Raj Shah (3 years ago)
Could someone send me the code to [email protected], please?
jacinto016 (3 years ago)
gracias por la ayuda
broto siswanto (3 years ago)
can you send me the code please...... [email protected]
Me puedes enviar el codigo? porfavor, [email protected]
sharif abdullah (3 years ago)
please send [email protected]
Lerato Selemela (3 years ago)
Hi Dr Erdem, can you please email me the source code to [email protected] Thank you
Ronaldo Pagbunucan (3 years ago)
I like this... can you please send the code to my email : [email protected] thank you in advance
Samuel Njihia (3 years ago)
Anyone with this code yet ???
Prof Dr Sabri Erdem (2 years ago)
Hi, No need to post any code, that's all as you see in screen.
Samuel Njihia (3 years ago)
Please email the code to [email protected]
Avinash Paritala (3 years ago)
can you please mail the code to [email protected]
Prof Dr Sabri Erdem (2 years ago)
Hi, No need to post any code, that's all as you see in screen.
Morteza Nasi (3 years ago)
+Avinash Paritala Did he send you the codes?
hiem seyha (3 years ago)
please send code to my email: [email protected] thank you in advance
Prof Dr Sabri Erdem (2 years ago)
Hi, No need to post any code, that's all as you see in screen.
adverta CS (3 years ago)
please send code to my mailas as well, [email protected] thank you
Prof Dr Sabri Erdem (2 years ago)
Hi, No need to post any code, that's all as you see in screen.
Roy Jose (3 years ago)
send code to my mail
Prof Dr Sabri Erdem (2 years ago)
Hi, No need to post any code, that's all as you see in screen.
LiviaCarol Gouvêa (3 years ago)
Excellent tutorial , thank you very much!
Prof Dr Sabri Erdem (2 years ago)
Happy to hear that! :)
Sabri Erdem (4 years ago)
This video is generated by Kacem Abdullah for demonstrationg some outputs of in-Semester studies of Decision Support Systems Design and Implementation PhD course.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.