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

Multi tool use
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
javascript python python-3.x flask charts
add a comment |
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
javascript python python-3.x flask charts
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
add a comment |
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
javascript python python-3.x flask charts
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
javascript python python-3.x flask charts
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
add a comment |
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
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
OcuhQZic,l,R ziVH,zfS4,a,nR,Hin13,m86Wdgdua6vg
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