How to draw Bar Graph using data from MySQL table and PHP | ChartJS

Подписаться 51 тыс.

Просмотров 167 тыс.

50% 1

In this video we will learn to draw Bar Graph using data from MySQL table, PHP and ChartJS.
TUTORIAL LINK: goo.gl/WtP4Us
Next Video: • How to draw Line Graph...
Important Links:
ChartJS: www.chartjs.org
jQuery: jquery.com
XAMPP: www.apachefriends.org/index.html
MAMP: www.mamp.info/en/
Tell me which video should I make in the comments :-)
Find me on
===============
facebook / yusufshakeel
twitter / yusufshakeel
google+ plus.google.com/+YusufShakeel
pinterest / yusufshakeel
website www.yusufshakeel.com
DYclassroom
www.dyclassroom.com
Algorithm Playlist
goo.gl/Z89n9o
Data Structure Playlist
goo.gl/Eu4vDh
Floyd's Algorithm
• Floyd's Algorithm - st...
Heap Sort
• Sorting Algorithm | He...
Quick Sort
• Sorting Algorithm | Qu...
Radix Sort
• Sorting Algorithm | Ra...
Shell Sort
• Sorting Algorithm | Sh...
Counting Sort
• Sorting Algorithm | Co...
if you find my videos interesting and enjoy watching them then please give a thumbs up, share and subscribe my channel and comment.
Subscribe my RU-vid channel
goo.gl/cFA9in
thanks for watching
see you in the next video
stay happy and keep smiling :-)

Опубликовано:

25 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 238

@n0stalgic476 6 лет назад

i know i swore at u yesterday, but its been a rough few nights trying to code this. Finally it fucking works..Omg , thank you so much. You have no idea the hardships i went through on google. Plus i did all this using linux command line! Cheers bro

@mariochristopher9210 7 лет назад

You are a great teacher! Thank you for this tutorial!

@nicolasmetivier2625 7 лет назад

It's just perfect. Fantastic explications.

@happy-shorty 7 лет назад

The best of all learning tutorial. Thank you so much :)

@rexeocampo 6 лет назад

Thank you for this video, it helps me alot in our capstone project, keep it up.

@j_nkindi 7 лет назад

Thanks very very much I just spend two days doing research on that and this really helped in only 30 mins. Thanks again. God Bless You

@yusufshakeel 7 лет назад

thanks for watching :-)

@y_thedreamer95 7 лет назад

Excelent tutorial dude! Keep going like this... Admirable....Greetings from Colombia.

@texturizer6224 6 лет назад

Thank you so much. My only advice to you guys who are having problems is to VERY carefully review your code, and use the developer tool in chrome to highlight any errors.

@AnteZivkovic 5 лет назад

Thank you very much for your tutorials. This video got me started with javascript charting.

@bonamollo 5 лет назад

thanks. good simple step-by-step tutorial

@panagiotis9688 7 лет назад

This is a good tutorial man!

@FabricioEGiovanni 6 лет назад

Hey Yusuf, great video! Thank you very much!

@ssavva2027 6 лет назад

Thanks! Works Great!

@AndrewKwabula 7 лет назад

Certainly helpful bro

@genrecsoguilon8972 6 лет назад

your tutorials are awesome man thumbs up !!!

@stet184 7 лет назад

Good video, thanks for sharing the knowledge!

@bewithusksoo4464 5 лет назад

Thank you, you really saved my life ❤

@shiinamashiro2021 5 лет назад

Thankiu brother, you're the MVP

@poornig2852 7 лет назад

Thanks for the vedio

@gamrayoussef5515 6 лет назад

Thank you so much for your help

@SrBrotherss 5 лет назад

Really worked for me, thanks!

@sharifabahar6257 6 лет назад

Thank you so much. It was really useful. Keep up to do more videos plz.

@MrCamdere 5 лет назад

Great !! Thanks a lot Panji :)

@joseluisfernandez5981 3 года назад

Really helpful. Thank you so much!

@kamathaesi 7 лет назад

Please do keep on share your videos...Long live

@adrianocelio3092 5 лет назад

Thank you Mr. Yusuf Shakeel .

@FixiousMaximus 7 лет назад

Very nice. Got me on the right track.

@pritamdas-ij5br 6 лет назад

your uploaded video is awesome . It helped me a lot Thanks bro

@thejohncena09 8 лет назад

waw Yusuf you are speaking :D Good Job!

@yusufshakeel 8 лет назад

+Sasha D thanks :-)

@mk48sz33 4 года назад

Hello. Thanks for the tutorial. For some reason, my player and score get stored as 'undefined' in my two arrays. Therefore, as a result, nothing shows on the graph, and the x-axis has a lot of 'Undefined' labels. Can you please advise?

@isocialhibro898 7 лет назад

Thank you it works like a charm and + 1 sub

@yusufshakeel 7 лет назад

thank you :-) you can get the code here github.com/yusufshakeel/chartjs/tree/master/php-mysql-chartjs

@TheRitcherit 6 лет назад

it'work thanks.

@Mr.Albertos 6 лет назад

Thanks very much!

@EvelynMendez1702 7 лет назад

Muchas gracias, fue de gran ayuda :D

@lacrabotoficial5629 2 года назад

jalabola

@ahmedalshaikhli1886 7 лет назад

Thank you so much great job, and i have one quistion plz, i need to create Dashboard from mysql data include date filter could you help me with that please.

@nurulsyahidaayza7562 7 лет назад

Hi.. Thanks for the tutorial.. Do you have any tutorial on using the data from text file (notepad, excell, etc) instead of using database to create those graph? I manage to display the data in tables/text using data from textfile, however i need to output some data in the form of graph for my admin page. Any suggestion would help.Thanks in advance for ur time :)

@isaacquarshie2563 4 года назад

THank you very much, i appreciate

@kamathaesi 7 лет назад

Excellent video. Thanks a lot. It helped me a lot to design my chart.

@yusufshakeel 7 лет назад

thanks for watching :-)

@erickdelgado6784 7 лет назад

hello, im having a problem, i can only see my chart on my computer localhost , if i try to visualize it on other devices it only shows a blank space :c . do you have an idea of what could be the problem? thanks, great tutorial btw

@francisgill9455 7 лет назад

hello dear shakeel its really helpful video thanks for that one thing i wanna ask can i show data according to current date

@guelorirankunda2377 8 лет назад

thank you so much Yusuf, this will help me ... it came as a bday present ... again thank you for the tutorial as a response to my quest, may GBU and your works. let me check your web

@yusufshakeel 8 лет назад

+Guelor Irankunda thanks for commenting and watching and please share with your friends if you find my videos and my website helpful. and happy birthday :-)

@afriinfo 7 лет назад

great, but how do you add color for different columns?

@vksoniofficial 6 лет назад

Thank you so much for this video. I am a beginner. Please suggest me tutorials to learn js

@JellyJofool 7 лет назад

Its working! But may I know how to get the the mysql statement from user? For example, select * from tables where id = [user input];

@sheikmeerans2651 8 лет назад

super video :-)

@dawoodchaudary8736 8 лет назад

I have followed the same code with ur table but am not getting the result table is not showing need help bro

@charlesbaldo 6 лет назад

Thank you Because you used AJAX I was able to use with MVC5 SQL server just needed to get C# Ajax call

@Mr.StrangeVision 4 года назад

Thanks Yusuf bhai

@erickalonsoangel4860 3 года назад

very good video helped me a lot greetings you deserve my subscription

@iamziera4089 5 лет назад

did you have stacked bar graph tutorial?

@xvcats 6 лет назад

Hey Yusuf, thanks for the code, its exactly what i was searching for. I have one question for you: How can I change the color of only one bar. For exampel, I want the color of Player 3 to be red. How can I do this? Thanks a lot!

@yusufshakeel 6 лет назад

hope this helps goo.gl/iWW6gD check chartjs 2.x playlist ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-UNiyUIpz4kE.html

@marekw3017 7 лет назад

Hi, very helpful video - Thanks! But now I have small problem. How to make Line Chartjs with 4 lines from 4 different arrays? Thank for help.

@npcsolution9493 8 лет назад

Excellent!.

@dawoodchaudary8736 8 лет назад

I have followed the same code with ur table but am not getting the result table is not showing need help

@empase-tuktutuk1957 7 лет назад

Do you have an emel? i wanna need some of your help

@yasirtahirkheli74 7 лет назад

quite a useful tutorial but it would have been even more useful and instructive if you described all the steps as you were going along...you did mention a few but not all...anyways, was quite a clear and easy in the first place...i appreciate your effort

@harvykevincuyno6753 7 лет назад

do you have a tutorial on real time graphs??

@anavela432 7 лет назад

Buenas Tardes, por favor me podria ayudar, tengo una lista y cada vez que eligen una opcion de la lista se genera una grafica de barras, pero cada vez que me posiciono con el cursor sobre las graficas me muestra la opcion que elegi pero tambien me empieza a mostrar las graficas que anteriormente habia elegido, ya intente con el clear canvas pero no me ha funcionado, usted que me recomienda???

@masterofkebabs 5 лет назад

Thank you so much man!!! Btw the exact code in the video didn't work for me so if you're getting a console error back saying "chart.js Failed to create chart: can't acquire context from the given item" then go into the app.js file and change var ctx = $("#mycanvas); to var ctx = document.getElementById("mycanvas"); Hope that helps someone!

@eyanakach6679 4 года назад

for php do you recommend easyphp ?

@vishalmohan1995 2 года назад

Good tutorial!. I need assistance in creating a similar hourly chart . Instead of players along 'x' axis , I need hours ('0', '1', '2', ......'24') along x axis and count (autoscale) along 'y' axis. I have an sql record with column 'count' with data '1' getting added in a new row with timestamp for every count of data. so under column 'count', the data is (1,1,1,1,1,1....) with corresponding timestamp. i need to display this data in a hourly chart with hours along 'x' axis and count along 'y' axis.

@markacquaisie4659 7 лет назад

how do I get it to work? And thanks for this amazing tutorials

@andreielekes 7 лет назад

where did u get code for data.php ?

@gurugovindgarg3771 7 лет назад

i am making project on angularjs and spring so how i can access data from mysql for bar chart without using php code

@SaurabhNalamwar 6 лет назад

Tired of writing? All source code and file here goo.gl/M2Pg6g :)

@davidanafamudii7323 6 лет назад

thanks now i can view the video and practice it efficiently. :)

@cd78 2 года назад

Thank you for doing this

@rajpurohitnikita7248 2 года назад

Can you plz share the link for downloading jQuery because when I link on it it opens up a page source

@TheSats03 7 лет назад

sir, lets playerid have other column like score1,score2,score3 sand score 4 . what i have to do to draw bargraph of these score only..plz help me sir

@helwinhedryan8071 5 лет назад

sir, i have a doubt. i followed the steps and its working fine. but i introduced a text box from which the player name will be taken and only for that particular player the graph must be shown. but its not working. the json is working...but the chart is not getting displayed... plss reply

@yeshwanthallampati9460 5 лет назад

Thanks bro

@yusufshakeel 5 лет назад

Welcome :-)

@anbhav1 6 лет назад

Hi Yusuf, Your video was really useful.Thanks for the video.But i am getting this error when i try to load charts.html Uncaught ReferenceError: data is not defined. can u plz help?

@tanishasethi4441 4 года назад

thank you!!!!!!!

@nathanmutai1861 4 года назад

Hey most recent OP, where you able to download the Jquery directly cause when ii clicked, Download the compressed, production jQuery 3.5.1, I didn't get a zip it just redirected me to some random lines of code?

@nathanmutai1861 4 года назад

nvp, OP, I figured it, Click on link and right click then save as Just in case anyone gets stuck.

@adeguntoro 7 лет назад

can i implement this method for Firebase ?

@sarthakshah9698 6 лет назад

Hi yusuf..this is a very good tutorial ..can you tell me if i need to add different colors to the each bar how can i do that?

@yusufshakeel 6 лет назад

hope this helps www.dyclassroom.com/chartjs/how-to-create-multi-color-bar-graph-using-chartjs using ChartJS 2.x

@J_yung_ 6 лет назад

Can I use content delivery network instead of downloading the min is file?

@yusufshakeel 6 лет назад

yes

@carapix6462 3 года назад

I keep getting this error in the data.php file, please help me: foreach() argument must be of type array|object, bool given in

@rejectedsingles 4 года назад

Sir can you please help me for adding 2 graph from 2 different tables

@roshanpoudel4506 7 лет назад

how to get multiple data using different ids and display in graph?

@worstgeneration286 6 лет назад

hey why Download the compressed, production jQuery 3.3.1 that file cant be dowload can you pass me your file like that

@clerdsonjuca3823 6 лет назад

is work with express for me

@coxonuo84 7 лет назад

Is not woirking for me, the chart comes up but it says "player undefined" at the bottom of the chart.

@kaitha7626 7 лет назад

Hi Ricardo, did you solved this problem on yours? I am having the same problem. Please help.

@GTPhil91 7 лет назад

in app.js -> where you want -> var datajson = JSON.parse(data); for example

@destinynumber4471 7 лет назад

where do I need to put JSON.parse(data)

@destinynumber4471 7 лет назад

really need help. ?Thank you

@muhammadawais8539 6 лет назад

thanks brother its worked for me :)

@markushammerschmid6652 7 лет назад

Problem: Ajax works now, but now it does not save it as an array, but writes out in the console as it does in the data.php.. Do you have a soloution for this?

@fernandorios885 7 лет назад

I don't know if you need help, but you have to add dataType: "json" after the error function. Regards

@tangaye 7 лет назад

Man, after hours of losing hairs, I'm just seeing your comment. Works perfectly for me. Thanks a lot.

@MrWildfire1301 7 лет назад

im just trying this now, but i dont really understand putting dataType:"json" after error function, does it mean within the error function? because i have the same issue

@MrWildfire1301 7 лет назад

nevermind, it was a simple syntax error on my part!

@franky_fg8430 7 лет назад

Where did you put dataType: "json"? I keep having problems and cannot find the place to put it on

@TheAltair150 7 лет назад

how can i make my graph starts from 0 ?

@HG-mt3vl 7 лет назад

how do I change the colour of graph labels, long legs ||,

@MarcosEsqueda 7 лет назад

In JS file i have a string value, not an array :S . Console.log(typeof data)..... String

@ryangallardo3027 6 лет назад

the legend in the top label where u can toggle the bar graph is not appearing in my chart, except that everything is fine.

@rishabhsharma7207 6 лет назад

how to fetch data from phpmyadmin instead of mysql workbench

@RajashekarYoutubeChannel 7 лет назад

in console i can see below errors. * XMLHttpRequest cannot load localhost/data.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. ** app.js:37 Object {readyState: 0, responseText: "", status: 0, statusText: "error"}

@khalilneffati1403 7 лет назад

hi...pls why the Output of data.php tel me [null,null,null,null,null]

@qiuhanmeng8601 7 лет назад

Hi, your video is so helpful. But my html can not receive the data from js, but the .php can show the like you show. Can you help me out? Thank you so much

@yusufshakeel 7 лет назад

here is the code: github.com/yusufshakeel/chartjs/tree/master/php-mysql-chartjs Or you can also check out the latest code: github.com/yusufshakeel/chartjs2 hope this helps.

@rodrigoruizdiaz8352 7 лет назад

Hey body, nice and useless work!! I have a litle problem with another kind of SELECT.. I want to send the data of a SUM(column), but i can send with him, please help

@akashsingh-sn2hl 6 лет назад

Can we download this graph as well

@yusufshakeel 6 лет назад

Right click on the chart and I hope there will be an option "Save Image As" which will save the chart as an image. Or look for FileSaver.js project on GitHub. Hope this helps. Have fun coding :-)

@hinapeerzada1053 7 лет назад

Sir data.php is working properly but graph is not appear in bargraph.html .... there is no output in graph.php ... kindly suggest me how to solve this error

@madroxgaming9594 5 лет назад

How to count and generate chart

@westfield90 6 лет назад

Sorry for being a novice but how does Print Json_encode ($data) produce a data.php. Mine prints to the screen when I run the main program with the code. There is not external data.php created

@westfield90 6 лет назад

Ignore my question. I had to go back and watch the video again. Thank you

@markacquaisie4659 7 лет назад

Hi Yusuf, tried the code with my data and even though i get the array logged when I open the console, I just can not get the graph to appear on the barchart.html

@yusufshakeel 7 лет назад

hope this helps github.com/yusufshakeel/chartjs/tree/master/php-mysql-chartjs

@takezo3895 6 лет назад

Hello, thank u for tutorial, but i have some problems with ncaught SyntaxError: Unexpected token < jquery.min.js:1 Chart.min.js:1 Uncaught SyntaxError: Unexpected token < app.js:1 Uncaught ReferenceError: $ is not defined at app.js:1 how fix it? U say update repository .js but i cant, i sucks in this...can u help me??? please

@takezo3895 6 лет назад

I made it! thank u :-*

@RuLLee02 8 лет назад

Hi Yusuf, i followed this tutorial and create multiple chart, bar and line, can u help me with this problems ( fill color of bar chart not working, how to make my charts responsive, and how to remove fillcolor of background line graph..) Thanks

@yusufshakeel 8 лет назад

i hope this will help www.chartjs.org/docs bar chart: www.chartjs.org/docs/#bar-chart-data-structure to make chart responsive: www.chartjs.org/docs/#chart-configuration-common-chart-configuration line graph www.chartjs.org/docs/#line-chart-data-structure

@RuLLee02 8 лет назад

Thanks for the help sir Any idea about this (showXLabels)? is this supported in 2.0 up version? i want to show only 5 labels in my graph.. any idea or manual code, since our labels coming from database

@dawoodchaudary8736 8 лет назад

Yusuf bro i am getting an error unexpected encode its not printing the data in json format

@yusufshakeel 8 лет назад

check the error log and header

@yusufshakeel 8 лет назад

here is the github repo link github.com/yusufshakeel/chartjs/tree/master/php-mysql-chartjs hope you find it useful

@Zeno181011 7 лет назад

Hello, I tried followed the tutorial and had no chart appear despite having the object being displayed in developer tools.

@yusufshakeel 7 лет назад

hope this helps github.com/yusufshakeel/chartjs/tree/master/php-mysql-chartjs

@ayoubbelouati5941 5 лет назад

i have probleme with negative data on the chart

@bamajoe411 7 лет назад

When I download the Chart.js-master.zip mine does not contain a dist directory like yours does in the video

@yusufshakeel 7 лет назад

hope this helps github.com/yusufshakeel/chartjs/tree/master/php-mysql-chartjs js folder contains the chartjs file.

@bamajoe411 7 лет назад

Thank you so much!

@billyu4580 8 лет назад

Hi Yusuf, I'm running into some problem with my implementation... Console says: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. Could you please let me know what I did wrong?

@yusufshakeel 8 лет назад

i hope this stackoverflow question will be helpful stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work if you can share your code on jsfiddle.net/ then may be i can try to find out the error. and you can even ask question relating to coding on stackoverflow. most of the common issues that we encounter in computer projects are already solved/answered on stackoverflow. thanks for the comment. and thanks for watching :-)

@billyu4580 8 лет назад

Thank you Yusuf! It's already solved. The solution was to add a header declaration in the PHP file to allow Access Control.

@yusufshakeel 8 лет назад

Great :-)

@mudassirabbasi4392 7 лет назад

bro i get array but grpah is not showing to me please help me i checked ur comments but didnt find any solution

@yusufshakeel 7 лет назад

check my github repo hope it helps github.com/yusufshakeel/chartjs/tree/master/php-mysql-chartjs you can also check the new videos on chartjs if you want ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-DhHeF7LKsyc.html