2 How to add streaming data in Chart JS | Chartjs Plugin Streaming Series

2 How to add streaming data in Chart JS | Chartjs Plugin Streaming Series

In this video we will explore how to add streaming data in in Chart JS. The chartjs plugin [chartjs-plugin-streaming] creates a special streaming add on which makes the chart show realtime data. This feature can be extremely useful for stock charts or any chart that needs to track data and the time and date in seconds.

Displaying real time data for Chart js is exciting and with this plugin it is easy to do. Creating a real time graph in Javascript and streaming data in Chart JS is a very advanced topic. We will cover it all in this Chartjs Plugin Streaming Series. Let's begin!

Got a question or special request about a specific item? Comment below and tell me your question. I will make sure to follow up on you!

Interested to learn about how to create charts? Check out below!

⭐ Chart JS Udemy Course ⭐:

Chart JS tutorials for Beginners:

Chart JS tutorials for Intermediate:

Chart JS Dashboard Series:
👍 Most Liked Video Series:

Why did I created these Chart JS video tutorials?
Have you ever used Excel where charts appear almost magically with a click on a button. You notice if you look at a chart or graph you can absorb information within seconds which would take you minutes if it is a table with data.

"A picture is worth a thousand words"

We all know that pictures and colors spark the mind. However, if you try to draw or code a 📊 bar chart or a 📈 line chart, or any type of chart in a Javascript library it is a big challenge. The documentation makes it hard and the it is very hard to work with a canvas tag.

Which was both logical and creative at the same time. And this is why I love charts as well. A chart is the closes to translating logic into visuals. Making the chart interactive is the best way to communicate your message to others.

If we know about this why is coding charts so complicated?

Because computer programming language is based on 100% logic. This is why when you look at Chart.JS, D3.JS, Chartist and other chart libraries in JS you will need to basically explain in logic to a computer what to make visual.

How and where can I help?

My goal and focus is on creating easy to understand Chart.JS videos so you can start using Chart JS in all your website endeavors making Chart.JS a topnotch and leading JS library for the years to come. Just like any programming library once more people use Chart JS it will attract more people to contribute and grow. The videos on Youtube and my complete course on Udemy are here to give a helping hand.

Seeing Chart.JS evolve from Chart.JS 1.0 to Chart.JS 3.0 and with their currently new expansion to Chart.JS 3.0 we can expect more new exciting charts in the near future.

About Chart.JS 3 | Chart JS 3
Chart JS is one of the most use Javascript libraries for the drawing charts. It is designed to create charts in the canvas tag which is great but at the same time slightly challenging for most people. However, knowing how to draw a chart will give you a big edge and most dashboards are consistently adding charts along data tables. Chart JS makes your data more alive and visually more appealing.

What type of charts can you make with Chart.JS?
With chart js you can make line chart, bar chart, pie chart, doughnut chart, scatter chart, polar area chart, radar chart, gauge chart and area chart. And with some clever tricks and visual adjustment more can be done.

#chartjs

[dinaamyc]

Thank you very much! I was considering about this: I am getting a query from mysql of data (temperature). What i do is: get the data, and plot it, as you but using ejs. The issue is: I need to see the values all the time, i mean, the data is going to be updating but the first value will not disappear

[anirbanbhattacharya]

thank u for your video. I am very much big fan of u. Ur research's really helps lot of people. Now we can view trend live data. but how can we see old saved data in this by selecting date and time from a calendar? sometimes we need to explore old saving data. kindly make a video on this critical cases.

[scottphillips]

Really enjoy your videos, thanks. Question: I would like to build a line chart that adds data so that both the axes and values update (so slightly different to a progressive line). Should I use the streaming plugin for this or a newData array with chart.update() ? I built something at the moment with the latter but the effect isn't nice (as all the new values are flying up from zero (0) on the y-axis). Thanks for any help.

[ibrahimbala]

thank you very much, I have done all this, but when put my data in the eg y: data, when it gets the first value it doesn't change, and draws a straight line. how to I fix this

[nagasainattuva]

How to add data continuosly to stream chart from websocket please do the video

[muhammadhasif]

hi sir if i take data from phpdatabase ( eg: temperature) what should i write in( y: line 61) code? can u tell me pls

[itbloodoxy]

How to add streaming data in multiple charts, as the first will disappear within 30 sec and the next chart will appear.. and so on. Is it possible?

[tranvuhoang]

Hi, I got the static data from MongoDB ok, but I don't know how can I put that data into "y" value. Does anyone know what to do?

[Sumonms]

sir how can I do it for progressive line??

[shoaibgull]

How to make streaming chart with streaming database values. Without refreshing page like this

[Algorhythmo]

how to add multiple data on that table? I mean multiple y:(data),