Chart Js with MySQL Database Data
3.3 (22 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
128 students enrolled

Chart Js with MySQL Database Data

Create charts in Chart Js ChartJS with MySQL Database Data
3.3 (22 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
128 students enrolled
Created by Nicky Wong
Last updated 10/2018
English
English [Auto-generated]
Current price: $69.99 Original price: $99.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3 hours on-demand video
  • 3 articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Understand how to create a chart in ChartJS with MySQL Database Data
  • Create all kind of charts in ChartJS with MySQL Database Data
Course content
Expand all 53 lectures 03:09:57
+ Introduction
4 lectures 07:20

ChartJS MySQL Database Date: Introduction of Section 1

In this video you will get a quick introduction of what we will do in this section.

Preview 00:28

ChartJS MySQL Database Date: Create the chart and add Bootstrap

In this video you will start to create to create the chart and add Bootstrap. This is the core foundation assuming you already know how to create charts with Chart JS.

Preview 03:32

ChartJS MySQL Database Date: Adding a card design

In this video we will add a quick card design with a red background. This is to give it a bit nicer design and make the chart smaller.

Preview 02:58

ChartJS MySQL Database Date: End of Section 1

This is the end of this section. Now we created our chart and have a simple design. We are now ready to work on what truly matters most, the MySQL Database connection. In the next section we will do this.

Preview 00:22
+ ChartJS MySQL Database Date: Simple Structure [Beginners]
8 lectures 32:11

ChartJS MySQL Database Date: Introduction of Section 2

In this video you will get a quick introduction of what we will do in this section. In this section we will connect the chart we created in Chart JS with the MySQL Database data.

Preview 01:10

ChartJS MySQL Database Date: Create a database

In this video we will quickly create a table. This table is not yet prepared for CHartJS but we need a starting point and gradually we can adjust and improve.

ChartJS MySQL Database Date: Create a database
02:32

ChartJS MySQL Database Date: Connect to database

In this video we will create a basic connection with the database. This is what you can consider a basic skill for PHP and MySQL. However, this is essential.

ChartJS MySQL Database Date: Connect to database
05:23

ChartJS MySQL Database Date: Sum Array

In this video you will learn how to sum the arrays. Since we are working with many rows of data it is mostlikely you will want to sum the values. A chart in ChartJS works with datapoints and you need to have this prepared before we can use it. Knowing how to COUNT and SUM an array is a must.

ChartJS MySQL Database Date: Sum Array
05:02

ChartJS MySQL Database Date: Filtering Data

Have the data being shown is one thing, having them filtered accordingly is another. You will notice that knowing MySQL or SQL commands will be crucial for displaying data. Currently we will show very simplified versions but we will go deeper in other sections as this is right now just the tip of the iceberg.

ChartJS MySQL Database Date: Filtering Data
03:44

ChartJS MySQL Database Date: Planned Database Structure

In this video we will discuss more about planned database tables and we will create our first solid connection with ChartJS based on this database structure.

ChartJS MySQL Database Date: Planned Database Structure
07:52

ChartJS MySQL Database Date: JSON Encode function

In this video we will convert our php array into an JSON Encoded array. ChartJS uses the JSON structure to read the values. This means we need to convert this correctly to ensure our code is properly set and structured.

As you notice once connected the values are being displayed the correct way.

ChartJS MySQL Database Date: JSON Encode function
05:38

ChartJS MySQL Database Date: End of Section 2

This is the end of this section. We now made a connection with the MySQL Database and get the data from it. It is well connected and the chart starts to display data from database. However, if you belief this is the end of the course you are completely wrong. This is the very start, as now the world opens up to new possibilities.

Next section we will focus more on planned and unplanned database tables and create more variations.

ChartJS MySQL Database Date: End of Section 2
00:50
+ ChartJS MySQL Database Date: Exploring SQL Commands and DB tables [Intermediate]
5 lectures 14:49

ChartJS MySQL Database Data: Introduction of Section 3

In this section you will explore the different types of databases structures. We will be using all kind of SQL options to create a chart.

Preview 00:51

ChartJS MySQL Database Date: Filter the chart values by year

In this video we will start to change a tiny bit of the MySQL database structure. The goal now is to filter it a bit more logical. Filtering it by a new column named year.

ChartJS MySQL Database Date: Filter the chart values by year
04:56

ChartJS MySQL Database Date: Full data column filter [Part 1]

In this video we will start to work with a more realistic structure. Most commonly you will work with dates. Showing values based on dates is very common. Right now this is still very simplistic by having months as columns. But next video goes deeper on a database structure that is common.

ChartJS MySQL Database Date: Full data column filter [Part 1]
06:23

ChartJS MySQL Database Data: Full date column filter [Part 2]

This part is coming soon.

ChartJS MySQL Database Data: Full date column filter [Part 2]
01:39

ChartJS MySQL Database Data: End of Section 3

This is the end of this section. Now you learn how to use the different options of SQL command to make the chart working.

ChartJS MySQL Database Data: End of Section 3
01:00
+ ChartJS MySQL Database Date: Let's Make a Dashboard [Intermediate] [Part 1]
16 lectures 01:02:52

ChartJS MySQL Database Data: Dashboard Introduction of Section 4

In this section you will explore how to create a dashboard. Now you know how to connect the ChartJS chart with MySQL Database, it is time to practice. In this section we will start to create a simple dashboard. The dashboard will be 3 different charts based on 1 table data.

Preview Processing..

ChartJS MySQL Database Data: Creating a dashboard basic

In this video we will start creating the dashboard structure. We will be using 6 cards. Three of them are charts and the others are KPI (Key Performance Indicators).


ChartJS MySQL Database Data: Creating a dashboard basic
06:10

ChartJS MySQL Database Data: Creating the charts

In this video we will start to add the charts for the dashboard. We will need three charts and this means three individual Chart JS setups for the chart.

ChartJS MySQL Database Data: Creating the charts
04:16

ChartJS MySQL Database Data: Creating the dashboard table

In this video we will create the table which will be used to each of the 3 charts. Every chart needs a different item. This means we need a well planned table structure.

ChartJS MySQL Database Data: Creating the dashboard table
03:48

ChartJS MySQL Database Data: Include file Chart 1

In this video we will start to seperate the first two cards which contain the chart and KPI 1. We will place them in a separate include file to maintain a clear structure.

ChartJS MySQL Database Data: Include file Chart 1
01:51

ChartJS MySQL Database Data: Include file Chart 1 DB Connection

In this video we will start to connect the database to the Chart 1 include file.

ChartJS MySQL Database Data: Include file Chart 1 DB Connection
05:19

ChartJS MySQL Database Data: Creating an array.

In this part we will create an array that we might need.

ChartJS MySQL Database Data: Creating an array.
03:25

ChartJS MySQL Database Data: Group By SQL Command

In this video we will start to dive deeper in SQL options. We will use the GROUP BY command. As you might notice we are now starting to move more to PHP and MySQL combining all these options together.

ChartJS MySQL Database Data: Group By SQL Command
03:17

ChartJS MySQL Database Data: Using the MONTH and YEAR Command.

In this video we will start to create a "Fictional" column named MONTH and YEAR. This is essential to identify and categorize the payment by month and year. 


ChartJS MySQL Database Data: Using the MONTH and YEAR Command.
Processing..

ChartJS MySQL Database Data: Convert to the JSON array.

In this video we will convert the array to the JSON ENCODED array.

ChartJS MySQL Database Data: Convert to the JSON array.
05:53

ChartJS MySQL Database Data: Solving the gaps in the chart.

In this video we will start to improve and solve the small items that occur in our dashboard. One of them is the gaps if a chart does not have any value in the database stored for that date.

ChartJS MySQL Database Data: Solving the gaps in the chart.
04:13

ChartJS MySQL Database Data: Average value from an array.

In this video we will calculate the average value of the array.

ChartJS MySQL Database Data: Average value from an array.
04:47

ChartJS MySQL Database Data: Creating the target line

Creating the target line in the line chart.

PRO TIP: This line is nice here but if you will be using Combo Charts [Bar|Line] you will truly see how powerful this.

ChartJS MySQL Database Data: Creating the target line
04:35

ChartJS MySQL Database Data: Finetuning the design of the line chart [Part 1]

In this video we will start to finetune the line chart design. It is very common that you need to adjust specifics. In this case there are a lot of items such as the tooltip, legend and colors. So, let's begin.

ChartJS MySQL Database Data: Finetuning the design of the line chart [Part 1]
05:56

ChartJS MySQL Database Data: Finetuning the design of the line chart [Part 2]

In this video we will start to finetune the line chart design. It is very common that you need to adjust specifics. In this case there are a lot of items such as the tooltip, legend and colors. So, let's begin.

ChartJS MySQL Database Data: Finetuning the design of the line chart [Part 2]
05:37

ChartJS MySQL Database Data: Finetuning the design of the line chart [Part 3]

In this video we will start to finetune the line chart design. It is very common that you need to adjust specifics. In this case there are a lot of items such as the tooltip, legend and colors. So, let's begin.

ChartJS MySQL Database Data: Finetuning the design of the line chart [Part 3]
03:45
+ ChartJS MySQL Database Date: Let's Make a Dashboard [Intermediate] [Part 2]
8 lectures 29:22

ChartJS MySQL Database Data: Dashboard Introduction of Section 5

In this section you will explore how to create a dashboard. Now you know how to connect the ChartJS chart with MySQL Database, it is time to practice. In this section we will start to create a simple dashboard. The dashboard will be 3 different charts based on 1 table data. This is the second part that we will complete.

Preview 00:50

ChartJS MySQL Database Data: Include chart 2

In this video we will create the second include file which will be specially designed for the second chart and second KPI card. Our goal is to keep each section organized. Let's begin!

ChartJS MySQL Database Data: Include chart 2
01:32

ChartJS MySQL Database Data: Creating the Database Connection and Array

In this video we will create the database connection and the array. It has so many items which are similar to the Chart1.php include file so we will just "borrow" that structure quickly to save time.

ChartJS MySQL Database Data: Creating the Database Connection and Array
04:06

ChartJS MySQL Database Data: Getting the data from the array to the chart

In this video we will get the data from our array and insert it to the chart.

ChartJS MySQL Database Data: Getting the data from the array to the chart
02:52

ChartJS MySQL Database Data: KPI 2 Card design

In this video we will focus on designing and calculating the KPI 2. It will be consistent with the previous version but than specificly geared toward quantity.

ChartJS MySQL Database Data: KPI 2 Card design
04:18

ChartJS MySQL Database Data: Creating the combo chart

In this video we will work on create a combo chart. Combo charts are wonderful but they only work with Bar|Line combination. Currently, I haven't seen any other way to use this. However, it is a great and powerful tool to quickly make strong visuals.

ChartJS MySQL Database Data: Creating the combo chart
05:52

ChartJS MySQL Database Data: Designing the Combo Chart

In this video we will focus on the design of the combo chart. Currently it show some items not that good. This means we want to finetune the chart based on the legend and tooltip options.

ChartJS MySQL Database Data: Designing the Combo Chart
04:58

ChartJS MySQL Database Data: Do the formulas for the KPI 2

In this video we will complete our second part by doing the KPI 2 card and add the formula for it.

ChartJS MySQL Database Data: Do the formulas for the KPI 2
04:54
+ ChartJS MySQL Database Date: Let's Make a Dashboard [Intermediate] [Part 3]
12 lectures 43:22

Introduction: In this part we will continue with the third section

A video is being created very soon. We will focus on the 3rd section of the dashboard.

Introduction: In this part we will continue with the third section
07:12

ChartJS MySQL Database Data: Create an include for chart 3

In this video we will create the final include file for the third section of the dashboard. 

ChartJS MySQL Database Data: Create an include for chart 3
02:18

ChartJS MySQL Database Data: Connection and GROUP BY Agent

In this video we will connect the chart to the database and group by agent.

ChartJS MySQL Database Data: Connection and GROUP BY Agent
05:53

ChartJS MySQL Database Data: Displaying Agent Names

In this video we will start to display the agent names. This is essential for the chart labels.

ChartJS MySQL Database Data: Displaying Agent Names
03:33

ChartJS MySQL Database Data: JSON arrays.

In this video we will start convert the arrays to JSON arrays.

ChartJS MySQL Database Data: JSON arrays.
Processing..

ChartJS MySQL Database Data: Connect to Pie chart

In this video we will connect the JSON values to the pie chart.

ChartJS MySQL Database Data: Connect to Pie chart
02:37

ChartJS MySQL Database Data: Convert the values to percentages.

In this video we will convert the values to percentages.

ChartJS MySQL Database Data: Convert the values to percentages.
05:58

ChartJS MySQL Database Data: Chart card design

In this video we will improve the design of the chart card.

ChartJS MySQL Database Data: Chart card design
Processing..

ChartJS MySQL Database Data: Create the Forloop for dynamic agent names.

In this video we will use the forloop to create dynamic agent names.

ChartJS MySQL Database Data: Create the Forloop for dynamic agent names.
04:35

ChartJS MySQL Database Data: Create the Forloop for dynamic agent values.

In this video we will use the forloop to create dynamic agent values.

ChartJS MySQL Database Data: Create the Forloop for dynamic agent values.
04:38

ChartJS MySQL Database Data:  Random color solution [Part 1]

In this video we will use a simple color solution. The goal here is to complete this quickly. In next video I will show you a more complex version of random color creation.

ChartJS MySQL Database Data:  Random color solution [Part 1]
02:55

ChartJS MySQL Database Data:  Random color solution [Part 2]

This part has low priority at this moment, so coming soon.

In this video we will use an advanced color solution. The goal here is to build a random version of the color management with multiple JavaScript commands.

ChartJS MySQL Database Data:  Random color solution [Part 2] (Coming Soon)
03:43
Requirements
  • Have basic foundation of HTML
  • Have basic foundation of CSS | (Bootstrap not essential)
  • Have a basic foundation of JavaScript
  • Have a basic foundation of MYSQL & PHP
  • Understands how to create charts in ChartJS | Chart JS
Description

How to create charts in Chart Js with MySQL Database Data?

This is truly a topic that I really love. Perhaps you are just like me that in the very beginning you do not know how to do this. I`ve been there and eventually I decided to truly learn this wonderful skill. It took a really long time because this topic is not commonly discussed and secondly the skills are what you can call multi disciplinair. This means that you are not only dependent on one single programming language.

You need to know a bunch of them all together and combine it in a way that is really challenging. However, one thing I still remember and this is what truly makes know thing this wonderful. It was the feeling of being able to do this, and making charts and dashboards in a way I always dreamed of.

This course is a challenge, however, I describe it all in detail. It is in bite sizes and very easily done. If you follow you will get results and be able to do it yourself. However, do not neglect what you learn here. It took me truly months to understand all of these items and put them together as I did.

This course is deeper then you would expect.

Since the topic is far more expensive then you could imagine you will notice that I will discuss it from every angle I possible can imagine. Ever heard of a planned and unplanned database? Well, so many options are possible and this creates a real challenge.

Your database might not be build for Charts but you are not able to change it and must work with what you`ve got. I get it and this is also what I learned to do. You might have a different structure and want to combine it all together in a database. Well, I understand this as well.

When I created this course I focused on the database connection but in reality that is just the tip of the iceberg. The connection is one part, having the right database structure is the second, and making it dynamic is a completely different level. I`m talking about AJAX and JS functions (if you are experienced) you will know what I'm referring to.  And of course knowing how to connect everything with the updating function of Chart JS. Well be ready!

Items in this course will be sometimes repetitive. I really did this on purpose because this is how I learned this well. If you create 10 different charts with all kind of connection structure you will be really good. Because the experience you gain from doing this is really worth it. After that you basically could dream it. Although the challenge of this is really different every single time.

ChartJS is really fascinating and somehow I truly love to see how those charts come to life and start to tell a story with numbers. I sincerely hope you enjoy this course as well. One of the things that always give me a spark of joy is seeing a chart in action the moment it is connected. It might sound weird but seeing your chart change by a click of a button or connected with a database is very similar to seeing seed becoming a plant. It is fascinating how it can grow. Not because of the growth but once you know this, you see yourself growing and all the new possibilities you can do with a chart.

I hope I can transfer some passion charts into you and I sincerely hope it gives your the inspiration to truly take this course. Not for me,... but for yourself. See how your new gained intelligence will make your skills bloom even further then you can imagine. I ask you to try it to explore how far you can blossom!



Who this course is for:
  • Data visualizers who want to use ChartJS with MySQL Database Data.
  • Students who are eager to connect their database with Chart JS to create advance dashboards.
  • Anyone who wants to use Chart JS to create dashboards.