apache / echarts

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

Data Grouping according to Zoom in Candle Stick Chart #18685

Open RahulVishK opened 1 year ago

RahulVishK commented 1 year ago

What problem does this feature solve?

One expectation from ECharts is that whenever we have time-based data and adjust the zoom level, the data should be grouped and split accordingly. For instance, if we have 1000 data points spanning over 4 years, when the chart is rendered, it should display only four data points (grouped by a specific method such as average, minimum, maximum, etc.). Furthermore, when zooming in, the data should be split on a monthly basis for each year, allowing for a more detailed view.

we have similar Functionality in amcharts please go through : https://www.amcharts.com/demos/candlestick-chart/

What does the proposed API look like?

we have similar Functionality in amcharts please go through : https://www.amcharts.com/demos/candlestick-chart/

helgasoft commented 1 year ago

duplicate of #16150

whenever we have time-based data and adjust the zoom level, the data should be grouped and split accordingly.

Different formatters for different time granularity is implemented in ECharts for axis type 'time'.
See example from @Traumflug in #18675. Just add dataZoom:{type:'inside'}, and try zooming in/out.

RahulVishK commented 1 year ago

In ECharts, we know that time granularity is available for the 'time' axis type, we require a feature where it is possible to aggregate the data where it does the Time Grouping and keeps the data points to optimal number of points so that the number of points plotted on chart are always within a certain threshold limit no matter at what granular level the chart is plotting the data.

For example, if we consider for a transactional data of 10 years and let say for each day on an average let's assume there are 100 records, then it would be resulting in a total of 100 365 10 = 365000 data points.

So even if chart manages to render all the data points on the chart after some time say about 10 secs or more time later the data plotted on the chart is all overlapping and not so intuitive and user can’t analyse anything much from that unless he zooms in and reduces the time range.

So chart is expected to plot 365000 data points which is what EChart is doing but it would be impacting the chart performance as the data points are lot many and performance keeps degrading as the points keep growing if we increase the time period range. To address this, we need some kind of Time Period Grouping where the data is getting aggregated and the number of points actually rendering on a chart will dramatically reduce based on the threshold limit and the chart performance will be better at all times no matter whatever time range we are looking the data for.

For instance, if we set a threshold such as "only 500 data points or below should be plotted on the chart at any given point in time and we should be able to configure if the data can be aggregated or we can consider taking minimum, maximum, low, or high, avg etc. Additionally, when zooming in or out, in a similar way time grouping should kick in and the new dataset considering the threshold limit would be fetched and feeded to the chart.

Please go through the section Dynamic data item grouping here to get a better understanding of what I am talking click here

Please refer to the sample here which uses Time Grouping and the chart perceived performance from user standpoint is better even though it’s rendering for larger time periods. click here

helgasoft commented 1 year ago

Good explanation. And a nice feature of amcharts. groupData:true + "The threshold can be changed using groupCount setting"

Traumflug commented 1 year ago

@RahulVishK

we require a feature where it [...] keeps the data points to optimal number of points

That's a very developer-centric view. Users of candle charts care much more about correctness than about a "nice" look or optimum performance.

As candle charts are about learning how a market behaves, minutely, hourly and daily candles are three different kinds of charts. Switching between them arbitrarily would greatly confuse users.

The documentation you linked talks about configuration items and custom functions to aggregate multiple candles into a single one. There is only one correct way to do such an aggregation (open = open of first candle, close = close of last candle, high = highest high, low = lowest low), so offering custom methods would be overengineering.

The chance to have more than 10.000 candles in a chart is very slim. No idea where one could get such data. One can trade on stock markets only in the present, so focus in mostly on the last few hundred candles. The solution for not knocking down performance is pretty simple: don't allow to zoom out to more than 10.000 candles, initially show some 100-200, only. Those curious about prices 20 years back have to scroll, then. Or process their data before feeding it into the chart.

No offense, please, watching a few professional traders and how they work with candle charts would likely be a good idea. Here's one (German audio, doesn't matter here): https://www.youtube.com/watch?v=ITAbZMbfYBQ See how he works in a chart with daily candles first, then switches at minute 3:15 to another one with hourly candles of the same stock.

Traumflug commented 1 year ago

P.S.: Nevertheless some kind of grouping is a good idea. Because the first candle of a week should more likely get a label on the time axis than other candles of that week. Likewise for the first candle of an hour with 1-minute-candles.

RahulVishK commented 1 year ago

I agree, grouping and labeling from charts can provide valuable information and improve the readability of the chart.