Articles, Blog

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

November 30, 2019


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

You Might Also Like

34 Comments

  • Reply iCEplays /// Isaac Gibson Plays May 21, 2018 at 4:08 pm

    first wow

  • Reply Naveen Sundar May 22, 2018 at 1:06 am

    Most useful channel i have found period

  • Reply muhammad arif setyo aji May 30, 2018 at 7:44 am

    can you make tutorial for create real-time chart using highcharts JS ?? please

  • Reply Moominpappa June 16, 2018 at 2:11 pm

    Can you make one for Chart.Js using SQL data?

  • Reply DaPhenomAce September 29, 2018 at 10:31 pm

    I have downloaded plotly.min.js and put it in the same folder as my html file and still cannot get anything to show when I run the source code besides the title "Real-Time Chart with Plotly.js

  • Reply Ankit Sharma October 23, 2018 at 4:11 am

    English ki acting kyu kar rha hai.

  • Reply Олег Доход November 12, 2018 at 12:24 pm

    Hi, how to open this index.html on localhost server?
    I always error "Failed to load resource: the server responded with a status of 404 (Not Found)"

  • Reply Jordana Carvalho November 15, 2018 at 2:03 am

    Thanks a lot for it! Very helpful! Did you make a real time graph with a .csv file?

  • Reply Pirates Just AR November 21, 2018 at 4:21 pm

    awesome

  • Reply RishaRea November 22, 2018 at 11:59 am

    Is there a way to save data to MySql..??

  • Reply Cha4s January 3, 2019 at 9:47 pm

    Can you create more than one line?

  • Reply Cameron Cobb January 25, 2019 at 9:59 pm

    Amazing video. Thank you. Do you know how I would go about labeling the x-axis to show time since? For example the x-axis would -5 minutes ago, -10 minutes ago and -15 minutes ago? Thank you

  • Reply EZ Assegai February 7, 2019 at 7:11 pm

    BEST TUTORIAL FOR THIS THANK YOU

  • Reply Elliot Lohr February 16, 2019 at 8:33 pm

    Hey I copied the source code into my own application just to see if anything would display. I can only get the "Real-Time Chart with Plotly.js" to display on page. Do i need to provide css stylings for the chart? Has anyone else experienced this issue?

  • Reply Franky March 3, 2019 at 7:58 pm

    can this method (setinterval and extendtraces) be used to animate 3d scatter plot?

  • Reply Sohaib Furqan April 3, 2019 at 7:22 am

    Hi. Thanks for this tutorial. Has helped me a lot. I was wondering what changes to make to this if I want the graph to scroll to show the new lines being plotted as the data is added to the graph?

  • Reply Mike Hudson April 26, 2019 at 12:28 pm

    You saved my fxcking ass buddy!

  • Reply Ariel Alves Dutra May 1, 2019 at 1:49 pm

    Thank you man!

  • Reply Kashfia Shawona May 6, 2019 at 1:47 pm

    what is npm?

  • Reply giriraj pawar May 17, 2019 at 5:32 pm

    is plotly.js free? I wanted to use to display in my android application

  • Reply Nhi Diệp June 2, 2019 at 6:18 pm

    Thank you!! This tutorial helps me a lot . I have a question, how can I add y-axis's name and x-axis's name?

  • Reply inzar salfikar June 9, 2019 at 3:46 am

    You really help me with this tutorial. thank you very much

  • Reply iam Nobody June 11, 2019 at 1:15 am

    how to make it without libraries?

  • Reply karlo peace June 24, 2019 at 12:54 pm

    Is it possible to create real time charts without using intervals?

  • Reply Firhan Rizani July 15, 2019 at 6:51 am

    what software did you use to write coding in this video?

  • Reply Ivan Leong August 6, 2019 at 11:59 pm

    Thank you so much! This video was extremely helpful haha 🙂

  • Reply XBGamerX 20 September 5, 2019 at 2:10 am

    Useful tutorial. I just made a subscriber gap graph for YouTube. Literally no other person would explained like that.

  • Reply Ismael Sikumbang October 5, 2019 at 7:44 am

    Thank you. this tutorial help me.

  • Reply Ismael Sikumbang October 5, 2019 at 7:44 am

    I have one question. I have a problem making charts in real time. I will display a chart where the data source is from the database. please help the solution of my problem. please be able to share the javascript code

  • Reply Manthan Rathod October 11, 2019 at 7:55 am

    What should i write in getData() to plot real-time data from google firebase? please help me out

  • Reply Aurelio Jimenez October 11, 2019 at 9:14 pm

    Sweet and short to the point…Subscriber for life

  • Reply Kalyani Priyadarsini November 3, 2019 at 5:04 pm

    How to show data from database

  • Reply Server-i Garâm November 6, 2019 at 1:27 pm

    Where is Database?

  • Reply M P November 9, 2019 at 12:15 am

    Nowadays, you can remove the `cnt` counter, and include a third parameter in extendTraces, the length of total data: .extendTraces('graph',{…},500), and remove the .relayout(…) line. Faster.

  • Leave a Reply