Chart JS, the complete guide. ChartJS missing manual.

The Chart JS missing manual. Master how to use ChartJS and become a data visualizer with ChartJS!
3.7 (67 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
3,316 students enrolled
Free
Start Learning Now
  • Lectures 61
  • Contents Video: 3 hours
    Other: 1 min
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 6/2015 English

Course Description

==========================================================================

Chart JS the missing manual!

==========================================================================

How would you feel if you could make wonderful charts and data visuals on the fly? Many people would love to create charts for the web. 

So what is stopping you?

Learning how to code a chart is very challenging! It takes an expert to make it understandable. Perhaps you are now using Excel but see the potential online, but how can you learn it?

Did you tried all those other documentations about ChartJS? They are too complicated!

When I started out to learn this I was struggling! I know how to make a chart in seconds for Excel but for the web. It just did not work. But I know I needed to learn this because more people read a web page than an Excel sheet. Switched and struggled but eventually made it!

No more!

Eventually, I though this documentation is useless for people who are not know in the field of coding. So this is the reason i created a huge video course about ChartJS and I considered it "the missing manual"!

Why?

Well ChartJS does not offer any kind of guidance and support. This course does and I truly wished I had this "missing manual" before I started out on ChartJS because it would save me a ton of time.

==========================================================================

What can you expect from this course?

==========================================================================

This course is designed for you if you are planning to make web charts with Chart JS. Big data is heading our way fast! People want to read the data but they do not have the time to read large columns of data. It must be visual. This is the reason why data visualization is a big booming business for the coming future. 

With Chart JS you can create many difference charts and they are highly visual, easy to understand and look stylish. The main reason why you should use Chart JS is because you are planning to create a basic chart with limited interaction and features. 

In this course you learn how to create many different charts:

  1. Line chart with Chart JS
  2. Bar chart with Chart JS
  3. Stacked bar chart with Chart JS
  4. Horizontal bar chart with Chart JS
  5. Radar chart with Chart JS
  6. Polar chart with Chart JS
  7. Pie chart with Chart JS
  8. Doughnut chart with Chart JS

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 ChartJS.

==========================================================================

3 Reason why you will love this course!

==========================================================================

  1. You will truly learn how to make a chart for the web in a easy step to step follow guide. It is in bite size steps which makes it easy to follow even if you are completely new to HTML, CSS and JavaScript. 
  2. This course will always be updated with the latest ChartJS development, there are far more charts than those.
  3. 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 accessable 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. 


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!

What are the requirements?

  • Have an openmind and a willingness to learn.
  • Interested in making data visual!
  • Eager to take action.

What am I going to get from this course?

  • Fully know and understand how Chart JS works.
  • Know how to create a chart from scratch!
  • Create you own line chart from scratch with ChartJS
  • Create you own bar chart from scratch with ChartJS
  • Create you own stacked bar chart from scratch with ChartJS
  • Create you own horizontal bar chart from scratch with ChartJS
  • Create you own pie chart from scratch with ChartJS
  • Create you own donut/doughnut chart from scratch with ChartJS
  • Create you own radar chart from scratch with ChartJS
  • Create you own polar chart from scratch with ChartJS
  • Visualize data into beautiful charts for the web.
  • Be a professional in ChartJS

What is the target audience?

  • 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.)

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Welcome to ChartJS the complete guide and what you can expect from this course.
02:39

ChartJS the complete guide, welcome to ChartJS

In this course you will learn how to make use of the wonderful JavaScript library named ChartJS. First you will receive a overview of what you can expect from this course.

  1. Meet the instructor and why data visualization will be the next upcoming trend.
  2. The goals of this course
  3. 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.

04:43

ChartJS complete guide: Why ChartJS and data visualization is so important

Before you even start learning this course you might wonder why this is useful? This course teaches you the best possible skills for data visualzation. The trend of the coming years is that we will get more and more big data. However, big data requires so much reading. We do not have the time to read that much. We struggle with all the information so how can we consume information quicker?

The solution is making data visual. With ChartJS you can communicate information and your story in a matter of seconds. This is a very important skill and more companies are already hiring people to do just that. Make information visual and let people consume information in a matter of seconds instead of minutes.

If you can do just that, you will be worth you weight in gold!

03:04

ChartJS the complete guide, setting up your work space and downloading the files

In this lecture you get an overview of the files you need to download and the text processor.

The JavaScript files:

Before you can start writing ChartJS charts you must have the files that we will use during the entire course. I already uploaded the files in a zip-document. However, if you prefer the most updated Chart.min.js please visit the official ChartJS site.

Text processor

In the video you have many options. Which one you take does not really matter. My personal preference is NotePad++. It is a very light software and just basic enough to work with. I will be using NotePad++ during the entire course.


Section 2: How to make a line chart with ChartJS?
00:49

Line ChartJS: Introduction to line chart

In this section you will learn how to create your own line chart. You will see what kind of chart you will make and what the end result will be like.

02:58

Line ChartJS: The basic HTML frame work

In this lecture you will learn how to create the basic HTML frame work. This frame work will be used for every section.

04:54

Line ChartJS: Connecting the JavaScript files and placing the canvas tag.

In this lecture you will connect the three files and place the canvas tag. ChartJS draws every chart in a canvas tag.

03:41

Line ChartJS: Typing the labels / Y-axis of the chart

In this lecture you will learn how ChartJS is set up. ChartJS has a scale and on the scale there is a X-axis and Y-axis. The Datasets are considered the X-axis and the labels are the Y-axis. Always start with the Y-axis/labels before implementing the datasets.

03:33

Line ChartJS: Typing the datasets

In this lecture we will implement the datasets of the two lines. For every new line in the chart you will need additional datasets.

02:58

Line ChartJS: Connecting the canvas ID with JavaScript

In this lecture we will focus on connecting the canvas ID with JavaScript. Right now the JavaScript is independent from the HTML document. We need to connect this to create the chart.

04:25

Line ChartJS: Drawing the line chart

In this lecture we will focus on drawing the line chart. We already connected the JavaScript with HTML but we also need to connect the values of the line chart. By doing that the canvas can display the line chart.

04:13

Line ChartJS: Adjusting the background and increase the size of the chart

In this lecture you will focus on adjusting the background color of the chart. We will give this a Green color. Secondly, we will increase the width and height of the chart.

03:44

Line ChartJS: Adjusting the basic dataset coloring features

In this lecture you will focus on adjusting the background color of the chart. We will give this a Green color. Secondly, we will increase the width and height of the chart.

01:23

Line ChartJS: Activating the advanced commands for ChartJS

In this lecture we will activate the advanced commands. To activate this you will need to put in a specific line of code.

05:11

Line ChartJS: Using the advanced features in ChartJS

In this lecture we will use the advanced features/commands in ChartJS. In the previous lecture you activated it with a specific line of code. Now we can quickly used this.

04:11

Line ChartJS: Adjusting the scale and the scale fonts.

In this lecture we will use the advanced features to adjust the scale color and the fonts.

1 question

Test your knowledge!

Article

Line ChartJS: The HTML code file completed

Download the complete HTML code file for reference. Please visit the resource section to download the ZIP-file.

Section 3: How to make a bar chart with ChartJS?
01:03

Line ChartJS Introduction: How to create your line chart with ChartJS

In this section you will learn how to create a bar chart. A bar chart is one of the most common used charts. Besides learning the bar chart, you will also understand how to create a stacked bar chart and a horizontal bar chart.

02:08

Bar ChartJS: Create the basic HTML frame work

In this lecture you will create the foundation of HTML. This basic frame work is essential before you can create a chart.

02:16

Bar ChartJS: Connecting the JavaScript files and canvas tag

In this lecture you connect the JavaScript files with HTML and place the canvas tag. The canvas tag is crucial because ChartJS uses the canvas tag to draw the chart.

02:38

Bar ChartJS: Placing the Y-axis/labels of the chart

In this lecture you will learn how ChartJS is build. ChartJS works with labels and with datasets. We will first implement the labels.

02:46

Bar ChartJS: Placing the X-axis/datasets of the chart

In this lecture we will place the X-axis of the chart. These are called datasets. The datasets contain a lot of data values and determine the length of the bars.

04:53

Bar ChartJS: Placing the commands to draw the bar chart

In this lecture you will implement two lines of codes that will draw the chart. The codes will connect HTML with JavaScript. And connect the canvas tag with the data to draw the chart.

02:25

Bar ChartJS: Increasing the size and center the chart

In this lecture we will increase the size of the chart. Right now the chart is too small to read. We will increase the width, height and center the chart.

03:14

Bar ChartJS: Adjusting the basic features of the chart

In this lecture we will adjust the basic features of the chart. The basic features are all located in the datasets. We will change the color of the bars.

01:59

Bar ChartJS: Activating the advanced commands

In this lecture we will activate the advanced commands/features of the chart. we will unlock this option by using a specific line of code.

04:45

Bar ChartJS: Using advanced commands

In this lecture we will use the advanced commands. These commands will be focus on the scale and fontsize of the labels.

02:02

Bar ChartJS: Creating a Stacked Bar Chart

In this lecture we will create a stacked bar chart. We already ahve all codes in place so we do not need to change much.

This feature is a special feature that normally is not possible with ChartJS. So it is a real bonus if you are able to do this.

02:14

Bar ChartJS: Creating a Horizontal Bar Chart


In this lecture you will learn how you can switch from a standard bar chart to an advanced horizontal bar chart. This option is normally not possible with ChartJS. Gladly, there is a wonderful way to do it. We already have all the special coding ready. So, we all have to do is justplace one bit of coding to make it work. It is very easy once you have the foundation.

Brain Buster
1 question
Article

Bar ChartJS: The HTML code file completed

Download the complete HTML code file for reference. Please visit the resource section to download the ZIP-file.

Article

Stacked Bar ChartJS: The HTML code file completed

Download the complete HTML code file for reference. Please visit the resource section to download the ZIP-file.

Article

Horizontal Bar ChartJS: The HTML code file completed

Download the complete HTML code file for reference. Please visit the resource section to download the ZIP-file.

Section 4: How to make a radar chart with ChartJS?
00:40

Radar ChartJS: Introduction to how to create a radar chart.

In this section you will learn how to create your own radar chart from scratch. This is very useful because with a radar chart you can create professional comparison of data.

03:10

Radar ChartJS: Setting up the basic HTML frame work and the JavaScript files

In this lecture you will set up the foundation of HTML frame work. We also will connect the JavaScript files so everything will be in place to create our radar chart.

04:44

Radar ChartJS: Assigning the labels and datasets

In this lecture you will learn the terms labels and datasets. A radar chart work just like a line and a bar chart with the term labels and datasets. The labels are the text around the radar chart. The datasets are the values of ever radar field.

05:09

Radar ChartJS: Connecting the HTML with JavaScript and draw the radar chart

In this lecture you will learn how to connect the HTML with JavaScript and start drawing the radar chart. You will implement two lines of code. These lines are important and connects the HTML code with JavaScript. So the canvas tag understand how to draw the chart based on the datasets.

02:17

Radar ChartJS: Adjusting the height and width of the radar chart

In this lecture you will learn how to increase the size of the chart. Right now it is too small to read and we want to make it bigger by increasing the width and height.

06:38

Radar ChartJS: Adjusting the color of each radar field

In this lecture you will learn how to adjust the color of each radar field. In the chart there are two radar fields. These radar fields are now dull and grey. You even notice that one radar field is overlapping the other. We need to fix this and we will. We will create two radar fields with the color green and red.

01:10

Radar ChartJS: Activating the advanced features of the radar chart

In this lecture we will activate the advanced features of the radar chart. We can do this by adjusting a specific line of code. Implementing this code we will unlock all the advanced features.

05:02

Radar ChartJS: Using the advanced features of the radar chart

In the lecture you will learn how to use the advanced features of the radar chart. You will learn that there are radar chart specific features and also global chart configurations. Both of them are important and useful. In the resource section you have 2 links with all the features listed.

1 question

Test your knowledge!

Article

Radar ChartJS: The HTML code file completed

Download the complete HTML code file for reference. Please visit the resource section to download the ZIP-file.

Section 5: How to make a polar chart with ChartJS?
01:00

Polar ChartJS: Introduction to how to create a Polar chart.

In this section you will learn how to create your polar chart from scratch. A polar chart is a very useful chart to compare a specific data over a long time frame. it is also an unique way to display your data.

02:48

Polar ChartJS: Setting up the basic HTML frame work

In this lecture we will fast forward the basic HTML frame work. You probably understand how to do it now. So we will increase the speed and prepare the entire HTML part with canvas tag and connecting the JavaScript files.

03:47

Polar ChartJS: Inserting the values

In this lecture we will insert the values. It is important to understand this. Normally a chart in ChartJS makes use of Labels and Datasets. A polar chart works with values.

04:24

Polar ChartJS: Drawing the polar chart

In this lecture we will add the two final line of code. With those lines you will see your polar chart appear.

02:40

Polar ChartJS: Increasing the size and adjusting the background of the chart

In this lecture we will make our chart more easy to spot. The polar chart is too small and the background color of the chart needs to be adjusted.

03:51

Polar ChartJS: Basic adjustments of the segments

In this lecture you will learn how to color the segments of the polar chart. All these adjustments are basic adjustments.

01:47

Polar ChartJS: Activate the advanced features

In the lecture we will activate the advanced features for the polar chart. There are many advanced features ready but we need a line of code before we can use them.

04:27

Polar ChartJS: Using the advanced features

In this lecture we will use the advanced features for the polar chart. We already unlock this feature, now it is time to make use of it.

Brain Buster
1 question
Article

Polar ChartJS: The HTML code file completed

Download the complete HTML code file for reference. Please visit the resource section to download the ZIP-file.

Section 6: How to make a pie & doughnut/donut chart with ChartJS?
00:56

Pie & Donut ChartJS: Introduction to how to create a pie & doughnut chart.

In this section you will learn how to create your very own pie or doughnut chart in ChartJS. You will get an overview of what you will learn and you will learn a few advanced features as well.

01:23

Pie & Donut ChartJS: Creating the basic HTML frame work

In this lecture we will work on the basic HTML frame work. This part has been explained multiple times so we will fast forward and start at once with the canvas tags & divs.

03:03

Pie & Donut ChartJS: Understanding the term value

In ChartJS you already know the terms Labels and Datasets. However, the method differs from the line, bar and radar chart. Instead of using the term datasets we will use the term value. The value will determine the size of each segment.

04:22

Pie & Donut ChartJS: Drawing the pie chart

In this lecture we will draw the pie chart. Before you can do this you need to understand what we are doing. Right now we have HTML code and JavaScript coding. They are independent from each other. We need to connect them so they understand that the chart uses the data from JavaScript.

04:52

Pie & Donut ChartJS: Adjusting the basic features

In this lecture you will start to adjust the pie chart. The current design of the pie chart looks very dull. It is boring and if you hover over the pie segments the chart turns white. This is happening because we did not assign any colors to the chart. We will start to design it with colors and label each segment by adjusting the basic features.

02:22

Pie & Donut ChartJS: Increasing the size of the pie chart

In this lecture we will increase the size of the pie chart. Right now it is too small and hard to read. We want to increase the width and height of the pie chart. Secondly, we will center the chart.

01:52

Pie & Donut ChartJS: transform the pie chart to a donut chart

In this lecture we will focus on two things. First of all we will transform the pie chart to a donut chart. Secondly, we will activate the advanced features by placing a specific line of code.

03:25

Pie & Donut ChartJS: Using the advance features

In this lecture you will learn how to use the advance features. ChartJS offers many advanced features and you can use these features. Every feature can be found on the site of ChartJS. Please visit the resource section to see the link.

Brain Buster
1 question
Article

Pie ChartJS: The HTML code file completed

Download the complete HTML code file for reference. Please visit the resource section to download the ZIP-file.

Section 7: Final points and what the future will hold!
02:46

ChartJS: Final Points

In this course you received everything that is right now available about ChartJS. I want to thank you for joining the journey!

I truly hope you enjoyed this course, and see how valuable it is. If you do please give me a rating. I sincerely enjoy receiving ratings because it keeps me motivated to do even better!

Next, I am very sure ChartJS will be open for many more options. My promise to you is that I will keep this course as updated as possible. Especially if there are new chart styles introduced. However, if you discover a chart that is out but not yet discussed in this course. Just poke me and I will add an additional section to the course!

I will promise you this. The following updates will be visible soon in this course:

  • How to create a scatter chart with ChartJS
  • How to create error bar chart with ChartJS


01:33

ChartJS 2.0!

ChartJS is a wonderful library and other people love it just as much. However, they experience a huge set back. It is the restriction that ChartJS offers. Of course this restriction is not a restriction because ChartJS makes everything modular. Meaning that everyone can input their own chart style in as long as you have the knowhow.

Not everyone has the knowhow so someone created a new version of ChartJS called NewChartJS and is slightly more advanced but offers more features that ChartJS. Should you test this? Well, you can always check it out!

See the link in the resource section!

Section 8: Please give me input for the updated course!
Article

Share what you believe is missing in this course so I will be adding it in update! Just comment on this section!

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Nicky Wong, Data Analyst, Market Researcher, Data Visualizer!

Nicky Wong is an expert in translating data into market opportunities. Data is his passion, Excel, Databases and Big Data are truly wonderful topics. As an absolute data lover and he is always looking for ways to analyze it. It started with stock market facts and now quickly turned to everything that is unique and different.

However, all the information have one primairy goal and that is "How to use this information to gain a competitive advantage". As a Market Researcher with it roots in Marketing Nicky understands that knowledge is power. Whatever you do make sure you use data at your advantage.

=====================================================================

My vision of Data and the future

=====================================================================

Why Data visualization matters!

I truly belief that Big Data is giving us all a new obstacle to overcome! Information overload is a serious challenge and with Big Data it only multiplies the issue. If you are a data miner you will know that much data has no meaning if you cannot connect any meaningful dots.

Large chunks of data, reports and tables are not effective. It is impressive to get a huge database but it is demotivating for others to read data. The biggest data trend is increasing this issue! Big Data = Information Overload x 10.

From (Digital) Information Age to the (Digital) Understanding Age

A data analyst can analyze data but the most important skill is Data Visualization! These so called "data visualizers" will develop a new skill gathering meaningful information and present it in a very understandable and effective way.

The issue is not anymore the data but the way to give meaning and communicating meaning to others. The person who can do that will have a huge advantage in the so ever growing Big Data world.

Big Data is here! Data Visualizer is on it`s way! In all of my courses I use techniques to create understandable data and present it in an impactful manner.

Ready to start learning?
Start Learning Now