stream data from server

[arendeutsch]

Hello,
I have a server which send data over websockets. The client update a state of two variables.

When im trying to push this data to the chart inside onRefresh the chart's data resets since the date triggers re rendering of the page.

How can i solve this issue ?

[nagix]

Please share your onRefresh code.

[arendeutsch]

I have this block of code that gets data from the server:
componentDidMount() { this.socket = socketIOClient('127.0.0.1:4000', { transports: ['websocket'] }); this.socket.on('from_server', data => { this.setState({ tension: data.real * 100, velocity: data.real * 23, }); }); }

and this block of code on refresh:

handleChartRefresh = (chart) => { chart.data.datasets.forEach((dataset) => { dataset.data.push({ x: Date.now(), y: dataset.label.toLowerCase() === 'tension' ? this.state.tension : this.state.velocity, }); }); }

So no matter what i do, as long as there is a state being update on the page, even though its just the side menu drawer state the data on the charts resets.

[nagix]

Try to call chart.update() after populating the data as described in README.

chart.update('quiet');  // for v2.x with Chart.js 3.x

chart.update({preservation: true});  // for v1.x with Chart.js 2.x

[arendeutsch]

Doesnt seem to help.
Tried both of them.

Here are the version from my package.json file
"chartjs-plugin-streaming": "^2.0.0-beta.2"
"chart.js": "^3.2.1",
"react-chartjs-2": "^3.0.3"

[nagix]

this.setState is being called in your socket listener, and it initiates a re-rendering of the component, but it seems that the charts is not updated. How and from where your handleChartRefresh is called?

I don't think a re-rendering of the component is required here, so why don't you push the received data into the datasets and call chart.update('quiet') in your socket listener function?

[kkg335]

I am also facing the same issue, whenever i am getting data from Websocket, live chart data starts from beginning, even after i am pushing the data into datasets and applying chart.update('quiet') does not working..

here is my options code:

 const options = {
    plugins: {
         title: {
             display: true,
             text: ' '
         },
    },  
    scales: {
        x: {
            type: 'realtime', 
            realtime: {    
                duration: 25000, 
                refresh: 5000,   
                delay: 1000,    
                pause: false,   
                ttl: undefined,   
                frameRate: 25,             
                onRefresh: (chart) => {                    
                    chart.data.datasets.map((item, index) => {
                        item.data.push({
                            x: Date.now(),
                             y: (props.sectionData[index]),
                           // y: (Math.random() * 10).toFixed()
                        })
                  chart.update('quiet');
                    })
                },
            },
        },
        y: {
            suggestedMin: 0,
            suggestedMax: 10,
            type: 'linear',
            display: true,
        },
    }
    }

[vylasab]

Seems like even i am getting the same issue. I am updating the data set on button click. Every time the button is clicked the old data is lost and it plots from the latest value.
import React, { useRef, useState } from "react";

`import React, { useRef, useState } from "react";

import "./App.css";
import { Line, Chart } from "react-chartjs-2";
import "chartjs-adapter-luxon";
import StreamingPlugin from "chartjs-plugin-streaming";

Chart.register(StreamingPlugin);

function App() {
const [val, setVal] = useState(0);
const buttonHandler = () => {
setVal(val + 3);
};

const onUpdateData = (chart) => {
const now = Date.now();
chart.data.datasets[0].data.push({ x: now, y: val });
chart.update("quiet");
};
return (

Click here to update data
<Line
data={{
datasets: [
{
label: "Dataset 1",
backgroundColor: "rgba(255, 99, 132, 0.5)",
borderColor: "rgb(255, 99, 132)",
borderDash: [8, 4],
fill: true,
data: [],
},
],
}}
options={{
scales: {
x: {
type: "realtime",
realtime: {
duration: 20000,
refresh: 1000,
delay: 2000,
onRefresh: onUpdateData,
},
},
y: {
title: {
display: true,
text: "Value",
},
},
},
interaction: {
intersect: false,
},
}}
/>

);
}

export default App;
`

[arendeutsch]

Seems like even i am getting the same issue. I am updating the data set on button click. Every time the button is clicked the old data is lost and it plots from the latest value. import React, { useRef, useState } from "react";

`import React, { useRef, useState } from "react";

import "./App.css"; import { Line, Chart } from "react-chartjs-2"; import "chartjs-adapter-luxon"; import StreamingPlugin from "chartjs-plugin-streaming";

Chart.register(StreamingPlugin);

function App() { const [val, setVal] = useState(0); const buttonHandler = () => { setVal(val + 3); };

const onUpdateData = (chart) => { const now = Date.now(); chart.data.datasets[0].data.push({ x: now, y: val }); chart.update("quiet"); }; return (

Click here to update data
<Line
data={{
datasets: [
{
label: "Dataset 1",
backgroundColor: "rgba(255, 99, 132, 0.5)",
borderColor: "rgb(255, 99, 132)",
borderDash: [8, 4],
fill: true,
data: [],
},
],
}}
options={{
scales: {
x: {
type: "realtime",
realtime: {
duration: 20000,
refresh: 1000,
delay: 2000,
onRefresh: onUpdateData,
},
},
y: {
title: {
display: true,
text: "Value",
},
},
},
interaction: {
intersect: false,
},
}}
/>

);
}
export default App; `

Yes, no matter what state changes on the page the chart resets. I still cant seem to figure it out....
for testing I'm setting the pause property with a click of a button. The streams pauses but the data is being reset

[arendeutsch]

is there any update on that matter ?