14
Views
9
Comments
Solved
LineChart : Data not at the right place
Application Type
Reactive

Hello,

I have an issue with LineChart. In the example below I try to map data per week of the year. A person buying a quantity of objects (whatever) during a week of the year, I select the period and extract this data from an Aggregate.

I build my aggregate with a custom sortfield so that all the values are coming back to me sorted by week of the year / year (basically I multiply the year by 100, and add the number of the week so it's sorted by week AND year).

My data set (DataPointList) looks like this : 

[{"Name":"Teddy","SortField":"202243.000000","WeekOfTheYear":"43.000000","Count":"1","Year":2022},

{"Name":"Teddy","SortField":"202300.000000","WeekOfTheYear":"0.000000","Count":"1","Year":2023},

{"Name":"Teddy","SortField":"202307.000000","WeekOfTheYear":"7.000000","Count":"1","Year":2023},

{"Name":"Olivia","SortField":"202307.000000","WeekOfTheYear":"7.000000","Count":"1","Year":2023},

{"Name":"Teddy","SortField":"202310.000000","WeekOfTheYear":"10.000000","Count":"2","Year":2023},

{"Name":"Patrick","SortField":"202315.000000","WeekOfTheYear":"15.000000","Count":"3","Year":2023},

{"Name":"Teddy","SortField":"202316.000000","WeekOfTheYear":"16.000000","Count":"2","Year":2023},

{"Name":"Teddy","SortField":"202318.000000","WeekOfTheYear":"18.000000","Count":"1","Year":2023},

{"Name":"Teddy","SortField":"202321.000000","WeekOfTheYear":"21.000000","Count":"1","Year":2023},

{"Name":"Teddy","SortField":"202322.000000","WeekOfTheYear":"22.000000","Count":"1","Year":2023},

{"Name":"Teddy","SortField":"202324.000000","WeekOfTheYear":"24.000000","Count":"1","Year":2023},

{"Name":"Patrick","SortField":"202324.000000","WeekOfTheYear":"24.000000","Count":"1","Year":2023},

{"Name":"Olivia","SortField":"202324.000000","WeekOfTheYear":"24.000000","Count":"1","Year":2023},

{"Name":"Teddy","SortField":"202327.000000","WeekOfTheYear":"27.000000","Count":"1","Year":2023},

{"Name":"Olivia","SortField":"202329.000000","WeekOfTheYear":"29.000000","Count":"1","Year":2023},

{"Name":"Teddy","SortField":"202332.000000","WeekOfTheYear":"32.000000","Count":"1","Year":2023},

{"Name":"Teddy","SortField":"202335.000000","WeekOfTheYear":"35.000000","Count":"2","Year":2023},

{"Name":"Teddy","SortField":"202336.000000","WeekOfTheYear":"36.000000","Count":"2","Year":2023},

{"Name":"Patrick","SortField":"202338.000000","WeekOfTheYear":"38.000000","Count":"1","Year":2023},

{"Name":"Teddy","SortField":"202349.000000","WeekOfTheYear":"49.000000","Count":"1","Year":2023}]


The chart displays properly, however, you can notice that Patrick & Olivia only buy objects in particular weeks : 

Olivia : W7 2023 & W24 2023 & W29 2023

Patrick : W15 2023 & W24 2023 & W38 2023

Teddy buys objects in most weeks : 43 (2022), 0 (2023), 7, 10, 16, 18, 21, 22, 24, 27, 32, 35, 36 & 49


At some points, they buy on the same weeks : 

Olivia + Teddy on W7 2023

Olivia + Patrick + Teddy on W24 2023


Here is what it looks like : 

And, as you can see, even if I remove both Patrick & Teddy entries and only keep Olivia, the X axis is not updated accordingly and still shows the full timeline with Olivia entries appearing at the wrong place : 

I think it should normally plot the data entries above the right week, despite of the fact that the previous and following weeks have defined entries or not...


Thank you for your time

(I searched the forum, but couldn't find similar issue... Maybe my search terms were not accurate enough to find it, if it is the case I apologize in advance for opening a potential double-post)


2023-10-27 15-22-44
Rahul Yadav
Solution

As explained in the forum threads, its just the case of fiddling around with the configuration. Managed to resolve horizontal chart as well after some effort. 
|


Thanks,

Rahul Yadav


linechartissue_28122023.oml
2024-05-08 06-29-37
Prince Aadil Khan Panwar

Hi @Julien Pahaut 

could you please attach your database because i am unable to create the records which you have. so i will go through your OML and will try to help you. 

Thanks

Prince

2023-10-27 15-22-44
Rahul Yadav

Hi @Julien Pahaut 

Can you try posting the screenshot of how you are appending the values to the data point list? Or it would be best if you can attach the oml file itself for speedy resolution. 

In my experience of using charts, its always the appending which is the root cause for any issue. 

Thanks

Rahul Yadav

UserImage.jpg
Julien Pahaut

Here is a sample OML reproducing the issue with JSON data file (eventually change .txt to .json and put in resource folder)


Thank you

linechartissue.oml
DBData.txt
2023-10-27 15-22-44
Rahul Yadav

Hi @Julien Pahaut,

Thanks for uploading the oml. I found similar threads in the forum which resolves your problem. Please check - 

https://www.outsystems.com/forums/discussion/90082/how-to-create-a-line-chart-with-a-date-range/

https://www.outsystems.com/forums/discussion/93029/chart-format-x-axis-labels-with-datetime/

I applied the above solutions and the lines are getting plotted correctly. I've attached the modified oml along with the message. 

Thanks,

Rahul Yadav

linechartissue_27122023.oml
UserImage.jpg
Julien Pahaut

Hello,

Your solution works for this exact usecase, but I face the same issue with Bar Charts, both vertical and horizontal.

If you just add a vertical bart chart, and a horizontal bar chart below the line chart in my example, you will see the result. Even after setting the option (Entities.AxisValuesType.Datetime) to each axis (Y for horizontal bar chart, X for vertical)...

Here is what it looks like : 

This is the same for horizontal bar chart... values seem to be distributed in the wrong way, despite of the fact that I've set the options properly to datetime on the chart...

I attached a new OML file here (did not change json data) as I have added a calculated "SortDate" field to the aggregate to use directly in Label (so it matches datetime type)


Thank you for your support



linechartissue_28122023.oml
2023-10-27 15-22-44
Rahul Yadav

Hi @Julien Pahaut 

I just configured the last chart and it works as well after configuring the values type to DateTime. 

Attaching oml for your reference. 

Thanks,

Rahul Yadav

linechartissue_28122023.oml
UserImage.jpg
Julien Pahaut

Hi Rahul,

Thank you for checking. 

Indeed, seems the vertical bar chart works fine when you set datetime for chart value, and for x axis value, and then leave empty the Y axis value field... confusing for me, but okay...

But the Horizontal Bar chart does not behave the same, I just tried to set it the same way (chart value to date time & Y axis) but seems it's interpreting the date on both axis?? I don't get it... see what it looks like : 


2023-10-27 15-22-44
Rahul Yadav
Solution

As explained in the forum threads, its just the case of fiddling around with the configuration. Managed to resolve horizontal chart as well after some effort. 
|


Thanks,

Rahul Yadav


linechartissue_28122023.oml
UserImage.jpg
Julien Pahaut

Awesome,
Thanks a lot :)
Still messing around with some options now, but the main behavior of the chart now is working perfectly!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.