Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬Register for the Oct 27 webinar.

Addring removing unknown amount of traces

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.

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

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);
                            })

                        }




                    })
					
					}