Scatter Chart JS. Create scatter 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.
8 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Scatter Chart JS. Create scatter chart with Chart JS to your Wishlist.

Add to Wishlist

Scatter Chart JS. Create scatter chart with Chart JS

Learn how to master Scatter charts with Chart JS. Something that is normally not possible. Make your data visual!
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.
8 students enrolled
Created by Nicky Wong
Last updated 6/2015
English
Learn Fest Sale
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 scatter chart with Chart JS from scratch!
  • Modify the scatter chart and apply own color styles
  • Understand how to use Chart JS
  • Able to visualize data in professional scatter 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

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

Scatter chart with Chart JS

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

In this course you will learn how to create a scatter 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 scatter 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 want 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. This method makes sure you really can follow along and avoid any kind of mistakes. 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 scatter 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 scatter chart
  • In the fourth section you will start to design the scatter chart with colors that you want.
  • In the fifth section you will learn how to unlock and use the advanced features for the scatter chart.

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

Why take this course?

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

The biggest question you might have is this. First of all this course will teach you in such an easy manner how to create a scatter chart in 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 are struggling a lot with learning for Chart JS and need a easy to understand guide.
  • 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 01:00:19
+
What you can expect and introduction of this course.
2 Lectures 04:48

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

Welcome to this course. In this lecture you receive a quick overview of the course and what you can expect from this course. At the end of this course you can expect to be one of the very few people who understand how to create a scatter chart with Chart JS.

Preview 02:48

Scatter Chart JS: Download the JavaScript files

In this lecture you will download the essential files for creating a scatter chart in Chart JS. In the resource section you can find the important documents that you need. If you prefer to download the latest files please check the resource section for the links to download the files.

Preview 02:00
+
Getting started with Chart JS, preparing the foundation of the scatter chart.
5 Lectures 06:45

Scatter Chart JS: Introduction to building the solid foundation for Chart JS

In this section you will learn how to set up a solid foundation for the scatter chart in Chart JS. The foundation is very important and the starting point for any chart at all in Chart JS.

Preview 00:29

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

Preview 01:18

Scatter Chart JS: Setting up the basic HTML framework for the scatter 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


Preview 01:48

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

Preview 01:34

Scatter Chart JS: Implementing the canvas tag for the scatter chart

In this lecture you will implement the canvas tag for the scatter 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.

Preview 01:36

Brain Buster
1 question
+
Creating the scatter chart, the basic parts
5 Lectures 14:12

Scatter Chart JS: Introduction to creating the scatter chart, the basic parts

In this section you will start and create a basic scatter 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.

Introduction to creating the scatter chart, the basic parts
00:35

Scatter Chart JS: Understand the labels and x- & y-axis

In this lecture we will start with the understanding of the labels, x-axis and y-axis values. The first thing we will do is give the stroke of the chart a label.

Understand the labels and x- & y-axis
02:43

Scatter Chart JS: Adding the x- & y- values for the data point

In this lecture you will learn how to apply the x- & y-axis values. We will assign 10 different values that will display the scatter chart later on.

Adding the x- & y- values for the data point
04:53

Scatter Chart JS: Connecting the canvas with JavaScript for the scatter 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.

Connecting the canvas with JavaScript for the scatter chart
02:55

Scatter Chart JS: Connecting the values and drawing the scatter 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.

Connecting the values and drawing the scatter chart
03:06

Brain Buster
1 question
+
Presenting your scatter chart professionally with basic functions.
5 Lectures 08:05

Scatter Chart JS: Introduction to presenting a scatter chart professionally

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

Introduction to presenting a scatter chart professionally
00:31

Scatter Chart JS: Adjusting the width and height of the scatter chart

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

Adjusting the width and height of the scatter chart
02:10

Scatter Chart JS: Adjusting the background color of the scatter chart

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

Adjusting the background color of the scatter chart
01:35

Scatter Chart JS: Adjusting the stroke line color of the scatter chart

In this lecture you will learn how to can adjust the stroke line color of the scatter chart.

Adjusting the stroke line color of the scatter chart
01:49

Scatter Chart JS: Adjusting the stroke line color of the scatter chart

In this lecture you will learn how to adjust the data point color of the scatter chart. we will change the color of the data point so the highlight effect will also match with the right color.

Adjusting the data point color of the scatter chart
02:00

Brain Buster
1 question
+
Advanced scatter chart features
12 Lectures 24:32

Scatter Chart JS: Introduction to the advanced scatter 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 different from the official Chart JS site.

Introduction to the advanced scatter chart features
00:48

Scatter Chart JS: Unlocking the advanced scatter chart features

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

Unlocking the advanced scatter chart features
02:06

Scatter Chart JS: Adjusting the scale line color of the scatter 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.

See the resource section for the links of the commands!

Adjusting the scale line color of the scatter chart
03:16

Scatter Chart JS: Increasing the thickness of the scale of the scatter 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 5 pixel thick. To do this we need to use a specific command.

See the resource section for the links of the commands!

Increasing the thickness of the scale of the scatter chart
01:48

Scatter Chart JS: Increasing the font size of the scale labels of the scatter 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.

See the resource section for the links of the commands!

Increasing the font size of the scale labels of the scatter chart
01:24

Scatter Chart JS: Changing the color of the scale fonts of the scatter chart

In this lecture you will lean how to adjust the scale fonts of the scatter chart. Right now the fonts are to dark and they almost blend in with the background. This is not what we want. We want to make it white and easy to spot.

See the resource section for the links of the commands!

Changing the color of the scale fonts of the scatter chart
01:36

Scatter Chart JS: Adjusting the grid lines of the scatter chart

In this lecture you will adjust the grid lines of the scatter chart. The grid line is very narrow. We will increase the thickness to 2 pixel. To do this we need to use a specific command.

See the resource section for the links of the commands!

Adjusting the grid lines of the width of the scatter chart
02:21

Scatter Chart JS: Adjusting the grid line color of the scatter chart

In this lecture you will adjust the grid line color of the scatter chart. The color now is hard to spot. We will make this grey. To do this we need to use a specific command.

See the resource section for the links of the commands!

Adjusting the grid line color of the scatter chart
01:49

Scatter Chart JS: Adjusting the thickness of the stroke of the scatter chart

In this lecture you will adjust thickness of the stroke of the scatter chart. It is too small we will make this 5 pixel thick. To do this we need to use a specific command.

See the resource section for the links of the commands!

Adjusting the thickness of the stroke line of the scatter chart
02:04

Scatter Chart JS: Adjusting the border of the data point of the scatter chart

In this lecture you will adjust the data point of the scatter chart. The border of the data point is now not in the right proportion. We will make this thicker. To do this we need to use a specific command.

See the resource section for the links of the commands!

Adjusting the border of the data point of the scatter chart
02:00

Scatter Chart JS: Adjusting the point dot radius of the scatter chart

In this lecture you will adjust the point dot radius of the scatter chart. This is now very small and needs to be larger.

See the resource section for the links of the commands!

Adjusting the point dot radius of the scatter chart
03:03

Scatter Chart JS: Removing the bezier curve effect

In this lecture you will remove the bezier curve effect. In Chart JS this option is always activated. This means we need to deactivate this. To do this we need to use a specific command.

See the resource section for the links of the commands!

Removing the bezier curve effect
02:17

Brain Buster
1 question
+
Conclusion, a quick recap and further learning
2 Lectures 01:58

Scatter Chart JS: Final point

This is the final lecture. First of all thank you very much for all your time and effort in learning how to create a scatter chart from scratch with Chart JS. Of course the journey does not end here! There is alot more that you can do and explore. For further learning check out the next lecture!

Scatter Chart JS: Final point
01:46

Chart JS the complete guide!

Are you interested in becoming pro? Check out this!

Further learning: Get your Chart JS master degree
00:12
About the Instructor
Nicky Wong
4.1 Average rating
377 Reviews
30,226 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.