HighCharts Live Data using mqtt

Question

I am trying to prepare live chart using react and highcharts. I am using react-mqtt to retrieve live data and passing the data as props to Highchart component.

The Chart is rendering but, every time the data comes, it's rerendering the component.

My Expectation is, it should flow like a heartbeat graph. but a multi-line heartbeat.

Homepage:

            import React from 'react';
            import { Helmet } from 'react-helmet';
            import { FormattedMessage } from 'react-intl';
            import { connect } from 'react-redux';
            import { compose } from 'redux';
            import { createStructuredSelector } from 'reselect';

            import Chart from 'components/HighCharts';

            import { Connector } from 'mqtt-react';
            import {subscribe} from 'mqtt-react';

            const MessageContainer = subscribe({topic: 'system_monitor'})(Chart);

            export class HomePage extends React.PureComponent {

            render() {
                return (
                <article>
                    <Helmet>
                    <title>Home Page</title>
                    <meta name="description" content="A React.js Boilerplate application homepage" />
                    </Helmet>
                    <div>
                    <Connector mqttProps="ws://localhost:1884/">
                    <MessageContainer/>
                    </Connector>
                    </div>
                </article>
                );
            }
            }

HighChart Component Code:

            import React, { Component } from 'react';
            import HighCharts from 'react-highcharts';

            export default class SplineChart extends Component {

                constructor(props) {
                    super(props);
                    this.config = {
                        chart: {
                            type: 'spline',
                            animation: HighCharts.svg,
                            marginRight: 10,
                            width: 700,
                            height: 360,
                        },
                        title: {
                            text: 'RFID Chart'
                        },
                        legend: {
                            enabled: true
                        },
                        exporting: {
                            enabled: false
                        },
                        xAxis: {
                            type: 'datetime',
                            dateTimeLabelFormats: {
                                hour: '%I',
                                minute: '%I:%M',
                                seconds: '%I:%M:%S'
                            },
                            title: {
                                text: 'Time'
                            }
                        },
                        yAxis: {
                            title: {
                                text: 'Heart Beat'
                            }
                        },
                        series: this.props.data
                    }
                }

                render() {
                    console.log(this.props.data)
                    return (
                        <div>
                            <HighCharts config={this.config}></HighCharts>
                        </div>
                    );
                }
            }

Sample data from my local mqtt server: x value is TimeStamp and y the data point [ {"data":[[1524903290174,50],[1524903295176,55],[1524903300182,0],[1524903305185,5]]}] . Data comes every second. — , Apr 28 '18 at 09:18

score 0 · Answer 1 · answered Apr 28 '18 at 10:09

0

check accessing-highcharts-api-after-render and use addPoint() to add points dynamically.

  componentDidMount() {
    let chart = this.refs.chart.getChart();
    //chart.series[0].addPoint({x: 10, y: 12});

    //below is for demo    
    // set up the updating of the chart each second
    var series = chart.series[0];
    setInterval(function () {
      var x = (new Date()).getTime(), // current time
        y = Math.random();
      series.addPoint([x, y], true, true);
    }, 1000);

  }

stackblitz demo

answered Apr 28 '18 at 10:09

Deep 3015

9,929
5
30
54

but, the above which you have given is not useful to me, because i need to pass data from mqtt – Apr 28 '18 at 10:33
`chart.series[0].addPoint({x: 10, y: 12});` means `addPoint` is way of updating chart without reloading the chart you can use in mqtt – Deep 3015 Apr 28 '18 at 12:24
but, when i receive data in highchart component, its re-rendering. – Apr 28 '18 at 13:23
I am calling mqtt in my index and passing the data to chart component, does it re-renders the whole component? if yes, where can i subscribe to mqtt? – Apr 28 '18 at 13:55
instead of `series: this.props.data` in config ,initially pass as empty `series:[]`, and when mqtt is returning data ,update chart with `chart.series[0].addPoint([x,y],true,true);` – Deep 3015 Apr 28 '18 at 14:14
nopes its re-rendering when my props from mqtt changes.. :( – Apr 28 '18 at 14:46
1

I have updated the state in shouldComponentUpdate and set return false, so as to stop the re-rendering. Hope it will solve my problem. Thanks for your suggestions. – Apr 30 '18 at 04:23

HighCharts Live Data using mqtt

1 Answers1