Chart JS, the complete guide. ChartJS missing manual.
- 10.5 hours on-demand video
- 4 articles
- 18 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- Fully know and understand how Chart JS works.
- Know how to create a chart from scratch!
- Create your own line chart from scratch with ChartJS
- Create your own bar chart from scratch with ChartJS
- Create your own stacked bar chart from scratch with ChartJS
- Create your own horizontal bar chart from scratch with ChartJS
- Create your own pie chart from scratch with ChartJS
- Create your own donut/doughnut chart from scratch with ChartJS
- Create your own multi level doughnut / pie chart from scratch with ChartJS
- Create your own radar chart from scratch with ChartJS
- Create your own polar area chart from scratch with ChartJS
- Create your own bubble chart from scratch with ChartJS
- Create your own scatter chart from scratch with ChartJS
- Visualize data into beautiful charts for the web.
- Be a professional in ChartJS
- Create customized chart titles
- Create customized chart legends
ChartJS the complete guide, welcome to ChartJS
- Meet the instructor and why data visualization will be the next upcoming trend.
- The goals of this course
- What you can expect (You will learn how to make a Line, Bar, Radar, Polar, Pie & Doughnut/Donut chart from scratch!).
This course was truly intended for everyone who wants to learn ChartJS but struggle because of their very complicated documentation. This course will give you absolute clarity and you will definitely know how to make a chart with ChartJS.
This is a notification that this course is being updated. Chart JS has had a huge amount of updates and this course lacks the depth and the content of Chart JS 2. Im dedicated to fix this and rebuild the entire course. If you have any suggestions please let me know. I truly appreciate any kind of suggestions and feedback to improve this course.
Line Chart (Done)
Bar Chart (Done)
Doughnut Chart (Done)
Pie Chart (Done)
Gauge Chart (is a Doughnut chart tweak) (Done)
Radar Chart (Done)
Polar Area Chart (Done)
Bubble Chart (Done)
Scatter Chart (Done)
Chart Titles Chart (Done)
Combo Bar Line Chart (Done)
Chart Legend (75% completed)
Chart HTML Legend (Done)
Chart Tooltip (Done)
Chart Color Management Options (Done)
Drill Down Charts / Clickable Charts (Done)
Chart + DB (Basic is done more to come)
Dynamic Chart (In progress)
Create own charts
Chart JS Course Roadmap
In this video I will discuss what I call the Chart JS Course Roadmap. This roadmap is something that I recently start using. A Roadmap helps you to clearly show what you will learn based on your level of experience. Chart JS has some complicated topics and before you start with that you must be at a certain level.
Please note we use color coding along with this course. It will help you better along the road of learning Chart JS.
Chart JS Course: The Foundation introduction
In this section you will learn the foundation. This part is important. we will use this as a starting template. Let's begin!
Chart JS Course: Basic Setup and Chart JS latest version
In this video we will focus on the basic setup and latest Chart JS version. We will be using this basic setup through out the entire course.
Chart JS Course: Setting up the HTML file
In this video we prepare the HTML file. Having a standard will help. You can have your own version or follow along. I will be using Bootstrap with ChartJS just for a quick setup.
Chart JS Course: Designing the chart size and background
In this video we will design the chart and background quickly before we start with the code.
Chart JS Course: Chart JS common mistakes
In this video you will learn some of the common mistakes which can confuse a beginner of Chart JS.
Chart JS Course: Chart JS understanding the basic codes
In this video we will quickly go through the standard lines of codes. This is basic code you will be using consistently with Chart JS.
Chart JS Course: Line Chart Introduction
In this section we will focus on the Line Chart. Make sure you have the starting template ready. Let's begin!
Chart JS Course: Line Chart labels
In this video you learn how to use labels for Line chart.
Chart JS Course: Line Chart label
In this video you learn how to use label for Line chart.
Chart JS Course: Doughnut / Pie Chart options rotation
In this video you learn how to use options rotation for Doughnut / Pie chart. Chart JS uses the math.PI formula. The PI formula starts with the value of PI = 3.141592653589793. To rotate the chart a certain degrees all you need is to use these numbers. Special note for Chart JS 25% or 90 degrees rotation the value is higher than usual. If I find a better value this video will be updated.
25% || 90 = 6.283185307179586
50% || 180 = 1.5707963267948966
75% || 270 = 3.141592653589793
100% || 360 = 4.71238898038469
Chart JS Course: Multi Level Doughnut / Pie Chart
In this video you learn how to create a Multi Level Doughnut / Pie Chart. The official name is a Multi Level Pie chart but in reality we create a doughnut chart with multiple levels. Even if you would chart in Chart JS the type from doughnut to pie you will notice nothing changes.
Chart JS Course: Making a Gauge Chart from a Doughnut / Pie Chart
In this video we will start to create a very simplified Gauge (pronounce as 'gaged' from engaged) chart. Chart JS indicates in their documentation that a Gauge chart is not a built in feature. While that is true but it is not entirely true. With a very simple tweak we can start making a quick Gauge Chart so you do not need to find alternatives.
What is a Gauge Chart? A Gauge chart is a chart that displays a value. Just think about a speed-o-meter chart where the needle indicates how fast you drive.
Please note it does not have a needle, but it is something additional to keep your options open.
Chart JS Course: Expanding the arc of a Gauge Chart from a Doughnut / Pie Chart
In this video we will continue to create a very simplified Gauge (pronounce as 'gaged' from engaged) chart. We will expand the arc so it will have more a suitable look of an Speed-o-Meter chart.
What is a Gauge Chart? A Gauge chart is a chart that displays a value. Just think about a Speed-o-Meter chart where the needle indicates how fast you drive.
Please note it does not have a needle, but it is something additional to keep your options open.
Chart JS Course: Scatter Chart list of objects
In this video we will glance through the list of objects. Scatter charts foundation is from a Line Chart. This means that their options are identical.
I decided to skip video about this. However, if you struggle and would like all of these options in the video please comment on this video. I will create the videos if there is interest for it.
Chart JS Course: Chart Title Introduction
In this section we will focus on the Chart Title options. This is the semi intermediate section. While this topic is quite easy you do need to have understand of how to create a chart. Make sure you have the starting template ready.
- Have an openmind and a willingness to learn.
- Interested in making data visual!
- Eager to take action.
Chart JS the missing manual!
Course is made in the version Chart JS 2.7.2
New videos are used with version Chart JS 2.7.3
Why Should you take this course?
Let me explain my personal story. When I started to learn Chart JS it was a real challenge. Creating charts was already hard, however understanding the documentation was the biggest structure. I could not belief how complicated the documentation was. I felt it was written by expert developers that assume you knew how to already code in Chart JS. Just look at the documentation and a lot is missing out.
I remembered when I finally was able to get a chart on the page. I felt like I won the jackpot. Finally it worked but I quickly realize that what I really wanted was create charts that are directly connected with my database. And nothing about that single topic is found anywhere.
Because of this struggle I decided to create this wonderfully detailed course. This is what I coined as the Chart JS missing manual. Why? Because it covers so much in detail en topics not being shown in Chart JS documentation. This course is what I would say the course I wished I had before starting out. It would save a lot of time and could get me up to speed fast.
How you learn in this Chart JS course?
In this course I will take you from absolute beginner in Chart JS to a professional Chart JS developer. You will be following along with the codes but there is more.
You will get challenging questions about Chart JS.
You will be tested with some challenges in Chart JS and see if you can complete them on time.
You will get problem cases that forces you to think and debug the problems in the chart.
What can you expect from this course?
You will be able to create charts guaranteed! This course is very easy to follow as we are doing step by step. More complicated items will even be discussed line by line.
You will create:
Line chart with Chart JS
Bar chart with Chart JS
Stacked bar chart with Chart JS
Horizontal bar chart with Chart JS
Radar chart with Chart JS
Polar chart with Chart JS
Pie chart with Chart JS
Doughnut chart with Chart JS
Gauge Chart with Chart JS (YES we can make them as well with minor tweaks!)
Bubble chart with Chart JS
Scatter chart with Chart JS
Create Chart Titles
Combo Bar Line Chart
Customize Chart Legends
Customize Chart Tooltips
Chart JS Color management / Gradient / Chart Colors based on color
Drill Down Charts / Clickable Charts
Chart JS with Database MYSQL PHP
Dynamic charts with AJAX update and input forms
You will learn how to make each of these charts and I will be updating these sections every once and a while. ChartJS is developing quickly with many new features and charts. This course will be your absolute reference course for making every possible chart with Chart JS.
And you will be solving some challenging problems to see if you are really a PRO in Chart JS! Some of them are really hard but once you master that you are very skilled to make all kind of charts with Chart JS!
"What Version is this course made?"
In this entire course you will learn codes in the version Chart JS 2.7.2.
New videos are created in latest version Chart JS 2.7.3.
"What is the most exciting part of this course?"
My obsession of having real dynamic charts from a database. It is one of the best skills
that you must know. It is discussed here in depth.
"Do you update the course with new items"
Yes weekly new items appear and currently this course is being hugely extended!
3 Reason why you will love this course!
This course will always be updated with the latest ChartJS development, there are far more charts than those.
This course will be you absolute reference sheet for ChartJS. It covers the most important aspects of Chart JS library and makes sure you are ready to start using it to build chart.
The main objective of this course
Make Chart JS accessible for everyone who wants to learn it. At the end of this course you MUST and WILL be confident that you can create any chart with Chart JS with ease.
Let's go and start make those Charts!
It is time to dive in! Start and create your charts for the web! Join this course and make the web a more chart friendly place!
- Data workers that need to translate data into visuals.
- Web programmers that need to make use of charts for the web.
- Data analyst that needs to find new methods to consume data faster or present data effectively
- Professionals that need to create charts for the web.
- Beginners or advanced programmers that truly want to learn how to get started with ChartJS
- People who tried to learn ChartJS but struggle because the ChartJS documentation is not good.
- This course is build for every type of user. (Beginner, advanced or for people with no single knowledge all.)