Create Real-time Chart with Javascript | Plotly.js Tutorial

hello and welcome to red stapler channel
in this tutorial I am going to show you how to create a real timeline chart with
JavaScript using Plotly.js a charting library that was built on top of d3.js
and stack.gl very useful for displaying various chart types with great
performance and also support 3d charts using WebGL ready let’s check it out first if you are not using NPM let’s
start with downloading the latest version from github and include it to
your page using script tag and next create a development for the
chart now we will need to retrieve the data
point to screen the chart this can be in form of AJAX call to the API endpoint or
it can be the result from the calculation on your own website anyway
for the simplicity we will use random value for this tutorial
and next we will create a line chart using Plotly.plot plot function and pass
the element ID as first parameter followed by the chart definition object
first is the y-axis data array so I’m going to pass an array and call get data
function to retrieve the first data point for our chart and next we will set
the chart type to line as we want to create a line chart
if you run the code now you will have a chart with our first data point and next we will add a code to
automatically retrieve the next data point and update the chart
I’m going to use setinterval for every 200 milliseconds this will be your chart
updating frequency and you can change the interval time as you like now inside
we will call Plotly.extendTraces this is the basic function to extend the
current chart with a new set of data points. we’ll pass the chart element ID
followed by the data object you will notice that I used 2D array because
Plotly support multiple traces in a single chart so you can provide multiple
data arrays for each trace with a single call of this function and the last one is
the array of index of chart traces that you want to extend with the data
provided since we only have one trace we will use 0 so let’s see how it works now if you want the chart to slide along
with the new data like this we can use relayout function to update the x-axis
range first create a counter and increment it for each time the new data
point is appended let’s say if you want to display 500
data points before we begin to slide the chart we will pass our chart element ID as usual and next we will redefine the x-axis
range we will set the starting value to the current count minus by 500
and use the current count as ending range and that’s it let’s see the result so that’s all for this tutorial please
find the link to the code at the video description box below please feel free
to like or subscribe if you want to stay updated with us for more video like this
thanks for watching and see you in the next video bye