Time series chart behavior is wrong

plotly.js
1

I want to create a time series chart that updates in real time with two lines with the x axis displaying data in milliseconds. I have been able to get the chart to update in real time but so far the lines are appearing on two seperate blocks (I assume it has to do with the format that I am using)

My initial data looks something like this

var trace1 = {	
			"y":[0],
			"x":[now],
			 mode: 'lines+markers',
			 marker: {
				color: 'rgb(128, 0, 128)',
				size: 3
			 },
		     name: "Opened X",
			 line: {
				color: 'rgb(128, 0, 128)',
				width: 1
			 }				
		};

var trace2 = {	 
			"y":[0],
			"x":[now],
			 mode: 'lines+markers',
			 marker: {
				color: 'rgb(214,39,40)',
				size: 3
			 },
			 name: "Closed C",
			 line: {
				color: 'rgb(255,127,14)',
				width: 1
			 }				
		};

Plotly.plot(div, data, {"title":"Milliseconds", xaxis: { title: 'Time in Milliseconds' }, yaxis: { title: 'Light sensors open closed in milliseconds' }});

I then insert data into the chart
Plotly.extendTraces(div,opened,[0], 10);
Plotly.extendTraces(div,closed,[1], 10);

And the data that goes into them looks like the following

{ x: [["06:12:23.037","06:12:23.191","06:12:23.261","06:12:23.449","06:12:23.667","06:12:23.766","06:12:23.920"]], y:[[37,70,11,126,90,37,70]] }

What I end up with is the images are two seperate lines and the timestamps being far apart

14714394628115.png932×322 63.8 KB

What I need is for the two lines to overlap each other and the timestamps to display in order. I tried converting the timestamps to dates but they would show up with the entire date text being displayed and the two lines still don’t overlap.The chart is visible here
http://89.106.140.48:5070/light

I would really appreciate if someone could help me with this as I have been looking around for a week for a solution.

2

Oh looks like plotly.js thinks your timestamps are in fact strings categories.

You might want to look at Dates on x-axis not spaced appropriately

3

Thanks, that did help plot the graph properly. Would have been nice if the same information was there on the plotlyjs documentation page.