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.
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!
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.
Radar Chart JS: Introduction to this course and what you will learn
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.
Radar Chart Js
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.
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:
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:
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.
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.
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.
Test you knowledge!
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:
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.
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.
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.
Test your knowledge!
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:
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.
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.
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.
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.
Test your knowledge!
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.
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.
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.
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.
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.
Test your knowledge!
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:
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.
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.
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.
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.
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.
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.
Test your knowledge!
Radar Chart JS: Final points
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.