194
Views
8
Comments
Solved
Displaying list of values from JSON in a LineChart

Dear all,

I need to feed the LineChart with the list of records that will represent data points of the chart.  In order for this I followed this old tutorial as guide:
https://www.youtube.com/watch?v=AE7pbEcYIpA

As demonstrated, I created a variable Record List which is type of DataPoints, and this variable will have the list of values to show on the chart and I binded it as the source.

Beforehand it is also useful to tell that my data is coming from RestAPI in JSON format.  

The response consists several objects and of them the “daily” node, which is an array, consists of 8 objects. The inner object named “temp” holds temperature values for the day and I want to display max and min records of it for the upcoming 8 days in the graph.

So due to the structure I iterate through daily object, use DataPoint_Init action, which is Chart component initializing a record of that structure data point, and set label and value equal to current element max temp. And finally to add this first record to variable RecordList, I use built in action ListAppend.  And I repeat the same steps for the min values    



However what I achieve at the end is this:

And when I check what's this 279.41 , I see that it is just daily object's first element's temp max value.
Unlike Aggregates used in tutorial video, I am here working with lists. Can it be an issue? Or else any idea how we can solve it?
I checked outsystems docs here too but couldn't solve it yet.
Many thanks in advance!!

2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

as i indicated, the important thing is that each datapoint within a dataseries must have a unique value for label property, right now you call them all 'Max' or 'Min', that won't work.

so, i changed it to the rownumber instead of 'Max' for a test :et voila ! there's your chart


2021-09-06 15-09-53
Dorine Boudry
 
MVP

Hi Gulbala,

it's hard to know exactly without your oml, but I think what you want is to use 'Max' and 'Min' as the DataSeriesName, and to set a value for each datapoints label that is unique within your series, I would say, maybe LoadDashboard.DailyItem.Current.dt.  That would give you 2 lines on your chart, one for max and one for min temp, and have the date on the X axis.

Dorine


EDIT : also there's not really a reason to iterate your items twice, you could add both min and max in the same loop.

UserImage.jpg
Gulbala Salamov

Dear @Dorine Boudry , many thanks for the ideas!
I have removed redundant second for loop and in the meantime tried couple of more ways to achieve the desired graph but unfortunately couldn't find out why two lines with records don't come out even though I've defined DataSeriesName.
In oml file you can also see the different actions I created namely - UpdateGraphV1,V2,V3.
In case during run time it asks credentials for the api service:
username: e95a26e5-3f06-46fa-971a-ae6653bf4ecd
password: password_password
I greatly appreciate the time you take to help me!
Thanks again

apidemo_v136.oml
2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

as i indicated, the important thing is that each datapoint within a dataseries must have a unique value for label property, right now you call them all 'Max' or 'Min', that won't work.

so, i changed it to the rownumber instead of 'Max' for a test :et voila ! there's your chart


UserImage.jpg
Gulbala Salamov

Dear @Dorine Boudry , thank you so much. Wow I am so happy to see it. It looks great :)
And sometimes really very tiny details matters a lot as we can see here it is about missing unique label name !
Dorine, while testing the graph for each location using DropDown, I noticed each location records being added on top of existing records generating weird look. I will try to debug to figure out what's going on :)

See the imgs below:

1st Netherlands Weather
2nd Japan

3rd Singapore


Lastly, may I also kindly ask if you could please give me a clue if I can reformat and change x and y axis information based on the coming datapoints? In other words, for the Y axis for instance, is it possible to do some math to convert Kelvin values to Centigrade within the chart settings rather than going back ClientAction and do the necessary conversion there before assigning data points? The same need also applies for the X axis as it should state the dates rather than numbers :)

Many many thanks !!!


2021-09-06 15-09-53
Dorine Boudry
 
MVP

well, if you choose another location with dropdown, you will have to do a ListClear before starting with the ListAppends.  Not sure, but I think that would be it.

As to calculations, I am a strong believer in lowcode before highcode, so I would do the calculations for each datapoint inside that loop before creating and adding it to the list.  That is much easier than trying to understand the api of the underlying chart javascript library.

Dorine

UserImage.jpg
Gulbala Salamov

Dear Dorine, many thanks again for your replies and thoughts. I am grateful for all. I will try them later , and in a sense, as you also mention, ListClear and modification inside loop should be sufficient :)

2025-01-15 08-35-04
Vignesh Sekar

hi,

 we can get the value using JSON deserialize

when ever you consume API you get JSON output ri8 then assign that json to json deserialize ,

create your own Structure using output of that JSON assign that structure to output format of that json serializer, then assign that JSON deserialized output to your local variable. now that data was assign to your local var.


thanks

UserImage.jpg
Gulbala Salamov

Hi @vignesh S many thanks for your response and idea !
Indeed doesnt't OutSystems automatically handle all these JSON deserialization when you consume Rest API? This is what I remember from docs and tutorials and besides till now in my implementations I haven't got a need to manually deserialize/serializse them. Maybe you do that in special cases?
Well, after deserializing and assigning variables, I had some widget setting issues  but apparently they are resolved anymore. 
Just my curiosity, do you mind to enlighten me when you'd need to manually deserialise JSON objects based on your personal experiences? That would be useful for me for future :)
Many thanks :) 

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