Radar Chart Js, create your own radar chart with chart js!
0.0 (0 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.
4 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Radar Chart Js, create your own radar chart with chart js! to your Wishlist.

Add to Wishlist

Radar Chart Js, create your own radar chart with chart js!

Radar Chart JS. Master how to be a data visualizer and create a radar chart with Chart JS!
0.0 (0 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.
4 students enrolled
Created by Nicky Wong
Last updated 6/2015
English
Current price: $10 Original price: $20 Discount: 50% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 1 hour on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
Create a radar chart with Chart JS from scratch!
Modify the radar chart and apply own color styles.
Understand how to use Chart JS
Able to visualize data in professional radar charts
View Curriculum
Requirements
  • Have the willingness to take action.
  • Have an openmind a willing to apply what you learn.
  • Have a very bare minimum knowledge of HTML and CSS (not essential but useful).
Description

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

Radar Chart JS

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

Always wanted to create a radar chart for the web? Learning how to create a chart for a website is very valuable! In this course you will learn how to create a radar chart from scratch with Chart JS!

You will be able to code one with Chart JS and learn how to adjust many aspects of the chart. And this all in a very easy pace video course. Every lecture will handle one line of coding. This makes it easy to follow and easy to check your codes.

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

Structure of this course

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

The course is very structured and every section will handle a specific part of the chart! Each part is a building block of the other. You will have a firm foundation and it all connects with each other.

  1. In the first section you will learn how to set up your file and download the file.
  2. In section 2 you will learn how to get your document ready to make charts. Before you can do anything your HTML framework needs to be ready.
  3. Section 3 is writing the code in JavaScript with Chart JS library. In this section you will create your first radar chart in Chart JS!
  4. Section 4 will be the design part of Chart JS. Having a chart is not enough it needs to be styled in a way that it looks professional! In this part you will learn how to style and color the chart.
  5. Section 5 is the advanced feature of Chart JS. A radar chart has many options and features. In this part you will learn what features you can use and how to activate them.
  6. Section 6 the final points and closing of this course.

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

Why take this Chart JS course?

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

This course is designed for anyone who want to learn the Chart JS library quick. It focus on the essentials and shows it in an easy to follow manner. Chart JS has a huge documentation without any clear explanation in videos. The challenge of reading a huge documentation can be frustrating.

I know you want to start right away with creating! Learning starts by doing and not by reading. In this course you learn how to do it in an hour. It will save you a huge amount of time that you can invest in what really matters! Making charts for your website.

And of course, data visualization is a skill that is growing quick! It is in high demand because of Big Data! Learning this skill will definitely increase your value! Due to Big Data everybody struggles with data overload. The only way to digest these huge amount of data is with a chart! Charts save time and can tell a story in a blink of an eye!

You might think Excel is already doing this, but no Excel is not flexible enough! Do you read charts on your phone with an Excel sheet? Most likely you will open the document at home on your desktop.

Excel is not flexible but a website is! However creating charts on a site is challenging! This challenge is your opportunity! Learn how to create a chart right away. Exploit this opportunity by being the one of the few experts that companies are urgently looking for!

Take this course right away!

Every second you wait you leave money on the table! Your competitor is already learning while you are "thinkering" about it! Click on take this course right now!

Who is the target audience?
  • Data Analysts that need to visualize data in chart on the web.
  • Students who want to improve their design skills with chart design.
  • Webdesigners that need data visualization skills to communcate data in visuals.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 31 Lectures Collapse All 31 Lectures 49:34
+
Introduction of what you will learn and setting up
3 Lectures 04:21

Radar Chart JS: What you can expect from this course and what you will learn

In this lecture you will get a quick introduction of the course, meet your course instructor and the goals that you will achieve when you complete this course.

Preview 01:47

Radar Chart JS: Introduction to this course and what you will learn

In this course you will learn how to create a radar chart with Chart Js. Chart Js is a quickly growing JavaScript library to display charts on your page. My personal vision is that we will switch more and more to charts on the web as the amount of data increases.

This course will teach you how to make great use and improve your skill as a chart builder on the web. You will learn how to display values in a bar chart in a very unique and appealing way. The main goal is to replicate the chart that you see on the screen.

Preview 00:52

Radar Chart Js

In this lecture you will prepare with the right documents. Chart Js has a special JavaScript file that you need to download. You can download one of the two files:

  • Chart.js file
  • Chart.min.js file (minimized version, available in the resource section in a ZIP-file)

For this course I will be using the minimized version. It is fully optimized for speed and requires the least amount of kb to download. This is important if your future readers want to see your chart. It always needs to be quick.

In the resource section I placed a downloadable minimized version. However, I do understand that perhaps you want to download the latest version. In that case visit the official list. Link is included in the resource section.

Preview 01:42
+
Getting started with radar chart, preparing the foundation of the radar chart.
5 Lectures 06:29

Radar Chart JS: Setting up the basics!

In this section you will start to create the basic set up. This is essential because without a solid foundation Chart JS will not be able to function well. In this section you will learn:

  1. To set up the basic HTML frame work essential for the radar chart in Chart JS.
  2. Connecting the HTML document with the Chart.min.js file in the document.
  3. Create a DIV tag that will be used as additional support for the radar chart in Chart JS.
  4. Implementing the canvas tag for the radar chart
Preview 00:30

Radar Chart JS: Basic HTML framework

In this section you will start to create the basic framework in HTML. This part will be essential. You will learn:

  1. The basic set up of HTML
  2. Use of HTML tag
  3. Use of Head tag
  4. Use of Body tag
  5. Use of Title tag
Preview 02:26

Radar Chart JS: Connecting the downloaded file Chart.min.js

This lecture will focus on connecting the chart JS file. In this case I expect you download or use the Chart.min.js file. If in case you use any other file, make sure you rename Chart.min.js to the right name.

Preview 01:10

Radar Chart JS: Creating the DIV to center the radar chart

In this lecture you will learn how to create a <div> tag. This <div> tag will be used to center the radar chart later on.

Preview 00:55

Radar Chart JS: Implementing the canvas tag

In this lecture you will learn how to implement the <canvas> tag and place it between the <div> tag. This is important because that will be needed to center the canvas later on.

Preview 01:28

Test you knowledge!

Brain Buster
1 question
+
Create the basic radar chart in Chart JS
5 Lectures 09:43

Radar Chart JS: Introduction to the basic coding of a radar chart

In this lecture you will learn the basic coding part of a radar chart in Chart JS. You will learn:

  1. How to create the Y-axis / labels of the radar chart
  2. How to create the X-axis /datasets of the radar chart
  3. How to connect the canvas tag with the JavaScript command in HTML
  4. How to draw a basic radar chart
Introduction to creating the radar chart, the basic parts
00:30

Radar Chart JS: Creating the Y-axis /labels of the radar chart

In this lecture you will start creating the Y-axis or labels of the radar chart. In Chart JS you work in reverse order. You first start with the Y-axis (called labels) and after that you code the X-axis.

Creating the Y-axis / labels of the radar chart
02:46

Radar Chart JS: Creating the X-axis of the radar chart

In this lecture you work on the X-axis. This called the datasets because they contain multiple data points. In this case you will create two datasets because you want the radar chart to display two radarfields.

Creating the X-axis / datasets of the radar chart
02:39

Radar Chart JS: Connecting the canvas tag with the JavaScript command in HTML

In this lecture you will connect the canvas tag with the JavaScript command. This is essential because JavaScript contains all the data values that needs to be displayed in the canvas.

Connecting the canvas tag with the JavaScript command in HTML
01:46

Radar Chart JS: Drawing the radar chart

In this lecture you draw the radar chart. This is the final line that is needed to display the chart. The chart will look very basic without any colors. You might notice that the radarfields are overlapping each other. In the next section you will learn how to present your chart and address the overlapping issue.

Drawing the radar chart
02:02

Test your knowledge!

Brain Buster
1 question
+
Presenting the radar chart professionally
10 Lectures 17:58

Radar Chart JS: Introduction to presenting the radar chart professionally

In this section you will learn how to design your radar chart. You will be able to change the color of the radar field and many other interactive options. You will learn how to:

  1. Center the radar chart
  2. Increase the width and height of the radar chart
  3. Label the radarfields for better structure of the datasets
  4. Change the filler color of the radarfields
  5. Change the color of the lines
  6. Change the color of the data points
  7. Change the border line colors of the data points
  8. Highlight the data points with an hover effect
  9. Highlight the stroke color of the data points
Introduction to presenting the radar chart professionally
00:28

Radar Chart JS: Center the radar chart

In this lecture you will center the radar chart. At the moment it is located in the corner. This is not good. We want to place it in the middle.

Center the radar chart
01:38

Radar Chart JS: Increasing the width and height of the radar chart

In this lecture you will increase the widht and height of the radar chart. Right now the radar chart is too small. Always give the width a higher amount of pixels compare to the height. If not the chart will get a stretched look.

Increasing the width and height of the radar chart.
01:31

Radar Chart JS: Labeling the radarfields for better structure of the datasets

In this lecture you will learn a method to organize your radarfields. You can label them so you instantly know which radarfield you are adjusting. This will save you alot of time when you want to adjust the datasets.

Labeling the radarfields for better structure of the datasets
01:34

Radar Chart JS: Changing the filler of the radarfields.

In this lecture you will learn how to change the filler color of the radarfields. You already notice that one radarfield is overlapping the other. This is not good. We will solve this by using the RGBA code and add transparancy to the filler.

Changing the filler color of the radarfields.
03:14

Test your knowledge!

Brain Buster
1 question

Radar Chart JS: Changing the color of the lines of the radar chart

In this lecture you will learn how to change the color of the lines. These lines are called strokes. We will change it from grey to the color of the radarfields.

Changing the color of the lines of the radar chart
02:04

Radar Chart JS: Changing the color of the data points of the radar chart

In this lecture you will learn how to change the color of the data points. At the moment they are white and that needs to change to make it visible.

Changing the color of the data points of the radar chart
01:52

Radar Chart JS: Changing the border color of the data point of the radar chart

In this lecture you will learn how to change the border color of the data point. Every dot has a border and that border needs to be modified so it has the same color as the strokes of the radar field.

Changing the border of the data point of the radar chart
01:44

Radar Chart JS: Highlight the data points with a hover effect.

In this lecture you will learn how to make the chart more interactive with a hover effect. We will highlight the data points if we hover of it.

Highlight the data points with a hover effect
01:55

Radar Chart JS: Highlight the stroke color of the data points of the radar chart

In this lecture you will learn how to highlight the stroke color of the data points. This will highlight the data point and the border will match as well.

Highlight the stroke color of the data points of the radar chart
01:58

Test your knowledge!

Brain Buster
1 question
+
Advanced features of the radar chart
7 Lectures 06:19

Radar Chart JS: Introduction to advanced features of the radar chart

In this section you will learn how to use the advanced features of the radar chart. You will learn how to:

  1. Add the advance feature command in the radar chart
  2. Remove the scale lines from the chart
  3. Remove the angle line from the chart
  4. Add a number for every scale line in the chart
  5. Increase the label font size of the chart
  6. A complete list of all advanced features
Introduction to advanced features of the radar chart
00:25

Radar Chart JS: Adding the advanced feature command in the radar chart

In this lecture you will learn how to add the advanced feature command. This is important because this command will open all additional commands that you can use.

Adding the advance feature command in the radar chart
01:25

Radar Chart JS: Removing the scale lines from the radar chart

In this lecture you will remove the scale lines from the radar chart. Removing them will give your chart a more empty look but it can be great if you know how to design it properly.

Removing the scale lines from the radar chart.
01:01

Radar Chart JS: Removing the angle line from the radar chart

In this lecture you will remove the angle line from the radar chart. The angle line the "skeleton" of the chart. By removing that you will only see the radarfields. This function can be useful if you have a keen eye for design.

Removing the angle line from the radar chart
00:47

Radar Chart JS: Adding a number for every scale line in the chart

In this lecture you will add numbers on every scale line. This is usually displayed by Excel radar charts. They will show the values in the grid lines of the chart. You will emulate this as well for your radar chart.

Adding a number for every scale line in the radar chart
01:24

Radar Chart JS: Increase the label font size of the radar chart

In this lecture you will learn how to increase the font size of the labels. Right now the labels are very small and hard to read. The default pixel size is 10 and is too small. We will increase this to 20 pixel by using the advance command.

Increase the label font size of the radar chart
01:17

Radar Chart JS: Reference sheet with all commands

In this lecture you will find all the commands that are advanced. Download the reference sheet for the complete overview of visit the resource site.

Radar Chart JS reference sheet with all commands
2 pages

Test your knowledge!

Brain Buster
1 question
+
Conclusion, a quick recap and futher learning
1 Lecture 02:44

Radar Chart JS: Final points

In this lecture you will get a quick recap of what you have learned. Remember that Chart JS is a growing JavaScript library. We only scratched the surface and there is much more to discover.

Final points
02:44
About the Instructor
Nicky Wong
4.1 Average rating
316 Reviews
26,417 Students
22 Courses
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.