Supported data sources for update-spline real-time streaming chart

[mrbluecoat]

Your https://ej2.syncfusion.com/react/demos/#/bootstrap5/chart/update-spline demo is awesome. For a real-world scenario, what JavaScript-client compatible streaming sources could be used to load splineData? Websocket, MQTT, AMQP, GCPubSub, ...? It would be great to see an example using a public data source.

[mrbluecoat]

I also found https://help.syncfusion.com/typescript/chart/real-timechart but it's not clear if that's part of your JS1 or JS2 collection.

[NishanthiPanneer]

Hi MrBlueCoat,

Thank you for your query regarding supported data sources for real-time streaming charts. The link you referenced is indeed for EJ1. To assist you, we have created a React sample that demonstrates how to fetch data from a WebSocket and utilize the addPoint and removePoint methods.

Below is a brief overview of the implementation:

Code Snippet :

useEffect(() => {
    const socket = new WebSocket('ws://localhost:8080'); // Your WebSocket server
    socket.onmessage = (event) => {
      const parsedData: ChartData = JSON.parse(event.data);
      addData(parsedData); // Call addData to add new data
    };
    socket.onclose = () => {
      console.log('WebSocket connection closed');
    };
   // Clean up the socket connection on component unmount
    return () => {
      socket.close();
    };
  }, []);

  // Function to add new data to the chart
  const addData = (newData: ChartData) => {
    // Add data to the chart using addPoint method with null checks
    if (chartRef.current?.series[0]) {
      (chartRef.current.series[0] as Series).addPoint({ x: newData.x, y: newData.y }, 800); // Update the chart with new data
    }
  };

  // Function to remove the data from the chart using removePoint
  const removeData = () => {
    if (chartRef.current?.series[0] && Object.keys((chartRef.current.series[0] as Series).dataSource).length > 2) {
      // Remove the first point (oldest data point) safely
      (chartRef.current.series[0] as Series).removePoint(0, 800); // Update the chart by removing the oldest point
    }
  };

  // Call removeData every few seconds to limit the number of points displayed
  useEffect(() => {
    const interval = setInterval(() => {
      removeData(); 
    }, 5000); // Adjust the time as needed (e.g., every 5 seconds)

    return () => clearInterval(interval);
  }, []);

Attached websocket server and chart sample for your reference.
Websocket.zip
Chart sample (React).zip

Regards,
Nishanthi