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.
3 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 31
  • Length 1 hour
  • 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

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

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!

What are the 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).

What am I going to get from this course?

  • 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

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

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: Introduction of what you will learn and setting up
01:47

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.

00:52

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.

01:42

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.

Section 2: Getting started with radar chart, preparing the foundation of the radar chart.
00:30

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
02:26

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
01:10

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.

00:55

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.

01:28

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.

1 question

Test you knowledge!

Section 3: Create the basic radar chart in Chart JS
00:30

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
02:46

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.

02:39

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.

01:46

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.

02:02

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.

1 question

Test your knowledge!

Section 4: Presenting the radar chart professionally
00:28

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
01:38

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.

01:31

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.

01:34

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.

03:14

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.

1 question

Test your knowledge!

02:04

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.

01:52

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.

01:44

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.

01:55

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.

01:58

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.

1 question

Test your knowledge!

Section 5: Advanced features of the radar chart
00:25

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
01: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.

01:01

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.

00:47

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.

01:24

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.

01:17

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.

2 pages

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.

1 question

Test your knowledge!

Section 6: Conclusion, a quick recap and futher learning
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.

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?
Take This Course