Line chart JS. Learn how to create and modify from scratch!

Line chart JS. Create professional looking Line charts with Chart JS. Visual data experts are in high demand!
3.6 (4 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.
27 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 30
  • 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 4/2015 English

Course Description

How good are your website charting skills?

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

We are in an information overload!

Big Data is coming and it is coming fast! Sadly, we are experiencing a huge challenge. We are already in an information overload society! And Big Data is pushing it our maximum limits.

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

What is the solution to the never ending stream of information?

Big Data meets Data Visualizors! A data visualizor is someone who can visualize data in such a way that the essential data can be displayed! While Big Data grows the demand for high paying charting specialist that can organize data and present it intuitively will grow along.

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

Time is money!

The solution of Big Data is Data that can be read in a matter of seconds! Every second count and the difference between a 1 minute and 10 seconds is huge! The best thing of all! Big Data is here to stay forever! Charting Specialists will be a forever in demand skill and we just start to experience it!

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

This course is the starting point a very new carrier in data visualization!

Big Data specialists will receive an average salary of $100.000. The real challenge is not gathering data but how to make data understandable!

This course shows you and only SCRATCHES the surface of this fenomenal subject! My passion of charts and data is huge! In this course I am sharing with you things that I truly enjoy. I only wished I knew this years ago!

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

We are living in an (digital) information age!

The age of the mind! The person with the best information will have a great advance! But there is a big change heading toward us! With information overload we do not want anymore too much information!

From (digital) Information age to (digital) Understanding Age!

The future is now for the experts that can gather the information and make something useful out of it. Information is only power if you understand it! Charts is the most POWERFUL way to do it!

This course shows you how you can create your charts. Excel is wonderful but it does not support the speed of the web! Chart JS does! This course is really a course that prepares you for the future! How fast can use make information understandable and share it on your webpage quickly?

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

With this course you will succeed and learn how to make wonderful quickly to understand digital charts for your website!

Go ahead and start taking action! Take this course right away and build your future!

What are the requirements?

  • Have the willingness to take MASSIVE action!
  • Have an openmind to participate.
  • Understand the very basics of HTML and CSS.
  • Have basic text editor.

What am I going to get from this course?

  • Create your own Line Charts.
  • Design and color your Line Charts.
  • Create a multiple line chart from scratch.
  • Understand how to assign values to the Y-axis and X-axis.
  • Create professional looking charts for your website.
  • Visualize data in line charts like an expert!

What is the target audience?

  • For starters who want to create charts for a website and need to a quick and easy guide with step by step explaination.
  • Beginners what want to understand how to use Chart Js.

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

Chart.Js Introduction to line chart

Discover how to create charts on your website with Chart.Js. A fun and professional way to present your data more visual on your site.

Data visualization is high in demand. With Big Data we need faster ways to digest data. Information overload is a common issue. With Chart.Js you start to focus on a new way of presenting the data online. Everyone has access to view your data and you save time in sending Excel reports.

This course will teach you how to make a line chart and makes it easy to understand.

00:47

Chart Js

Before you start you have to download the file. In the resource section you can find the file (ZIP FILE). If ever you prefer the download the latest version please visit the website of Chart Js. You can find the link in the resource section.

Section 2: Getting started with the Line Chart, creating your own line chart.
01:16

Chart Js, Creating your line chart!

In this lecture you will learn how to create the basics so you are ready to start. You will learn how to:

  • Create the basic framework in HTML
  • Connect the Chart Js file
01:04

Chart Js, Assigning the Canvas Tag

In this lecture you will learn how to create a canvas tag and make it ready! The canvas tag will "draw" the chart based on the assigned values you give it in JavaScript.

02:30

Chart Js, the Y-axis.

In this lecture you will understand how the Chart Js is build. The set up is just like a chart. It contains a X-axis and a Y-axis. In this part you will focus on the Y-axis. You will learn how to:

  • Label the Y-axis
  • Assign specific values to the Y-axis.
02:27

Chart Js, datasets and datapoints for X-axis

In this lecture you will learn how to create the datasets and assign specific values to the X-axis. You will understand how to:

  • Assign specific values to X-axis
  • Set up the data structure for X-axis.
  • You understand the structure of } ] } (Curly Brackets, Brackets, Curly Brackets)
1 question

This quick quiz will test your knowledge about Chart Js what you have learned so far.

02:36

Chart Js, connecting the ID with javaScript

In this lecture connects the ID that will be used to display the chart and orders the 2D element to draw the Canvas.

03:06

Chart Js, drawing the chart lines

In this lecture you will learn give Javascript the connect to draw the chart based on the assigned values of the X- & Y-axis.

1 question

Test your knowledge so far! Do you know the answer of this quiz?

Section 3: Designing and layout changes of chart, strokes and data points.
00:28

Chart Js, Introduction section 3 (Learn how to design and color your chart)!

In this lecture you will get a quick overview of what you will learn in this section. This section is focused on how you can design your chart to make it professional looking. You will learn to:

  • Create a background coloring for the entire body (HTML/CSS)
  • Adjusting the width and height of the chart by connecting it to CSS.
  • Change the fill color from grey to any color you want in JavaScript/Chart JS.
  • Assign specific colors to the line/stroke of the chart in JavaScript/Chart JS.
  • Assign specific colors to the data points in JavaScript/Chart JS.
  • Coloring the point stroke in JavaScript/Chart JS.
03:09

Chart Js, Adjusting the width and height of the chart by connecting it to CSS.

In this lecture you will create a new background color that is better suited and you will create a larger chart. You will adjust the width and height of the chart by using CSS and connecting with your Canvas and JavaScript.

02:26

Chart Js, coloring the stroke lines of the chart.

In this lecture you will color the stroke lines of the chart. This should always stand out from the filler color. If they are both equal make sure the filler is transparant and the stroke is solid.

02:17

Chart Js, coloring the filler of the chart

In this lecture you will color the unimpressive looking drak grey into something appealing. You will give the fill color something that is better suited and with a slightly transparant design. You will learn:

  1. How to use the RGBA color coding
  2. How to color the filler of the chart into something impressive and professional.
00:58

Chart Js, coloring the data points

In this lecture you will make the color points more appealing. At the moment it has no assigned color and automatically follow the standard color. You will make the data points stand out by using the simple color coding system of HEX.

01:49

Chart Js, colorin the point strokes of the chart.

In this lecture you will color the point strokes. The point stroke is the so called "border" around the dot of the X-axis. This does not have a real color yet and we need to assign it. The best advise is to be consistent. Always use the same color for point stroke as you did for the stroke. Consistent design makes your chart/website more professional.

1 question

Brain Buster Challenge. In quiz you will test your knowledge fromm what you have learned so far.

Section 4: Advanced chart options
00:39

Chart Js, Introduction section 4 (Advanced chart options)!

In this lecture you will get a quick overview of what you can expect from section for. You will learn how to use advanced tricks such as:

  • Multiple lines in a chart
  • Displaying and removing grid lines from a chart.
  • Coloring the grid lines from a chart
  • Adjusting the grid line thickness/width
  • Removing Horizontal and Vertical grid lines in a chart
04:54

Chart Js, implementing multiple lines in a chart.

In this lecture you will learn the advanced tricks of adding multiple line chart.

  • You will learn how to add a second line and change the colors of the chart.
  • You will learn how to add a third line and change the colors of the chart
  • You will learn about the RGBA color coding such as: "rgba(123,234,23,4.0)".
  • You will learn about the HEX color coding such as: "#FFF".
1 question

Test your knowledge about Chart Js till now! Do you know this answer?

01:26

Chart Js, displaying and removing grid lines of a chart

In this lecture you will learn the advanced trick of adding and removing the grid lines of a chart.

02:26

Chart Js, coloring the grid lines of a chart

In this lecture you will learn how to color the grid lines in multiple options.

  • Coloring with the RGBA color coding such as: "rgba(123,234,23,4.0)".
  • Coloring with the HEX color coding such as: "#FFF".
01:17

Chart Js, adjusting the grid line thickness/width.

In this lecture you will learn how to change the gridlines thickness and width by an exact amount of pixels.

01:52

Chart Js, removing the horizontal and veritcal grid lines.

In this lecture you will learn how to manipulate the grid lines and remove the Horizontal lines or Vertical lines or both lines.

1 question

Test what you have learned from teh Advanced Chart options

Section 5: Advanced Chart Options (The Bezier Curve options)
00:53

Chart Js, Advanced Chart Options with the Bezier Curve

In this lecture you will learn how to:

  • Understand what the Bezier Curve is.
  • Activate and disable the Bezier Curve.
  • How to increase the curve tension of the stroke line.
01:27

Chart Js, removing the Bezier Curve and give the chart a pointy look.

In this lecture you will learn how to remove the Bezier Curve and how to give it a strong point or edgy look.

02:11

Chart Js, Adding Bezier Curve and controlling the tension of the line.

In this lecture you will learn how to controle the line tension and give it a more curved look.

1 question

Testing what you have learned from the Bezier Curve options.

Section 6: Advanced Chart options (changing the data points)
00:26

Chart Js, Advanced Chart Options changing the data points

In this lecture you will get an overview of what you will learn in this section. You will learn how to:

  • Enable or disable the data points of a chart.
  • Adjusting the border of the data point.
  • Controlling the radius of the data point.
  • Adjusting the Radius Detection of the hover legend
01:21

Chart Js, enable or disable the data points in a chart

In this lecture you learn how to remove data points from a chart. This will result in a clear line in a chart.

01:12

Chart Js, controlling the radius of the data point.

In this lecture you will learn how adjust the radius of a data point. Understand that the basic radius is 4.

01:06

Chart Js, controlling the radius of the data point.

In this lecture you will learn how adjust the border of the data point.

01:13

Chart Js, controlling the detection radius

In this lecture you will learn how to change the detection radius of a chart. You can enlarge it or reduce it but you cannot remove it completely.

1 question

Testing your knowledge of what you have learned so far!

Section 7: Conclusion, what you should know and expected future of data visualization.
02:34

Chart Js, Conclusion

In this lecture you will get a quick rehearsal and a special thank for making it to the very end. As a bonus I offer additional courses about this topic related to Bar, Pie, Donut/Doughnut and Rader chart

3 pages

Chart Js, a reference sheet with all the commands by Udemology.

In this lecture you will have a useful downloadable reference sheet with all the chart commands.

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