search

apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.66k stars 19.61k forks source link

[Feature] Large datapoints ( more than 500k) at a time in echarts heatmap #18567

Open jayeshsh17 opened 1 year ago

jayeshsh17 commented 1 year ago

What problem does this feature solve?

So, I'm trying to build a chart where we can show more than 500k data points as a heatmap in charts. Currently, we've had a "progressive" option which helps a little bit but when somebody wants to zoom in or zoom out then progressive things behave like animation and it's very annoying as a user.

Also, when hovering through data it lags a lot, which also adds up to bad user experience.

What does the proposed API look like?

So, if there could be a method where maybe we can use "Webgl" renderer in heatmap or progressive doesn't feel like the animation to the user. That would be great.

Like we already have scattergl but we don't have the same for the heatmap.

helgasoft commented 1 year ago

similar, if not duplicate of #18377 With that many points (500K) why not use scatterGL ? Interaction is much faster and only a very deep zoom will reveal the points. Demo Code

UPDATE: use progressiveThreshold: 500000 to disable progressive since there is a GL-bug

jayeshsh17 commented 1 year ago

Hi But this is a scatter plot, right? I want a heatmap. Basically, I'm trying to make a heatmap similar to https://bookmap.com/en.

Can you help me with that?

helgasoft commented 1 year ago

This issue is about performance and I provided demo code addressing it. Now you are asking for evaluation of a "similar" third-party application. Do you have sample data at least ?

jayeshsh17 commented 1 year ago

Hi

In the demo code you provided, that was not a heatmap but a scatter plot. Since the data is so large it seems like a heatmap. But when you zoom into that, you'll realize it's a scatter plot.

Pls, check that.

If you can make that into a heatmap, that'll work too.

jayeshsh17 commented 1 year ago

Hi have you gone through it? Or can you suggest any alternative way?

AndreyPatseiko commented 1 year ago

Hi. ScatterGL has couple differences: 1) in presenting elements (which you can't change) 2) doesn't support tooltip functionality Also seems like echarts-gl library doesn't supported well. Last release has been around 2years ago. 😒.

I also struggle with performance 😊 My example.

AndreyPatseiko commented 9 months ago

So. I've created fork in chart-gl library, and developed the heatmapGL type (which is based on scatterGL). It's not perfect code - with some limitations, but it's work for me, and I'll use it until we get official implementation. If you want to play with this fork, first read README file (at the very bottom).