Addring removing unknown amount of traces

plotly.js
1

I am new to plotly.js, I have unknown number of variables to be plotted. The user can select/deselect the variables(trace) and
the corresponding traces will have to be added and removed dynamically in the plot. I have a continuous stream of data coming from a database.
I have tried using Addtraces() /RemoveTraces()/ExtendTraces() combination without success. Firstly Plotly.AddTraces doesn’t work(throiws error “TypeError: Plotly.addTraces is not a function”!!!).

ExtendTraces works only if I have one variable(trace), when I set the maxsize I even get to see the live streaming effect when I keep adding one data point every second, but stragely this doesn’t work if I have more than one trace.

please help me out. I am running out of ideas.

2

if I have only one trace, even deleteTraces works. My problem is handling unknown number of traces, which can be added and deleted at freewill by the user

3

Here is the code snippet, I am stuck since 2 weeks!

            /***************************************************************************************************
            * SQL Requests
            ***************************************************************************************************/
            private  __updateLivePlot2(columnName: any, tableName: any, index: number, _iIndex:number, length: number, bAddTrace: boolean) {

                this.__elementLoader.css('display', 'inline-block');
                

                var query;
                query = `select TOP ${this.__dataPoints} DateTime, ${columnName} from ${tableName}`

                Functions.getDataByQueryString(query)
                    .then(response => {
                        const responseData = [...response];
                        const dataSet = responseData.map((ds: any) => {
                            return {
                                x: ds.DateTime,
                                y: ds[columnName]
                            }
                        })
                        const x = dataSet.map((x: any) => x.x);
                        const y = dataSet.map((y: any) => y.y);

                        this.__liveData.push({
                            x: [x],
                            y: [y]
                        })

                        this.__traceIndices.push(index);


                        if (this.__livedata.length == length) {
                            this.__livedata.foreach((livedata: any, indexxxx: any) => {

                                if (baddtrace) {
                                    plotly.relayout('plot', this.__plotlylayout);
                                    plotly.plot('plot', [livedata]);                                    
                                    plotly.addtraces('plot', [livedata], [this.__traceindices[indexxxx]]);

                                }
                                else
                                    plotly.extendtraces('plot', [livedata], [this.__traceindices[indexxxx]], 3600);
                            })

                        }




                    })
					
					}