Stacked Area chart with Chart JS
In this course you will learn how to create a stacked area 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.
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 stacked area 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 stacked area 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:
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 stacked area 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!
Stacked Area 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 stacked area chart with Chart JS.
In this lecture you will download the essential files for creating a stacked area 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.
Stacked Area 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 stacked area chart in Chart JS. The foundation is very important and the starting point for any chart at all in Chart JS.
Stacked Area Chart JS: Creating the HTML file for Chart JS.
In this lecture you will create a HTML file. For this you can use any text process you prefer.
Stacked Area Chart JS: Setting up the basic HTML framework for the stacked area 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.
Stacked Area Chart JS: Connecting the HTML document with the two files in the document
Stacked Area Chart JS: Implementing the canvas tag for the stacked area chart
In this lecture you will implement the canvas tag for the stacked area 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.
Stacked Area Chart JS: Implementing the div tag for the stacked area chart
In this lecture you will implement the div tag for the stacked area chart. This is essential for placing the chart in the center of the page.
Stacked Area Chart JS: Introduction to creating the stacked area chart, the basic parts
In this section you will start and create a basic stacked area chart. You will notice that once completed the stacked area chart will have a very minimal look. The main goal of this section is that you have a stacked area chart to display. Once the basics are ready we will continue to the advanced parts.
Stacked Area Chart JS: Assigning labels for the stacked area chart
In this lecture you will learn how to assign Y-axis labels for the stacked area chart.
Stacked Area Chart JS: Adding X-axis dataset values for the stacked area chart
In this lecture you will assign values for the X-axis. These are called data sets. Because we have 3 area lines, we need to create 3 times the values.
Stacked Area JS: Connecting the values and drawing the stacked area chart
Stacked Area Chart JS: Introduction to presenting a stacked area chart professionally
In this section you will start with the basic feature to design a profesional looking stacked area chart. You will learn all basic features to present the chart.
Stacked Area Chart JS: Adjusting the width and height of the stacked area chart
In this lecture you will start with increasing the width and height of the stacked area chart. The chart is right now too small to read.
Stacked Area Chart JS: Adding the labels for the stacked area chart
In this lecture you will learn how to organize your stacked area lines by labeling them.
Stacked Area Chart JS: Adjusting the filler of the stacked area chart
In this lecture you will learn how to adjust the color of the area chart lines. Right now they are dark grey and you cannot see the difference clearly.
Stacked Area Chart JS: Coloring the data points of the stacked area chart
In this lecture you will learn how to add colors to the data point. This is important because the legend of the data point are now white. We need to give it some color.
Stacked Area Chart JS: Adjusting the stroke line color of the stacked area chart
In this lecture we will adjust the stacked area stroke line so they are matching. Right now you see a slight dark grey stroke line and we will remove this.
Stacked Area Chart JS: Introduction to the advanced stacked area chart features
In this section you will learn how to use and apply all the advanced features of a stacked area chart. This is important because they are different from the official Chart JS site.
Stacked Area Chart JS: Unlocking the advanced stacked area chart features
In this lecture you will start by unlocking the advanced features of the stacked area chart. This is a specific line of code that is essential to unlock all features.
Stacked Area Chart JS: Create a curve effect with the bezier curve for the stacked area chart
In this lecture we will activate the bezier curve option. This is designed to switch the chart from a pointy chart to a smooth curve.
Stacked Area Chart JS: Adding and removing the point dots of the stacked area chart
In this lecture you will learn how to add point dots for the stacked area chart. The data points will be more visible with that.
Stacked Area Chart JS: Removing the scale line of the stacked area chart
In this lecture you will learn how to remove the scale line of the stacked area chart. This can be a useful feature if you want to give it a "less is more" effect.
Stacked Area Chart JS reference sheet
All the advanced features in a sheet. This is useful for reference.
Stacked Area 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 stacked area 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!
Chart JS the complete guide!
Are you interested in becoming pro? Check out this!
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.