Bar Chart JS. Create bar charts from scratch with Chart JS!

Bar Chart with Chart JS. Learn how to create your own bar chart with Chart JS and because a data visualizer!
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.
5 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 28
  • 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 5/2015 English

Course Description

Bar chart with Chart JS

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

In this course you will learn how to create a 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 bar 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 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 bar chart with three bars!
  • In the fourth section you will start to design the bar chart with colors that you want.

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

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 bar 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!

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 bar chart with Chart JS from scratch!
  • Modify the bar chart and apply own color styles.
  • Understand how to use Chart JS
  • Able to visualize data in professional bar 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.

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

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

00:58

Bar Chart Js: Introduction to this course and what you will learn

In this course you will learn how to create a bar chart with Chart Js. Chart Js is a quickly growing JavaScript library to display charts on your page. My personal vision is that we will switch more and more to charts on the web as the amount of data increases.

This course will teach you how to make great use and improve your skill as a chart builder on the web. You will learn how to display values in a bar chart in a very unique and appealing way. The main goal is to replicate the chart that you see on the screen.

01:41

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

Section 2: Getting started with the bar Chart, preparing the foundation of the bar chart.
00:21

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. In this section you will learn:

  1. To set up the basic HTML frame work essential for the bar 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 bar chart in Chart JS.
  4. Implementing the canvas tag for the bar chart
02:07

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:

  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
1 question

Test your knowledge what you have learned so far!

01:01

Bar Chart JS: Connecting the downloaded file Chart.min.js

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.

00:50

Bar Chart JS: Creating the DIV to center the bar chart

In this lecture you will learn how to create a <div> tag. This <div> tag will be used to center the bar chart later on.

01:42

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

1 question

Test your knowledge what you have learned so far!

Section 3: Creating the bar chart, the basic parts
00:31

Bar Chart JS: Creating the bar chart, the basic parts!

In this section you will start to create a bar chart without anything special design yet. Before you learn how to modify it you must have a bar chart to work with. In this section you will learn:

  1. To create the Y-axis of the bar chart with labels
  2. To create the X-axis of the bar chart with datasets
  3. Connect the canvas tag with JavaScript
  4. Connect the values and drawing the bar chart in the canvas tag.
02:29

Bar Chart JS: Creating the labels for the Y-axis

In this lecture you will learn how to label the Y-axis. In this case you will have 7 months. You will label each month so it will be displayed on the Y-axis.

03:43

Bar Chart JS: Creating the X-axis

In this lecture you will learn how to create the X-axis. The value of the X-axis depends on the values you assign for the bar chart. The values will be created in datasets. Each dataset will have the data of one bar.

01:39

Bar Chart JS: Connecting the canvas with JavaScript for the bar chart

In this lecture you will connect the canvas with JavaScript. This is important to start drawing the chart. The canvas will now read the information in JavaScript. Please pay close attention to the capitalized letters in the command.

01:48

Bar Chart JS: Connecting the values and drawing the bar chart

In this lecture you will learn how to connect the values of barData with the bar chart. This is the final step to connect everything and to display the bar chart in the <canvas> tag.

1 question

Test your knowledge what you have learned so far!

Section 4: Presenting your bar chart professionally with additional functions.
00:24

Bar Chart JS: Introduction to professional presenting a bar chart

In this lecture you will get a overview of what you will learn in this section. You will learn:

  1. How to center the bar chart in the Canvas.
  2. How to adjust the width and height of the bar chart.
  3. How to use the labels for the bars to be more organized.
  4. How to adjust the filler colors of the bar chart.
  5. How to adjust the stroke colors of the bar chart
  6. How to highlight the fillers when you hover over the bar chart.
  7. How to highlight the strokes of the bar chart when you hover over the bar chart.
01:32

Bar Chart JS: Center the bar chart in the Canvas tag

In this lecture you will learn how to center the bar chart. At this moment the bar chart does not look very professional. Presenting the chart will be better if the chart is in the center.

01:23

Bar Chart JS: Increasing the width and height of the bar chart

In this lecture you will learn how to increase the size of the bar chart. The bar chart is now quite small and not clear. It is time to increase the width and height of the chart. It will be easier to read. One of the best advice is always make the width larger than the height. This is because the chart will look very stretched if the height is larger or equal.

01:58

Bar Chart JS: Using labels for the bars for better communication

In this lecture you will learn how to use labels for the bars. Every bar can be labeled so you will quickly know which label matches which bar in the bar chart. This method is especially useful if you have 10 or more different bars. It saves time and helps you to keep you organized.

1 question

Test your knowledge what you have learned so far!

02:39

Bar Chart JS: Adjusting the filler colors of the bar chart

In this lecture you will learn how to change the filler colors of the bar chart. You will make the bar chart look more professional with the right colors. At the moment it looks boring grey. Changing colors can be two ways.

  1. In this case you will use the color code RGBA (Red, Green Blue Alpha). The A stands for Alpha. This is the transparancy factor and the longer the value the higher the amount of transparancy.
  2. The other method is using the HEX color coding.


02:06

Bar Chart JS: Adjusting the stroke colors of the bar chart

In this lecture you will learn how to change the stroke colors of the bar chart. At the moment the strokes/lines of the bar chart is not matching with the bar fillers. For this you will use the color code RGBA (Red, Green Blue Alpha). The A stands for Alpha. This is the transparancy factor and the longer the value the higher the amount of transparancy.

02:45

Bar Chart Js: Highlight the fillers

In this lecture you will create a highlight effect when hovering over the bar chart. This method will emphasize the selected chart by giving it a more brighter color or other color.

01:51

Bar Chart JS: Highlight the strokes of the bar chart

In this lecture you will give the strokes of the bars a highlight effect. When you hover over the bars you will see a different color for the strokes.

1 question

Test your knowledge what you have learned so far!

Section 5: Advanced bar chart features
00:30

Bar Chart JS: Introduction to advanced bar chart features

In this lecture you will get a overview of what you will learn in this section. You will discover some of the advanced features and have a complete list of the features so you can use that as a reference. You will learn:

  1. How to remove the grid lines from a bar chart
  2. How to remove or add space between the bars.
  3. How to remove or increase the space between each bar dataset.
02:32

Bar Chart JS: removing the gridlines form the bar chart

In this lecture you will learn how to remove the girdlines from the bar chart. Before you can use the advanced commands you need to apply a new variable named barOptions.

01:34

Bar Chart JS: removing or adding space between the bars

In this lecture you will learn how you can increase or remove the whitespace between the bars.

01:26

Bar Chart JS: Removing or increase the white space between the bar datasets.

In this lecture you will place space between the bars in the bar datasets.

1 question

Challenge yourself! Did you still remember?

2 pages

Bar Chart JS: Reference Sheet by Udemology

In this lecture you have a reference sheet of the advanced commands from Chart JS. In the resource section you also can find a link with all the information about bar chart options for Chart JS.

Section 6: Conclusion, a quick recap and further learning
01:48

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!

Article

Chart JS has so many additional things to offer! I know you are a very keen learner and that is why I have something special for you. Learn more!

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