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