Dynamic update series ?

[temaivanoff]

How to dynamic update series ?

tried variant 1

  componentDidUpdate(prevProps) {
    if (this.props.data.series !== prevProps.data.series && this.chart !== null) {
      this.chart.options.baseTime = this.props.data.baseTime;
      this.chart.options.series = this.props.data.series;
      this.chart.update();
    }
  }

tried variant 2

  componentDidUpdate(prevProps) {
    if (this.props.data.series !== prevProps.data.series && this.chart !== null) {
      this.chart.options.series = [];
      this.chart.update();
      this.chart.options.baseTime = this.props.data.baseTime;
      this.chart.options.series = this.props.data.series;
      this.chart.update();
    }
  }

This examples duplicate series. Should it be completely destroyed ?

[huww98]

Sorry, I don't use react. But replacing the whole options.series will not work. I rely on the objects in it to hold some internal state.

To add new series, you can use options.series.push(), dynamically removing series is not implemented yet. Destroying then rebuilding should work. But mind the performance.

[temaivanoff]

Hi, I tried, everything works

  updateChart = () => {
    if (this.chart) {
      this.chart.dispose();
    }

    this.chart = new TimeChart.core(this.root, {
      baseTime: this.props.data.baseTime,
      renderPaddingLeft: 45,
      series: this.props.data.series,
      formats: this.props.item.payload.formats,
      plugins: {
        lineChart: TimeChart.plugins.lineChart,
        d3Axis: d3Axis,
        legend: TimeChart.plugins.legend,
        crosshair: TimeChart.plugins.crosshair,
        nearestPoint: TimeChart.plugins.nearestPoint,
        zoom: new TimeChart.plugins.TimeChartZoomPlugin({
          x: { autoRange: true }, y: { autoRange: true }
        }),
        tooltip: new TimeChartTooltipPlugin({
          enabled: true, xLabel: 'Time', xFormatter: this.xFormatter, 
        }),
      }
    });
  }

the question I had was mostly performance, it seems to work fast. Perhaps you need to think about expanding the api removing series and clear series

[aletowk]

Hi,

I am trying to do similar stuff. I want to update the chart with data newly received from a websocket. By any chanve, would you be able to share the complete component you wrote @temaivanoff ?

Thanks in advance !

[yueduz]

Similarly, the series also needs dynamic updates.