ngx-echarts icon indicating copy to clipboard operation
ngx-echarts copied to clipboard

Custom series throws an error on traversal during incremental rendering

Open JadedEric opened this issue 4 years ago • 0 comments

First off, like so many others, I have to commend you on this product.

The ease at which a developer picks up the grunt of the product is just outstanding. Up until this point, I've been really good at figuring out errors, issues and bad rendering, which stems from back patterns and or busted data, however, I've been running into an issue lately, which I have no idea how to best describe nor where in the process this is failing.

Background into my project:

I'm using SignalR to pull a bunch of telemetry from another system. The telemetry is massaged into the structure for the x-axis I require and pushed into the charts through MergeOptions.

70% of the time, this scenario works well, without issue and seems stable, however, every now and again, the MergeOptions faile with a traverse undefined error.

I've stepped through the code in custom.js (line 211 on my end), and can only surmise the fact that some data the createOrUpdate(...) method is requiring is not met, yet, I have no idea what I'm looking for, thus hoping some one here can shed some light.

The following snippet is taken from the area within my code, I believe might be the culprit.

this.mergedata[lookup][6] = parseInt(moment().format('x'), 0);
this.mergedata[lookup][15] = 'scenario-1';

I'm basically updated one entry in the array of data I'm passing via MergeOptions. The last update in the code snippet is of little value, it's purely cosmetics to I can track, for debug purposes, where in the process I am.

The following, is the snippet which updates the MergeOptions call:

this.mergeOptions = {
  series: [{
    type: 'custom',
    renderItem: this.axisBars.bind(this),
    progressiveThreshold: 1,
    encode: {
      x: [6, 7],
      y: 0
    },
    data: this.mergedata,
    force: {
      friction: 0.1
    }
  }]
};

I have searched "el.traverse is undefined" across both this Github project, the root echarts Github page as well as StackExchange set of sites, and nearly all of them states it has to do with progressive loading, thus having updated the 'progressiveThreshold' for my series to 1, however, I do not believe this is the case here and has to do with the data collection, at the time the error occurs, to MergeOptions, I unfortunately have no reference as to how to debug this further.

The error:

Uncaught TypeError: Cannot read property 'traverse' of undefined
    at ExtendedClass.incrementalRender (custom.js:213)
    at Task.progress (Chart.js:271)
    at doProgress (task.js:217)
    at Task.push.9H2F.taskProto.perform (task.js:157)
    at echarts.js:1474
    at ExtendedClass.<anonymous> (Global.js:517)
    at Array.forEach (<anonymous>)
    at each (util.js:300)
    at ExtendedClass.eachSeries (Global.js:514)
    at renderSeries (echarts.js:1464)

Any help would be greatly appreciated with this scenario. If I need to post more information, I'll gladly do so.

Thanks in advance,. E

JadedEric avatar Oct 25 '20 19:10 JadedEric