Multi Level Pie Chart JS, learn to create it with Charts JS
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.
10 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Multi Level Pie Chart JS, learn to create it with Charts JS to your Wishlist.

Add to Wishlist

Multi Level Pie Chart JS, learn to create it with Charts JS

Multi Level Pie Chart JS: Discover how you can create you own Multi Level Pie Chart with Chart JS from scratch!
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.
10 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 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create a multi pie chart with Chart JS from scratch!
  • Modify the multi pie chart and apply own color styles.
  • Understand how to use Chart JS
  • Able to visualize data in professional multi pie 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

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

Multi Level Pie chart with Chart JS

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

In this course you will learn how to create a multi level pie 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 multi level pie 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 multi level pie chart
  • In the fourth section you will start to design the multi level pie chart with colors that you want.
  • In the fifth section you will learn how to unlock and use the advanced features for the multi level pie chart.

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

Why take this course?

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

The biggest question you might have is this. This course teaches you how you can create a multi level pie 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!

Who is the target audience?
  • People who struggle alot with the complicated ChartJS documentation and want it easy.
  • 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 26 Lectures Collapse All 26 Lectures 01:00:51
+
Introduction of what you will learn and setting up
2 Lectures 04:56

Multi Pie Chart JS: Introduction to multi pie chart JS and what you can expect from this cours

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

Multi Pie Chart JS: Download the files for the multi pie chart with 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.


In the resource section you also have all the files prepared so you do not have to visit the site.

Preview 02:22
+
Getting started with multi pie chart, preparing the foundation of the chart.
5 Lectures 08:10

Multi Pie 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 multi pie 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 multi pie chart in Chart JS.
  4. Implementing the canvas tag for the multi pie chart
Preview 00:31

Multi Pie Chart JS: Creating the HTML document

In this lecture we will start by creating the HTML file.

Preview 01:43

Multi Pie 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 01:39

Multi Pie Chart JS: Connecting the HTML document with the JavaScript file in the document.

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. Also download the other file and connect that as well.

Preview 02:10

Multi Pie 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.

Implementing the canvas tag for the multi pie chart
02:07
+
Create the basic multi pie chart in Chart JS
5 Lectures 16:51

Multi Pie Chart JS: Introduction to the basic coding of a multi pie chart

In this lecture you will learn the basic coding part of a multi pie chart in Chart JS.

Preview 00:58

Multi Pie Chart JS: Creating the values for center and the first layer.

In this lecture you add values to each multi pie chart.

Multi Pie Chart JS: Creating the values for center and the first layer.
04:31

Multi Pie Chart JS: Creating the second layer

In this lecture we will focus on creating the second layer of the multi pie chart.

Multi Pie Chart JS: Creating the second layer
04:30

Multi Pie 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
03:24

Multi Pie Chart JS: Drawing the multi pie chart

In this lecture you draw the multi pie chart. This is the final line that is needed to display the chart. The chart will look very basic without any colors. In the next section you will learn how to present your chart more professionally.

Drawing the multi pie chart
03:28

Brain Buster
1 question
+
Presenting the multi pie chart professionally with the basic features
6 Lectures 20:01

Multi Pie Chart JS: Introduction to presenting the multi pie chart professionally

In this section you will learn how to design your multi pie chart with the basic features.

Introduction to presenting the multi pie chart professionally
00:36

Multi Pie Chart JS: Increasing the width and height of the multi pie chart

In this lecture you will increase the width and height of the multi pie chart. Right now the multi pie chart is too small. Always give the width a higher amount of pixels compare to the height.

Increasing the width and height of the multi pie chart.
02:13

Multi Pie Chart JS: adjusting the background color the multi pie 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.

Adjusting the background color the multi pie chart
01:57

Labeling the multi pie segments for better structure of the datasets
04:39

Multi Pie Chart JS: Assigning colors for each multi pie segment

In this lecture you will learn how to color each segment of the multi pie. Right now it is not displaying properly. So we will adjust that.

Assigning colors for each multi pie segment
05:04

Multi Pie Chart JS: Adding a highlight effect for each multi pie segment

In this lecture you will add a highlight effect or hover effect for each multi pie segment.

Adding a highlight effect for each multi pie segment
05:32

Brain Buster
1 question
+
Advanced features of the multi pie chart
6 Lectures 08:47

Multi Pie Chart JS: Introduction to advanced features of the multi pie chart

In this section you will learn how to use the advanced features of the multi pie chart.

Introduction to advanced features of the multi pie chart
00:43

Multi Pie Chart JS: Adding the advanced feature command in the multi pie 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 multi pie chart
01:37

Multi Pie Chart JS: Increase the width of the segment to make the chart larger

In this lecture you will learn how to increase the widht of the segments so it will look larger.

Increase the width of the segment to make the chart larger
02:36

Multi Pie Chart JS: Adjusting the angle of the multi pie chart

In the lecture you will learn how to change the angle of the multi pie chart. Sometimes you want to adjust the angle of the chart to the east, south or west.

Adjusting the angle of the multi pie chart
01:36

Multi Pie Chart JS: Removing the segment strokes of the multi pie chart

In this lecture we will remove the strokes of the multi pie chart.

Removing the segment strokes of the multi pie chart
01:25

Multi Pie Chart JS: Multi Pie chart reference sheet with all the commands

In this lecture you have a complete overview of all the commands for the multi pie chart.

Multi Pie chart reference sheet with all the commands
00:50

Brain Buster
1 question
+
Conclusion, a quick recap and futher learning
2 Lectures 02:07

Multi Pie 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
01:55

Chart JS the complete guide!

Are you interested in becoming pro? Check out this!

Bonus: Further learning
00:12
About the Instructor
Nicky Wong
4.1 Average rating
354 Reviews
28,334 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.