I can't embed a real time chart into my Flask webpage











up vote
0
down vote

favorite












I have a Flask-SocketIO Webapp where some data is generated by my Python script and sent to my JS Frontend. I'm now trying to put that data on a chart.
Here is what it should look like: the user opens the webpage and he should see the data updating, but he also should see the data from BEFORE he opened the webpage, so i need BOTH real-time/updated and past data.
Now the big problem is that i managed to put a real-time chart but i have no idea. When i open my webpage i can see the chart updating but i can't see past data on the chart, i literally tried everything.



Here is the javascript part of the code that i made, and here you can find the rest of the code (Python part + html part)



$(document).ready(function() {
//connect to the socket server.
var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
var numbers_received = ;


//receive details from server
socket.on('newnumber', function(msg) {
console.log("Received" + msg.number);
//maintain a list of ten numbers
if (numbers_received.length >= 1) {
numbers_received.shift()
}


numbers_received.push(msg.number);
numbers_string = '';
for (var i = 0; i < numbers_received.length; i++) {
numbers_string = numbers_string + '<p>' + numbers_received[i].toString() + '</p>';
}
$('#log').html(numbers_string);
});






function getData() {

}
Plotly.plot('chart',[{
y:[numbers_received[1]],
type:'line'
}]);

console.log('TEST' + numbers_received[0]);

var cnt = 0;
setInterval(function(){
Plotly.extendTraces('chart',{ y:[[numbers_received[0]]]}, [0]);
cnt++;
if(cnt >10000000) {
Plotly.relayout('chart',{
xaxis: {
range: [cnt-9,cnt]
}
});
}
},15);

});


What should i do? Quit trying to use a Javascript library for my chart and use a Python library and generate the chart straight from Python (was thinking of re-making the entire app on Python Dash but it's not free)? Work on my Javascript code until i find a way, implying that it's possible? Just use another library?



Please, every little piece of help is highly appreciated, i have been trying to go forward with this for a week but i just can't find a way, thanks in advance










share|improve this question






















  • You need to save the previous numbers on the Python Side and on load of the page load them as the initial data of the chart
    – rfkortekaas
    Nov 4 at 11:10















up vote
0
down vote

favorite












I have a Flask-SocketIO Webapp where some data is generated by my Python script and sent to my JS Frontend. I'm now trying to put that data on a chart.
Here is what it should look like: the user opens the webpage and he should see the data updating, but he also should see the data from BEFORE he opened the webpage, so i need BOTH real-time/updated and past data.
Now the big problem is that i managed to put a real-time chart but i have no idea. When i open my webpage i can see the chart updating but i can't see past data on the chart, i literally tried everything.



Here is the javascript part of the code that i made, and here you can find the rest of the code (Python part + html part)



$(document).ready(function() {
//connect to the socket server.
var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
var numbers_received = ;


//receive details from server
socket.on('newnumber', function(msg) {
console.log("Received" + msg.number);
//maintain a list of ten numbers
if (numbers_received.length >= 1) {
numbers_received.shift()
}


numbers_received.push(msg.number);
numbers_string = '';
for (var i = 0; i < numbers_received.length; i++) {
numbers_string = numbers_string + '<p>' + numbers_received[i].toString() + '</p>';
}
$('#log').html(numbers_string);
});






function getData() {

}
Plotly.plot('chart',[{
y:[numbers_received[1]],
type:'line'
}]);

console.log('TEST' + numbers_received[0]);

var cnt = 0;
setInterval(function(){
Plotly.extendTraces('chart',{ y:[[numbers_received[0]]]}, [0]);
cnt++;
if(cnt >10000000) {
Plotly.relayout('chart',{
xaxis: {
range: [cnt-9,cnt]
}
});
}
},15);

});


What should i do? Quit trying to use a Javascript library for my chart and use a Python library and generate the chart straight from Python (was thinking of re-making the entire app on Python Dash but it's not free)? Work on my Javascript code until i find a way, implying that it's possible? Just use another library?



Please, every little piece of help is highly appreciated, i have been trying to go forward with this for a week but i just can't find a way, thanks in advance










share|improve this question






















  • You need to save the previous numbers on the Python Side and on load of the page load them as the initial data of the chart
    – rfkortekaas
    Nov 4 at 11:10













up vote
0
down vote

favorite









up vote
0
down vote

favorite











I have a Flask-SocketIO Webapp where some data is generated by my Python script and sent to my JS Frontend. I'm now trying to put that data on a chart.
Here is what it should look like: the user opens the webpage and he should see the data updating, but he also should see the data from BEFORE he opened the webpage, so i need BOTH real-time/updated and past data.
Now the big problem is that i managed to put a real-time chart but i have no idea. When i open my webpage i can see the chart updating but i can't see past data on the chart, i literally tried everything.



Here is the javascript part of the code that i made, and here you can find the rest of the code (Python part + html part)



$(document).ready(function() {
//connect to the socket server.
var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
var numbers_received = ;


//receive details from server
socket.on('newnumber', function(msg) {
console.log("Received" + msg.number);
//maintain a list of ten numbers
if (numbers_received.length >= 1) {
numbers_received.shift()
}


numbers_received.push(msg.number);
numbers_string = '';
for (var i = 0; i < numbers_received.length; i++) {
numbers_string = numbers_string + '<p>' + numbers_received[i].toString() + '</p>';
}
$('#log').html(numbers_string);
});






function getData() {

}
Plotly.plot('chart',[{
y:[numbers_received[1]],
type:'line'
}]);

console.log('TEST' + numbers_received[0]);

var cnt = 0;
setInterval(function(){
Plotly.extendTraces('chart',{ y:[[numbers_received[0]]]}, [0]);
cnt++;
if(cnt >10000000) {
Plotly.relayout('chart',{
xaxis: {
range: [cnt-9,cnt]
}
});
}
},15);

});


What should i do? Quit trying to use a Javascript library for my chart and use a Python library and generate the chart straight from Python (was thinking of re-making the entire app on Python Dash but it's not free)? Work on my Javascript code until i find a way, implying that it's possible? Just use another library?



Please, every little piece of help is highly appreciated, i have been trying to go forward with this for a week but i just can't find a way, thanks in advance










share|improve this question













I have a Flask-SocketIO Webapp where some data is generated by my Python script and sent to my JS Frontend. I'm now trying to put that data on a chart.
Here is what it should look like: the user opens the webpage and he should see the data updating, but he also should see the data from BEFORE he opened the webpage, so i need BOTH real-time/updated and past data.
Now the big problem is that i managed to put a real-time chart but i have no idea. When i open my webpage i can see the chart updating but i can't see past data on the chart, i literally tried everything.



Here is the javascript part of the code that i made, and here you can find the rest of the code (Python part + html part)



$(document).ready(function() {
//connect to the socket server.
var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
var numbers_received = ;


//receive details from server
socket.on('newnumber', function(msg) {
console.log("Received" + msg.number);
//maintain a list of ten numbers
if (numbers_received.length >= 1) {
numbers_received.shift()
}


numbers_received.push(msg.number);
numbers_string = '';
for (var i = 0; i < numbers_received.length; i++) {
numbers_string = numbers_string + '<p>' + numbers_received[i].toString() + '</p>';
}
$('#log').html(numbers_string);
});






function getData() {

}
Plotly.plot('chart',[{
y:[numbers_received[1]],
type:'line'
}]);

console.log('TEST' + numbers_received[0]);

var cnt = 0;
setInterval(function(){
Plotly.extendTraces('chart',{ y:[[numbers_received[0]]]}, [0]);
cnt++;
if(cnt >10000000) {
Plotly.relayout('chart',{
xaxis: {
range: [cnt-9,cnt]
}
});
}
},15);

});


What should i do? Quit trying to use a Javascript library for my chart and use a Python library and generate the chart straight from Python (was thinking of re-making the entire app on Python Dash but it's not free)? Work on my Javascript code until i find a way, implying that it's possible? Just use another library?



Please, every little piece of help is highly appreciated, i have been trying to go forward with this for a week but i just can't find a way, thanks in advance







javascript python python-3.x flask charts






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 4 at 9:44









Dev012

112




112












  • You need to save the previous numbers on the Python Side and on load of the page load them as the initial data of the chart
    – rfkortekaas
    Nov 4 at 11:10


















  • You need to save the previous numbers on the Python Side and on load of the page load them as the initial data of the chart
    – rfkortekaas
    Nov 4 at 11:10
















You need to save the previous numbers on the Python Side and on load of the page load them as the initial data of the chart
– rfkortekaas
Nov 4 at 11:10




You need to save the previous numbers on the Python Side and on load of the page load them as the initial data of the chart
– rfkortekaas
Nov 4 at 11:10

















active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














 

draft saved


draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53139480%2fi-cant-embed-a-real-time-chart-into-my-flask-webpage%23new-answer', 'question_page');
}
);

Post as a guest





































active

oldest

votes













active

oldest

votes









active

oldest

votes






active

oldest

votes
















 

draft saved


draft discarded



















































 


draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53139480%2fi-cant-embed-a-real-time-chart-into-my-flask-webpage%23new-answer', 'question_page');
}
);

Post as a guest




















































































這個網誌中的熱門文章

Xamarin.form Move up view when keyboard appear

Post-Redirect-Get with Spring WebFlux and Thymeleaf

Anylogic : not able to use stopDelay()