Plotlyjs realtime with system time example

plotly.js
1

Hi guys, thanks for the hard work.

I am setting up a realtime graph based on the simple example I found on the web.

It used random data for y. A few hassles I am having is how to get the current system time on the xaxis.

I have tried %X, but it gives nothing close to actual system time. Also tried other combos but get really wierd outputs from 01/01/1970 repeated over and over again, to incrementing percentages, etc.

function getData() {
				
					return Math.random();				
				}
				
				var layout = {
					xaxis: {
						text: 'x Axis',
						//autotick: true,
						//tickformat: '%b %d %Y %H:%M:%S',
						//tickformat: '%H:%M:%S',
						type: "datetime",
						},
						
						//to display time formatted as hh:mm:ss}
					yaxis: {
					
						text: 'y Axis',
						range: [0, 100],
						},
				};
				
			
				
				Plotly.plot('chart',[{
					y:[getData()],
					type:'line'
				}], layout);
				
				var cnt = 0;
				var rangecap = 500;
				
				setInterval(function(){
				
					Plotly.extendTraces('chart',{ y:[[getData()]]}, [0]);
					cnt++;
														
				},15);
				<!-- 3600000 = 1 hour , 60000 - 1 minute-->

What I need is the xaxis to show the current system/device time, each hour marked out, each day marked out.

What am I doing incorrectly?

Also how can I add a second realtime data source to getData()? Siuch as…

function getData() {
    return window.val0, window.val1;
}

2020-05-31-001-Workspace 1
2020-05-31-001-Workspace 1694×415 6 KB

2

there is no datetime but it would be date

3

It has been changed to date but the x-axis still outputs integers starting from zero

xaxis: {
						text: 'x Axis',
						//autotick: true,
						//tickformat: '%b %d %Y %H:%M:%S',
						//tickformat: '%H:%M:%S',
						type: "date"  //??????? there is no datetime but it would be date
						},

date
date1152×192 12.5 KB

5

Just updated the ja as mentioned. Removed type: “date” and inserted “tickformat: ‘%H:%M’”

I get exactly the same screen as posted, x-axis stars from 0 and increases in integers.

I am pulling in realtime data with a getData() function. Is this perhaps the issue?