3 Create a Bar Chart with Database Arrays | Chartjs Mysql Database Series

3 Create a Bar Chart with Database Arrays | Chartjs Mysql Database Series

In this video we will create a bar in chart js with a mysql database. We will now connect the chart of chart js with our database and start to display the demo values we have in the data tables into the chart. To do this we need to convert PHP readable code into readable Javascript code by using the json_encode command.

Got a question or special request about a specific item? Comment below and tell me your question. I will make sure to follow up on you!

Interested to learn about how to create charts? Check out below!

⭐ Chart JS Udemy Course ⭐:

Chart JS tutorials for Beginners:

Chart JS tutorials for Intermediate:

Chart JS Dashboard Series:
👍 Most Liked Video Series:

Why did I created these Chart JS video tutorials?
Have you ever used Excel where charts appear almost magically with a click on a button. You notice if you look at a chart or graph you can absorb information within seconds which would take you minutes if it is a table with data.

"A picture is worth a thousand words"

We all know that pictures and colors spark the mind. However, if you try to draw or code a 📊 bar chart or a 📈 line chart, or any type of chart in a Javascript library it is a big challenge. The documentation makes it hard and the it is very hard to work with a canvas tag.

Which was both logical and creative at the same time. And this is why I love charts as well. A chart is the closes to translating logic into visuals. Making the chart interactive is the best way to communicate your message to others.

If we know about this why is coding charts so complicated?

Because computer programming language is based on 100% logic. This is why when you look at Chart.JS, D3.JS, Chartist and other chart libraries in JS you will need to basically explain in logic to a computer what to make visual.

How and where can I help?

My goal and focus is on creating easy to understand Chart.JS videos so you can start using Chart JS in all your website endeavors making Chart.JS a topnotch and leading JS library for the years to come. Just like any programming library once more people use Chart JS it will attract more people to contribute and grow. The videos on Youtube and my complete course on Udemy are here to give a helping hand.

Seeing Chart.JS evolve from Chart.JS 1.0 to Chart.JS 3.0 and with their currently new expansion to Chart.JS 3.0 we can expect more new exciting charts in the near future.

About Chart.JS 3 | Chart JS 3
Chart JS is one of the most use Javascript libraries for the drawing charts. It is designed to create charts in the canvas tag which is great but at the same time slightly challenging for most people. However, knowing how to draw a chart will give you a big edge and most dashboards are consistently adding charts along data tables. Chart JS makes your data more alive and visually more appealing.

What type of charts can you make with Chart.JS?
With chart js you can make line chart, bar chart, pie chart, doughnut chart, scatter chart, polar area chart, radar chart, gauge chart and area chart. And with some clever tricks and visual adjustment more can be done.

#chartjs

[chaitanyapriya]

Excellent series !!
Very detailed explanation !!

[VincentAziz]

thank you worked perfectly, i didnt use array variable but used 3 const var : food, fuel, other expenses. and the values in these var was displayed in the graph. thank you for the help.

[markdevelop]

This was so helpful for me. Good explained. Thanks

[Sowhat-funr]

Hello Thank so much for what you are doing.
Is it the same process for a line graph?
I am having issues setting up as chart JS has updated lots of its options. If you don't mind creating a video for connecting database to a line graph same way as you have done for a bar graph.
Thank you

[kanyin]

This video helped a lot. However, can I do this exact same thing with just Javascript in a node js environment?

[jonathanoeijoeng]

Thanks for the video. This is what I need to show my data in chart.js. If I have 4 columns which are months, region, cost and profit, and I want to make stacked bar which show 3 regions stacked in one bar in monthly basis means I will have 12 stacked bar. How can I do effective query? Currently I have to make 1 query for each region so total will be 3 queries. Can you suggest more effective query? I can send you example data if you want to play around with the data. Thanks so much

[edomyastemesgen]

I just have a little problem, i can't insert a php code in a js file ! Can you help ?

[francoisreinert]

Hey, i really appreciate for your courses. I created successfully some charts with your videos. But i've got a question. I already have created a scoring chart for one player. There are 6 different scores as one dataset (some hidden for startup) as a line chart and dates as labels. This works very well but now i would like to compare players against each other and layering line charts over the other. Do you think this will be possible without creating a mess, because it should be possible to compare up to 20 player with 1-6 different scores. Best Francois

[olivierromeo]

console.log(<?php echo json_encode($variable); ?> does not work in my code... It just spoils my html among ather things. What can I have missed ? My php code in another file (tools.php)
Nice tutorials though ! Made me improving a lot despite how incompetent I can be