Black Lives Matter. Please consider donating to Black Girls Code today.

Updating bar plot not working

Hello,

what might be the issue: I have a bar chart that receives the data from url. The plot works fine, but I’d like to update it in intervals. The data in the url does update, but the plot doesn’t?

var yValue;
var xValue;
var trace1;
var data2;
var url ="http://localhost:1337/path";

function makeplot() { 
Plotly.d3.json(url, function(error, data1) {

yValue = data1;
xValue = ['Task1', 'Task2', 'Task3', 'Task4'];


trace1 = {
  x: xValue,
  y: yValue,
  type: 'bar',
  text: yValue.map(String),
  textposition: 'auto',
  hoverinfo: 'none',
  marker: {
    color: ['rgb(66, 206, 244)','rgb(244, 184, 65)','rgb(66, 196, 105)','rgb(244, 82, 65)'],
    opacity: 0.6,
    line: {
      color: 'rgb(8,48,107)',
      width: 1.5
    }
  }
};


data2 = [trace1];

	var layout = {
		title: '<b>Title</b>',
		
		 paper_bgcolor: 'rgba(0,0,0,0)',
		plot_bgcolor: 'rgba(0,0,0,0)',
		
		 autosize: false,
		  width: 400,
		  height: 300,
		  margin: {
			l: 30,
			r: 30,
			b: 100,
			t: 30,
			pad: 3
		  },
		titlefont: {
			family: 'Calibri',
			size: 18,
			color: '#42c2f4'
		},
		  font: {
			family: 'Calibri',
			size: 18,
			color: 'white'
		  },
		xaxis: {
			title: "",
			titlefont: {
				family: 'Calibri',
				size: 11,
				color: 'white',

						},
			tickfont: {
				family: 'Calibri',
				size: 11,
				color: 'white'
					},

			
				},
				
		yaxis: {
			titlefont: {
				family: 'Calibri',
				size: 15,
				color: '#42c2f4'
						},						
					showgrid: false,					
					showline: false,
					autotick: true,
					ticks: '',
					showticklabels: false,			
			tickfont: {
				family: 'Calibri',
				size: 12,
				color: 'white'
					},
				dtick: 0,			
				},
				
		

 		
				
	};

Plotly.newPlot('myDiv', data2, layout, {displayModeBar: false});
});
};


var cnt = 0;
makeplot();
var interval = setInterval(function() {
	makeplot();
	  if(cnt === 100) clearInterval(interval);
}, 10000);

Interesting, I have to visit http://localhost:1337/path once with same browser and then it updates automatically.

On server side, I’m using node and sending the data with:

app.get('/path', function (req, res) {
    res.send('[2,4,1,0]');
});

Actually figured this out. Data was stored to cache but not updated. Had to make sure that it doesn’t fetch it from cache.