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

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

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

50% 1

In this video we will learn to draw Line Graph using data from MySQL table, PHP and ChartJS.
TUTORIAL LINK: goo.gl/JDXags
Previous Video: • How to draw Bar Graph ...
Important Links:
ChartJS: www.chartjs.org
jQuery: jquery.com
XAMPP: www.apachefrie...
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.co...
pinterest / yusufshakeel
website www.yusufshakee...
DYclassroom
www.dyclassroo...
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 :-)

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

6 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@BrandonGable1 7 лет назад

I don't comment often on RU-vid videos, but THANK YOU! This was so easy to follow and I was able to adapt it to my needs perfectly. THANK YOU!!!

@rastislavhalko2931 5 лет назад

i'm getting a HTTP Error 500 from my php code for some reason

@SanjeevBeekeeper 8 лет назад

Many of us get the error undefined. Here's the solution. Before the var userid = []; in the linegraph.js file. Add this line data = JSON.parse(data); Thanks to Umair to finding out this.

@Cleggy1012 8 лет назад

Thank you!

@MarcosEsqueda 7 лет назад

I can´t see the lines on the graph. :S

@fikrisalahudin3387 7 лет назад

thank you for the answer

@coskier 7 лет назад

Still now work for me. I just got an empty chart with x-axis "unefined" and y-axis from 1 to -1. But thanks anyway

@muhammadbilalkhan1408 7 лет назад

thanks for the error solution :)

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

Awesome tutorial...clear, concise, easy for a newbie like me to understand. Not everybody can teach. THANK U! Subscribed!

@floriannotar4034 7 лет назад

Perfekt Video!! no more words.

@viralpatel1522 7 лет назад

Dude, thank you so much for the guide. Your video saved me lot of work. Thank you once again.

@zaheensiddiqui1704 5 лет назад

Excellent Tutorial and Great Help for the beginners like me!! I am gonna try this code tomorrow and see if I can implement it without any error.

@forester1 Год назад

Good job

@jeratanaka 5 лет назад

thanks a lot, but how can i make this chart dynamic so that it updates after 30s in case if they is new data in the database

@eugenioortiz1043 5 лет назад

You use the setInterval() method

@MegaZeeshanbutt 7 лет назад

Did you make any video on candel stick chart same work which you done with line graph . i want to make candel stick chart by get value from mysql table,PHP .Please tell me how could i do this..????

@WhistlerInstructors 6 лет назад

I am having trouble with the scale of the axis I have 2 sets of data one sets the range correctly the other has values 0-25 and graph has y axis range only to 1.0 Any ideas how can I add custom Y-Axis in your example?

@vidyakabber2040 6 лет назад

Sir, I have used the same code . But I am not getting graph. I am beginner to php. Can you help me to solve this as soon as possible.

@mazpro 7 лет назад

Great video, well explained and very easy to follow.

@vidyakabber2040 6 лет назад

Graph is not get displayed. It is giving blank page.Can you help me to solve this.

@sheikmeerans2651 8 лет назад

Really awesome video Yusuf ! Jazakkallah hairu :-)

@yusufshakeel 8 лет назад

thanks

@rbmontes 6 лет назад

Thank you for great tutorial. Can you please make a tutorial on how to dynamically update a line chart with new data from mysql database? Really appreciate it if you could make one. Thanks!

@esauruiz3039 8 лет назад

Excellent video yusuf, this video helps to create the graphs following simple steps, Are u planning to create a video for donuts kind of graphics?

@yusufshakeel 8 лет назад

sure

@engineerobaidulhaque5759 5 лет назад

Nice tutorials.

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

@Yusuf Shakeel pretty nice tutorial and my application is working fine, just the fact that i dont want to sort them by a ID, i want to sort them by date and time...but when i try it says always ID undefined :( to you have a solution for that ?

@juanjava 6 лет назад

hello, good day, a question about chartsjs 2.x, if I have the graphic but now I want to clean it or delete it already draw, to place another, how and where I must put the code, I'm occupying your code, or want to I send you my code, thank you for your support. pd already try to erase or clean the canvas label and you can see two graphics two graphics are spliced and I do not know how to eliminate them

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

How to use x-axis as real time axis in chart js

@axid23 6 лет назад

How can I put a variable from another php file in the request ? When I want to put the request in another file, JSON do some weird things

@westfield90 6 лет назад

Very helpful

@user-mv9ly7oi8e 6 лет назад

excelent

@aishwaryas.g239 7 лет назад

Nice video.. Thank you... I understood well, but I need code in Nodejs instead of PHP.. can anyone help me..

@mosesdwana9555 7 лет назад

thanks for the tutorial. Sir, i am counting the amount amount of entry in my table per user and using chart js pie chart to display the result, but displaying the percentage of each entry on the chart has been difficult for me. can you please help?

@MartyneCZeck 6 лет назад

Hello, please, how can I draw 2 graphs on one page? (for example duplicate that one again) I am out of ideas... :(

@a2265848 7 лет назад

Hello! why ［javascript of ＂line & bar＂］ are clashed ［ javascript of ＂doughunt & pie＂］ when they are in same html or php , one of them can not display thank you~

@kathleenvensdeguzman6861 Год назад

the output can't display the graph

@sundayamizo 7 лет назад

Thanks! :D

@mirkochia 7 лет назад

how can I reduce the array contained in the json file?

@AmitKumar-gd1so 7 лет назад

How to make it dynamic? i.e., auto updating without reloading webpage. Please guide me.

@vidyakabber2040 6 лет назад

Graph is not get displayed. It is giving blank page.Can you help me to solve this.

@adrianabayon8317 8 лет назад

Hi sir, can you give us a link on making a donut graph? same implementation as this that gets data from the database. thank you

@yusufshakeel 8 лет назад

i am working on that video... hope it will be helpful. thanks for watching and commenting :-)

@taimoorghani7002 7 лет назад

can you please tell me how to change scalesteps?

@privilegemember9300 7 лет назад

how can i can change the color of font???

@mykelflores5308 7 лет назад

Thanks for this :D

@vidyakabber2040 6 лет назад

Graph is not get displayed. It is giving blank page.Can you help me to solve this.

@gauravgupta319 8 лет назад

Hi yusuf, your video helped me very much, but my code is not running. There is an error occuring:- Error: Uncaught TypeError: Cannot set property 'config' of undefined Chart.min.js:12 how can you please give any suggestion to me....?

@yusufshakeel 8 лет назад

share your code on jsfiddle.net if possible. i will try to solve the issue.

@SanjeevBeekeeper 8 лет назад

See the solution above.

@aishwaryazipare637 6 лет назад

Its not working with where condition plzzz help me

@muhammadbilalkhan1408 7 лет назад

Thanks a lot :)

@vidyakabber2040 6 лет назад

Graph is not get displayed. It is giving blank page.Can you help me to solve this.

@manikantakadiyam4695 6 лет назад

bro how to draw the linechart plotbnds using this chart data

@brollinne 8 лет назад

Chart.min.js:10 Uncaught TypeError: Cannot read property 'width' of undefined am getting this error?

@SanjeevBeekeeper 8 лет назад

See the solution above.

@35Arturito 7 лет назад

THANK YOU!! :D

@yusufshakeel 7 лет назад

welcome :-)

@havihavish2045 7 лет назад

anyone help me i am getting this error context.canvas.style.display = context.canvas.style.display || 'block';

@havihavish2045 7 лет назад

Chart.bundle.js:10095 Uncaught TypeError: Cannot read property 'style' of undefined(…) error

@n.srinivasunivasu7266 4 года назад

Hi, can you show me some video for using dynamic values in line chart. Its helpful for us.

@noorelazab9475 7 лет назад

help ! chart.min.js:9 Uncaught TypeError: Cannot read property 'width' of undefined(…)

@yusufshakeel 7 лет назад

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

@noorelazab9475 7 лет назад

i already saw the code ! nd its the same with mine ! but still there is an error ! which is chart.min.js:9 Uncaught TypeError: Cannot read property 'width' of undefined(…) i dont what it means ! :/

@MegaNice22 7 лет назад

Thank you, Any ideas how i can make it responsive?

@yusufshakeel 7 лет назад

hope this helps link: www.dyclassroom.com/chartjs/getting-started options: { responsive : true }

@MegaNice22 7 лет назад

where do i keep that code?

@yusufshakeel 7 лет назад

In the options property Check the above link there is a sample code

@wacharayanu 7 лет назад

Hi Yusuf Shakeel! How to draw multiple charts per one page from your solution? if I have 10 records json data render to 10 charts. Please share your code if it possible

@yusufshakeel 7 лет назад

we will need 10 canvas for that. for instance, say we have 2 canvas c1 and c2 having id #c1 and #c2 and say the server is sending back json response [{some-data}, {some-data}] an array of objects with some key-value pairs we loop through the array and draw the graph targeting one canvas at a time.

@wacharayanu 7 лет назад

is it possible to have only one canvas?because i have dynamic data records.

@yusufshakeel 7 лет назад

in that case you can use 1 canvas and maybe give some buttons to allow user to switch between data by clicking... something like prev-next button. when clicked draw the graph on the canvas...

@wacharayanu 7 лет назад

pretty good solution man. but i need great solution one canvas.

@korneliuspasztor7465 6 лет назад

Thx mate :D

@aishwaryazipare637 6 лет назад

I retrieve null values on select query

@yusufshakeel 6 лет назад

hope this helps git repo: github.com/yusufshakeel/chartjs/tree/master/php-mysql-chartjs TUTORIAL LINK: goo.gl/JDXags check out the latest version - ChartJS 2.x ru-vid.com/group/PLG6ePePp5vvZLVjT5mgyxBpkbNBpuAwq9 git repo: github.com/yusufshakeel/chartjs2

@200madness 6 лет назад

how to get data from mysql to line graph ?

@linchk04 8 лет назад

Legend is undefined Anyone can help me

@SanjeevBeekeeper 8 лет назад

See the solution above.

@TheShibangelist 6 лет назад

Legend=OP ;)

@vidyakabber2040 6 лет назад

Can you reply me as soon as possible?

@yusufshakeel 6 лет назад

hope this helps ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-nsnbv3wtW3g.html code www.dyclassroom.com/chartjs/chartjs-how-to-create-line-graph-using-data-from-mysql-mariadb-table-and-php github repo github.com/yusufshakeel/chartjs2