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