Black Lives Matter. Please consider donating to Black Girls Code today.
Learn about the upcoming Dash Enterprise 4.0 release in the August 5th webinar with Chris Parmer, the Inventor of Dash.

Plotlyjs realtime with system time example

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;
}

there is no datetime but it would be date

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
						},

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?