Polar Area Chart JS, create it from scratch with Chart JS

Polar Chart with Chart JS / Charts JS. Learn how to create your polar chart with Chart JS and because a data visualizer!
5.0 (1 rating) 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.
5 students enrolled
$20
Take This Course
  • Lectures 26
  • Contents Video: 1 hour
    Other: 0 mins
  • 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

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

Polar chart with Chart JS

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

In this course you will learn how to create a polar chart from scratch! The web is changing and new skills are in huge demand! One of these skills is data visualization for the web. How good are you in visualizing data into chart on the web?

Many people prefer the easy road. Just make it in Excel and post the picture on the web. Very easy but not very beneficial nor professional. Companies are realizing that websites is one of the best places to share data and to create dashboards.

Because of this, companies need skillful chart makers for the web! This skill will keep on growing and is in huge demand! In this course you will learn how to create your own polar chart with one of the best JavaScript library named Chart JS.

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

What can you expect from this course?

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

This course is designed for everyone who wants to create a chart for the web but have no knowledge about it. It might be useful to have some HTML and CSS knowledge but even without you can do it!

This course teaches you in a very easy bite size manner. You will start making a chart in minutes just by following along with every video. Each video handles one line of coding at the time. This means you really can follow this course very easy and you cannot make a mistake. You cannot fail with this if you follow the video.

You will also understand the background and meaning of the codes. Learning how to code is just like learning a language. You need to know first the meaning of the words. Once you understand it you will be able to create your own charts. I explain every piece of code we use! So at the end you can fluently create a polar chart.

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

How structured is this course?

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

This course works with the spoon feeding method. This basically means you will handle one piece of code everytime. Starting to code can be hard if we instantly handle 10 piece of code at once. The best way to learn is with baby steps for, after walking and finally running!

This course makes sure you know what to do and how to do it and why you do it. Once you learned the skill you will notice that create charts is really easy.

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

Course set up and section:

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

  • In the first section you will get an overview and download the right files.
  • The second section handles the basic setup of HTML, Chart JS and JavaScript.
  • In the third section you will learn how to create the polar chart
  • In the fourth section you will start to design the polar chart with colors that you want.
  • In the fifth section you will learn how to unlock and use the advanced features for the polar chart.

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

Why take this course?

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

The biggest question you might have is this. This course teaches you how you can create a Polar chart with Chart JS. Video is the best way to learn because you can follow along and understand it. Finally, the real value of this is that many companies are paying data visualizers a huge salary. Why??

Data visualizers have the ability to translate Big Data into a chart. This wonderful talent is a real time saver. With Big Data we experience an extreme overdose of data overload. The best medicine for this overdose is the use of charts! Charts save time and can translate data that takes hours to read into consuming it in only seconds! Charts is a super weapon! Learning this skill means real values for a company and an increase pay raise! So do not learn this skill for me but for you and get that pay raise!

Take this course right away!

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 polar chart with Chart JS from scratch!
  • Modify the polar chart and apply own color styles.
  • Understand how to use Chart JS
  • Able to visualize data in professional polar 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.
  • People who struggle alot with the complicated ChartJS documentation and want it easy.

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:41

Polar Chart JS: What you can expect from this course and introduction

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.

01:17

Polar Chart JS: Download the files

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 the polar Chart, preparing the foundation of a polar chart.
00:30

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

01:14

Polar Chart JS: Creating the HTML file for Chart JS.

In this lecture you will create a HTML file. This is a very basic lesson just to start with.

01:24

Polar Chart JS: Setting up the basic HTML framework for the polar chart in Chart JS.

In this lecture you will learn how to set up the basic HTML framework. You put the standard tags in place.

  • HTML
  • Head
  • Body
  • Title
00:54

Polar Chart JS: Connecting the HTML document with the two files in the document

In this lecture you will connect the HTML document with the two JavaScript library files that we downloaded in lecture 2.

01:46

Polar Chart JS: Implementing the canvas tag for the Polar chart

In this lecture you will implement the canvas tag for the polar chart. Chart JS works with a canvas tag and this is what we need. You will also implement a div tag that is essential for options.

Section 3: Creating the polar chart, the basic parts
00:42

Polar Chart JS: Introduction to creating the polar chart, the basic parts

In this section you will start and create a basic polar chart. You will notice that once completed the scatter chart will have a very minimal look. The main goal of this section is that you have a scatter chart to display. Once the basics are ready we will continue to the advanced parts.

03:55

Polar Chart JS: Creating the labels for every segment of the polar chart

In this lecture we will create a label for every polar segment. We want to make sure that each segment will have a label.

02:06

Polar Chart JS: Adding the values for every segment of the polar chart

In this lecture you will learn how to add value for every segment of the polar chart. The values here will determine the size of each segment.

03:20

Polar Chart JS: Connecting the canvas with JavaScript for the polar chart

In this lecture you will connect the canvas with JavaScript. Right now the HTML and JavaScript codes are not connected. They are in the same file but they do not communicate yet. We will connect this so the canvas tag can read the JavaScript commands.

02:44

Polar Chart JS: Connecting the values and drawing the polar chart

In this lecture you will connect the values and draw the chart. Once JavaScript is connected the next part is making sure they read the right data that is meant for the chart. We will place a line of code that will cover this part.

Brain Buster
1 question
Section 4: Presenting your bar chart professionally with the basic functions.
00:48

Polar Chart JS: Introduction to presenting a polar chart professionally

In this section you will start with the basic feature to design a profesional looking polar chart. You will learn all basic features to present the chart.

02:32

Polar Chart JS: Adjusting the width and height of the polar chart

In this lecture you will start with increasing the width and height of the polar chart. The chart is right now too small to read.

01:59

Polar Chart JS: Adjusting the background color of the polar chart

In the lecture you will adjust the background color of the polar chart. It is right now white and we will make it light grey.

03:29

Polar Chart JS: Adjusting the colors of every segment of the polar chart

In this lecture you will adjust the color of every segment of the polar chart. In this case it will be all green except one segment.

03:28

Polar Chart JS: Creating a highligh effect for every segment of the polar chart

In this lecture you will learn how to highlight every segment of the polar chart and how to use the Alpha transparancy numbers.

Brain Buster
1 question
Section 5: using the advanced polar chart features
00:33

Introduction to the advanced polar chart features

In this section you will learn how to use and apply all the advanced features of a scatter chart. This is important because they are based on official Chart JS site.

02:12

Polar Chart JS: Unlocking the advanced feature option

In this lecture you will start by unlocking the advanced features of the polar chart. This is a specific line of code that is essential to unlock all features.

02:54

Polar Chart JS: Adjusting the scale line color of the polar chart

In this lecture you will adjust the scale line color. Right now the scale line is not clear. We will make this white. To do this we need to use a specific command.

01:51

Scatter Chart JS: Adjusting the thickness of the scale lines of the polar chart

In this lecture you will adjust the thickness of the scale line. Right now the scale line is too narrow. We will make this 3 pixel thick. To do this we need to use a specific command.

02:01

Polar Chart JS: Increasing the segment stroke lines of the polar chart

In the lecture we will increase the segment stroke lines of the polar chart. This is right now 2 pixel thick. We want to match this with the scale lines so it needs to be 3 pixel thick.

02:19

Polar Chart JS: Increasing the font size of the scale labels of the polar chart.

In this lecture you will adjust the scale labels. It is very hard to read the text and this needs to be larger. We will make this 20 pixel big. To do this we need to use a specific command.

02:16

Polar Chart JS: Removing the backdrop tag of the scale font labels of the polar chart

In this lecture we will remove the backdrop tag of the font labels. The backdrop tag is the tag that displays the text.

Brain Buster
1 question
Section 6: Conclusion, a quick recap and further learning
02:05

Polar Chart JS: Final Points

In this lecture you will get a quick recap of everything you have learned. Understand that practice is essential and explore more! Chart JS has so much to offer and learning more will make you more valuable in the future! You are now a starting data visualizer! Improve yourself and be an expert!

Article

Chart JS the complete guide!

Are you interested in becoming pro? Check out this!

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