Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Line Bar Chart JS, Create yours from scratch with Charts JS

Name: Line Bar Chart JS, Create yours from scratch with Charts JS
Rating: 4.3 (9 reviews)

Line Bar Chart JS: Discover how you can create you own Line Bar Chart with Chart JS from scratch! (Charts JS, ChartJS)

Created byNicky Wong

Last updated 6/2015

English

What you'll learn

Create a line bar chart with Chart JS from scratch!
Modify the line bar chart and apply own color styles.
Understand how to use Chart JS
Able to visualize data in professional line bar charts.

Course content

6 sections • 30 lectures • 52m total length

Introduction to line bar chart JS and what you can expect from this course2:05
Line Bar Chart JS: Introduction to line bar 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.
Download the files for the line bar chart with Chart JS (WATCH THIS!)1:49
Line Bar 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. Download this in the resource section!

Line Bar Chart JS: Setting up the basics!0:28
Line Bar 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. You will learn about:

How to create the HTML document

Setting up the basic HTML framework for the line bar chart in Chart JS.

Connecting the HTML document with the JavaScript file in the document.

Implementing the canvas tag for the line bar chart

Implementing the div tag for the line bar chart
Creating the HTML document1:56
Line Bar Chart JS: Creating the HTML document

In this lecture we will start by creating the HTML file. This is the very starting point before we can even start drawing a chart with ChartJS.
Setting up the basic HTML framework for the line bar chart in Chart JS.1:13
Line Bar 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:

The basic set up of HTML

Use of HTML tag

Use of Head tag

Use of Body tag

Use of Title tag
Connecting the HTML document with the JavaScript file in the document.1:21
Line Bar 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 the file from lecture 2.
Implementing the canvas tag for the line bar chart1:01
Line Bar Chart JS: Implementing the canvas tag

In this lecture you will learn how to implement the <canvas> tag. ChartJS works with a canvas tag. It will draw the line bar chart in the canvas.
Implementing the div tag for the line bar chart1:05
Line Bar Chart JS: Implementing the div tag

In this lecture we will focus on placing the <div> tag. This will be wrapped around the <canvas> tag. This is needed to place the chart later on in the center.
Brain Buster

Introduction to creating theline bar chart, the basic parts0:52
Line Bar Chart JS: Introduction to the basic coding of a line bar chart

In this lecture you will learn the basic coding part of a line bar chart in Chart JS.
Line Bar Chart JS: Creating the labels (Y-axis)2:44
Line Bar Chart JS: Creating the labels (Y-axis)

In this lecture you will learn how to create labels. The labels are considered the Y-axis of the ChartJS.
Line Bar Chart JS: Creating the datasets (X-axis)3:22
Line Bar Chart JS: Creating the datasets (X-axis)

In this lecture you will learn how to create datasets for your line bar chart. These are called data points.
Connecting the canvas tag with the JavaScript command in HTML2:20
Line Bar 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.
Drawing the line bar chart2:31
Line Bar Chart JS: Drawing the line bar chart

In this lecture you draw the line bar 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.
Brain Buster

Introduction to presenting the line bar chart professionally0:34
Line Bar Chart JS: Introduction to presenting the line bar chart professionally

In this section you will learn how to design your line bar chart with the basic features.
Increasing the width and height of the line bar chart.2:32
Line Bar Chart JS: Increasing the width and height of the line bar chart

In this lecture you will increase the widht and height of the line bar chart. Right now the line bar chart is too small. Always give the width a higher amount of pixels compare to the height.
Center the line bar chart1:57
Line Bar Chart JS: Center the chart

In this lecture you will learn how to center the chart to the center of the chart.
Labeling the line bar chart for better structure of the datasets1:33
Line Bar Chart JS: Labeling the line bar chart for better structure of the datasets

In this lecture you will learn how to create a label for the line bar chart. Understanding the how to label it will be useful for organizing your chart.
Adjusting the stroke color of the line bar chart1:55
Line Bar Chart JS: Adjusting the stroke color of the line bar chart

In this lecture you will learn how to adjust the stroke color of the line bar chart. Right now this is not clear because everything is grey and there is not distinction.
Removing the fillers of the line bar chart3:01
Line Bar Chart JS: Removing the fillers of the line bar chart

In this lecture you will learn how to remove the fillers of the line bar chart. This is important because right now the fillers are overlapping the bars of the chart.
Adjusting the data points of the line bar chart2:08
Line Bar Chart JS: Adjusting the data points of the line bar chart

In this lecture you will learn how to adjust the data point by giving it color.

Introduction to advanced features of the line bar chart0:44
Line Bar Chart JS: Introduction to advanced features of the line bar chart

In this section you will learn how to use the advanced features of the line bar chart.
Adding the advance feature command in the line bar chart1:24
Line Bar Chart JS: Adding the advance feature command in the line bar chart

In this lecture you wil learn how to unlock the advanced features of the line bar chart. This is very important because whith this you will have many advanced features to create a professional chart.
Removing the grid lines of the line bar chart3:06
Line Bar Chart JS: Removing the grid lines of the line bar chart

In this lecture you wil learn how to remove the grid line of the line bar chart. Removing the grid lines will make the chart look more professional.
Increase the stroke line width of the line bar chart1:40
Line Bar Chart JS: Increase the stroke line width of the line bar chart

In this lecture you will learn how to increase the stroke line width of the line bar chart. Right now it looks too narrow. We will increase this to 5 pixel.
Increase the radius of the point dot of the line bar chart1:48
Line Bar Chart JS: Increase the radius of the point dot of the line bar chart

In this lecture you will learn how to increase the size of the point dot. This is called the radius. Right now the point dot radius is too small and does not match. And also remember the 2 to 1 ratio for line bar chart design.
Adjusting the point dot border width.2:01
Line Bar Chart JS: Adjusting the point dot border width.

In this lecture you will learn how to adjust the point dot border width. The border is far to narrow. This means you need to increase it and make sure it match with the 2:1 Ratio for line bar chart design.
Increase the scale line of the line bar chart2:03
Line Bar Chart JS: Increase the scale line of the line bar chart

In this lecture is to increase the scale line of the line bar chart. We need to make this thicker.
Change the scale line color of the line bar chart2:11
Line Bar Chart JS: Change the scale line color of the line bar chart

In this lecture you will learn how to change the color of the line bar chart scale line. The color right now is not appealing it looks transparant. We will make this solid black.
Brain Buster

Final Points1:47
Line Bar 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!
Bonus: Further learning0:11
Chart JS the complete guide!

Are you interested in becoming pro? Check out this!

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

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

Line Bar chart with Chart JS

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

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

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

Why take this course?

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

The biggest question you might have is this. This course teaches you how you can create a line bar 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 this course is for:

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.

Line Bar Chart JS, Create yours from scratch with Charts JS

What you'll learn

Explore related topics

Course content

Introduction of what you will learn in the line bar chart course and setting up2 lectures • 4min

Getting started with the line bar Chart, preparing the foundation of the chart.6 lectures • 7min

Create the basic line bar chart in Chart JS5 lectures • 12min

Presenting the line bar chart professionally with the basic features7 lectures • 14min

Advanced features of the line bar chart8 lectures • 15min

Conclusion, a quick recap and futher learning2 lectures • 2min

Requirements

Description

Who this course is for: