amcharts / amcharts4

The most advanced amCharts charting library for JavaScript and TypeScript apps.
https://www.amcharts.com/
1.16k stars 322 forks source link

Incorrect Date grouping with same Dates #4341

Closed Majky1423 closed 11 months ago

Majky1423 commented 11 months ago

Bug description

CodePen Example: date grouping

As you can see from example. First graph is incorrect and shows sum value 6 on all columns. From my research I found out that amChart somehow doesn't group this kind of dataset. Dataset consists of: 07/08/1971 01:00 - sum = 1 07/12/1972 14:32 - sum = 1 2x 03/10/1977 14:33 - sum = 2 2x 02/11/2020 15:19 - sum = 2

AmChart groups this dates into 4 groups but it is not able to continue and provide correct sum value. If I insert 1 more date: 30/09/2020 03:53 - sum = 1 AmChart's sum values are correct.

So the problem has probably something to do with no "clear" group data in my first dataset (in my case 2 groups of 1 date and 2 groups of 2 EXACTLY SAME dates). If I insert 1 more date, which falls into one of already mentioned groups but with little bit different date, amChart has no problem to calculate sums of all groups.

If I would insert 7th date with value that would not fall into one of already created groups, amChart would be incorrect again. Because it would follow the same principle of not "clear" group = 3 groups of 1 date and 2 groups of 2 EXACTLY SAME dates.

I hope that I made it clear, it is a little bit difficult to describe it. I will try to answer all the questions, to clarify this bug, as soon as I can.

Environment (if applicable)

amCharts: 4.10.38 Angular, JS

martynasma commented 11 months ago

The issue is with the tooltip contents. You should not use series.tooltipText = "{valueY.sum}".

What you're doing here is asking for a sum of all data items.

This will do:

series.tooltipText = "{valueY}";
Majky1423 commented 11 months ago

Well yes and no. Thanks for the clarification with tooltip but the problem still remains.

As you can see here, if I change the tooltip text, in first graph columns in year 1977 and 2020 have value 1, which is incorrect because I have 2 same dates here, otherwise the values are correct.

And again, if I insert one more date to these two columns, which is not the same date, then the amChart starts to correctly calculate sums in whole graph.

martynasma commented 11 months ago

I think I know what's going on here.

The grouping does not kick in at all. The data seems to be yearly, and that's what DateAxis is detecting (you don't have baseInterval set).

There are only about 50 years in the scale, so DateAxis does not group them. It displays all data items as they are.

Since you have two identical data items for 1977, they are shown both, but since the timestamps are the same, they are shown overlapping one another.

You might want to force grouping into years:

dateAxis.groupInterval = {
  timeUnit: "year",
  count: 1
};
Majky1423 commented 11 months ago

Yeah, this would work if I have this kind of scale all the time. But I do not know what scale I will have. It can be in the scale within few hours or week or months or years like this example. So the only solution would be that I need to calculate and find out on what scale current dataset is (seconds/minutes/hours/days/weeks/months/years)?

I updated the EXAMPLE with same kind of dates but the scale is within few days. If I change it to timeUnit: "day" then yes, it will work again but as I said, that would mean that I need to process whole dataset even before amChart processing.

And it still does not answer the question, why does it work correctly when I insert just one more date which is different by 1ms. As it is shown in the 2nd graph. The yearly scale is the same right? And I did not have to set group interval at all.

martynasma commented 11 months ago

OK, so is the sample data realistic? I mean single data item every few years, then bam two data points with exact same timestamp :)

And it still does not answer the question, why does it work correctly when I insert just one more date which is different by 1ms. As it is shown in the 2nd graph. The yearly scale is the same right? And I did not have to set group interval at all.

Well, you don't explicitly specify granularity of your data, leaving DateAxis to use their own fuzzy logic to decide it. Most probably it decides that you more granular data than year, e.g. seconds, then naturally grouping kicks in, because there are a lot of seconds in 50 years.

Hope that makes sense.

Majky1423 commented 11 months ago

Really realistic ... imagine dates of birth without time part, groups of exact same timestamp is the only thing you will get. And it does not matter whether there are 1, 2 or 10 data points in group and xy groups, grouping does not kick in at all.

Is force grouping only thing which can help? Because then, only solution that comes to my mind is to set groupInterval timeUnit to millisecond and force min. width for columns, which is a little bit meh solution, when column width corresponds to data in it :/

martynasma commented 11 months ago

Well, another thing you can do is to provide hints to DateAxis as to granularity of your data:

dateAxis.baseInterval = {
  timeUnit: "day",
  count: 1
}

This way you'll ensure that your data is grouped when zoomed out.

However, when user will be zooming in down to day level, at some point grouping will be turned off and the same issue will be there - data points with exact same timestamp will overlap and will look like one.

My advise is to aggregate your data points at data level, when data is prepared. Merge items with same timestamp into one data item, and sum up their values.

Majky1423 commented 11 months ago

Well, this would work in our case because we do have zoom action disabled. Thanks for your help and time ;)

We are considering update to amCharts5 and I would like to ask if this same problem happens there, with same dates groups or logic behind grouping is upgraded. Thanks

martynasma commented 11 months ago

I didn't test it, but it's not a bug, and the same logic applies in amCharts 5 - if grouping is not enabled, the same-timestamp data items will not get summed up.