Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

extendTraces With Multiple Traces Does Not Extend - Time-Series

I’m having problems with getting a time-series chart to update using extendTraces with multiple traces. It works fine when updating just one trace but with more than one, the chart doesn’t update with the new data. The code is below.

I’m hoping someone can see what I’m doing wrong.

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var lastdate;
var lastdate = '';
var maxTemp = 0;
var minTemp = 0;
var maxRain = 0;
var maxPressure = 0;
var minPressure = 0;

window.onload = function() {
  var ctx = document.getElementById('tempChart');
	var timeDataPoints = [];
	var tempDataPoints = [];
	var rainDataPoints = [];
	var pressureDataPoints = [];
	var firstdate = '';
	var first = true;
	var data = [];
	
	console.log("getting data");
	$.getJSON("http://localhost/weather/readings.php?temp&o=lasthr", function(data) {  
	  first = true;
		$.each(data.data, function(key, value){
		  console.log("x: "+value.timestamp+", temp: "+value.temp + ", rain: "+value.rain + ", pressure: " + value.pressure);
		  temp = parseFloat(value.temp);
		  rain = parseFloat(value.rain);
		  pressure = parseFloat(value.pressure);
			timeDataPoints.push(value.timestamp);
			tempDataPoints.push(temp);
			rainDataPoints.push(rain);
			pressureDataPoints.push(pressure);
			if (first) {
			  firstdate = value.timestamp;
			  maxTemp = temp;
			  minTemp = temp;
			  maxRain = rain;
			  maxPressure = pressure;
			  minPressure = pressure;
			  first = false;
			} else {
			  if (temp > maxTemp) maxTemp = temp;
			  if (temp < minTemp) minTemp = temp;
			  if (rain > maxRain) maxRain = rain;
			  if (pressure > maxPressure) maxPressure = pressure;
			  if (pressure < minPressure) minPressure = pressure;
			}
			lastdate = value.timestamp;
		});

    var data = [{x: timeDataPoints, y: tempDataPoints, type: 'line', name: 'Temp' }, 
                {x: timeDataPoints, y: rainDataPoints, type: 'line', fill: 'tozeroy', name: 'Rain', yaxis: 'y2'}, 
                {x: timeDataPoints, y: pressureDataPoints, type: 'line', name: 'Pressure', yaxis: 'y3' }
               ];
  
  console.log('last date is ' + lastdate);
		var layout = {
			title: 'Recent Readings',
			xaxis: {
			  title: 'Time',
				autorange: true,
				fixedrange: false,
				range: [firstdate, lastdate],
				rangeselector: {buttons: [
					{
						count: 1,
						label: '1m',
						step: 'minute',
						stepmode: 'backward'
					},
					{
						count: 10,
						label: '10 min',
						step: 'minute',
						stepmode: 'backward'
					},
					{step: 'all'}
				]},
				rangeslider: {range: [firstdate, lastdate]},
				type: 'date',
				zeroline: true,
				zerolinecolor: '#f00'
			},
			yaxis: {
			  title: {
			    text: 'Temperature (&deg;F)',
			    font: {
			      color: '#1f77b4'
					}
				},
				autorange: false,
				fixedrange: false,
				range: [(minTemp > 0 ? 0 : minTemp-10.0), (maxTemp+10.0)],
				type: 'linear',
				tickformat: '.1f',
				hoverformat: '.2f',
				rangeslider: {range: [(minTemp > 0 ? 0 : minTemp-10.0), (maxTemp+10.0)]},
			},
			yaxis2: {
			  title: { 
					text: 'Rain (in)',
					font: {
					  color: '#ff7f0e'
					}
				},
			  overlaying: 'y',
			  side: 'right',
			  autorange: false,
			  fixedrange: false,
			  type: 'linear',
			  showgrid: false,
			  tickformat: '.1f',
			  hoverformat: '.2f',
				range: [0, maxRain + 2],
				rangeslider: {range: [0, maxRain + 2]}
			},
			yaxis3: {
			  title: { 
					text: 'Pressure (inHg)',
					font: {
					  color: '#2ca02c'
					}
				},
			  overlaying: 'y',
			  side: 'right',
			  autorange: false,
			  fixedrange: false,
			  type: 'linear',
			  showgrid: false,
			  tickformat: '.1f',
			  hoverformat: '.2f',
				range: [0, maxPressure + 30],
				rangeslider: {range: [0, maxPressure + 30]}
			},
			showlegend: true,
			legend: {
			  x: 1.2,
			  y: 0.5
			}
		};
  
	  Plotly.plot( ctx, data, layout, {displaylogo: false, responsive: true, dragmode:'Zoom'});
  })
	.always(function() {
		console.log('always');
		setTimeout(function(){updateChart()}, 10000);
	});

	function updateChart() {
		console.log('reloading');
		var ctx = document.getElementById('tempChart');
		var timeDataPoints = [];
		var tempDataPoints = [];
		var newData = false;
		console.log('getting updated with last '+escape(lastdate));
		$.getJSON("http://localhost/weather/readings.php?temp&o=recent&last="+escape(lastdate), function(data) {
			$.each(data.data, function(key, value){
			  newData = true;
				console.log("x: "+value.timestamp+", temp: "+value.temp + ", rain: " + value.rain + ", pressure: " + value.pressure);
				temp = parseFloat(value.temp);
				rain = parseFloat(value.rain);
				pressure = parseFloat(value.pressure);
				timeDataPoints.push([value.timestamp]);
				tempDataPoints.push([temp]);
				rainDataPoints.push([rain]);
				pressureDataPoints.push([pressure]);
				if (temp > maxTemp) maxTemp = temp;
				if (temp < minTemp) minTemp = temp;
				if (rain > maxRain) maxRain = rain;
				if (pressure > maxPressure) maxPressure = pressure;
				if (pressure < minPressure) minPressure = pressure;
				lastdate = value.timestamp;
			});
			
      if (newData) {
				var layout = {
					yaxis: {
						range: [(minTemp > 0 ? 0 : minTemp-10.0), (maxTemp+10.0)],
						rangeslider: {range: [(minTemp > 0 ? 0 : minTemp-10.0), (maxTemp+10.0)]},
					},
					yaxis2: {
						range: [0, maxRain + 2],
						rangeslider: {range: [0, maxRain + 2]},
					},			
					yaxis3: {
						range: [0, maxPressure + 30],
						rangeslider: {range: [0, maxPressure + 30]},
					}					
				};
		
		    try {
					Plotly.extendTraces(ctx, {x: [timeDataPoints, timeDataPoints, timeDataPoints], y: [tempDataPoints, rainDataPoints, pressureDataPoints]}, [0,1,2]);
				} catch (err) {
				  console.log('update chart error: '+err);
				}
			} else {
			  console.log('no new data');
			}
		})
		.always(function() {
			console.log('reload always');
  		setTimeout(function(){updateChart()}, 10000);
		});	
	}
	
}
</script>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="plotly.latest.min.js"></script>
<body>
<div id="tempChart" style="width:1600px;height:600px;float:left"></div>

</body>
</html>

Did you solve the issue? I am in a similar situation