Fábio Miguel Ferreira Coelho
Rank: #2125
11Views
10Comments
Solved
Charts & HighCharts API
Question
Reactive
Charts
Application Type
Reactive

Hi buddies,


I hope you are fine.


I want to create a specific line chart:

First, I use 3 inputs where the user writes the Capital, the Flat Rate, and the Period of Time. Then the user clicks on the button "Calculate" and the Amount is calculated.

The button "Calculate" runs a server action with this formula  M = C (1+i)t  

M = Amount | C = Capital | i = Flat Rate | T = Period of Time

I calculated this formula in OutSystems and works perfectly:

Amount =
= Capital*Power(1+(FlatRate/100),PeriodOfTime)


Now I want to create a line chart where the X-Axis is the Years and the Y-Axis is the Money, and the red line is my formula calculated and the blue line is the amount. (see chart above)


I saw the HighCharts API but I can't create the chart correctly.

I think I need to use the Client Action AdvancedFormat_Init and assign the output of this client action to my local variable AdvancedFormat, but I don't know what to write in the Client Action AdvancedFormat_Init properties.

After this fill in the properties of the line chart and I think it's done.



I want to create a chart like this:


Can you help me, please?


Thanks in advance.


Best regards,

FC

0
0
on 6th Feb
Copy link to comment
Afonso Carvalho
mvp_badge
MVP
Rank: #45
Solution

Replying to Fábio Miguel Ferreira Coelho's comment on 07 Feb 2021 02:12:36


I'm thinking it will look a little like this. Right now it only deals with one Series, but you should be able to create another by changing the DataSeriesName attribute when you append elements to the DataPoint List.

Note the loop using an If instead of a For Each element. It's easier like this because we're not working with a List, we're building it off an integer (the number of years).

Try debugging it and seeing if you can get a feel of how it works.

See solution in context
ReactiveApp.oml

1
0
on 7th Feb
Copy link to comment
Dorine Boudry
Rank: #127
Solution

Replying to Fábio Miguel Ferreira Coelho's comment on 07 Feb 2021 00:09:44


Well yes,

as I said in my first reply and as Afonso already said :  loop through the years with an ad hoc loop, and for every year from 0 to PeriodOfTime, add a datapoint to the list with the year as label and the result of that formula as value.  meaning if you want 10 years, you will execute that formula 10 times, each time with a different value for t.  Is there anything in this that you don't know how to do ?  You know what an ad hoc loop is ?  You know how to define a variable of type datapoint list ?  You know how to add items to a list ?

And once you have done that, you will expand your formula to also take into account the monthly contributions.  But for an MVP, I would stick with just an initial investment and get that to work, if I were your.

Dorine

See solution in context
1
0
on 7th Feb
Copy link to comment
Afonso Carvalho
mvp_badge
MVP
Rank: #45

Hi Fábio,

You don't necessarily need to use AdvancedFormat_Init - it's mostly used to customize your chart with more advanced options.

The bare minimum that you need to create a Chart is a list of DataPoints - these are basically a list of your x,y coordinates that will be mapped out to your chart. Without looking at your module, I'm assuming that your formula is already producing a list of results, or can be tweaked to.

You could create a local variable of the DataPoint List type, fill it out with your formula output, and then feed it to the chart widget - you could then tweak it to have the look and feel in your screenshot.

1
0
on 6th Feb
Copy link to comment

Hi Afonso,


Thanks for your answer.


I thought I had to use the AdvancedFormat_Init because I had to customize the chart to get the DataPoints (X-Axis and Y_Axis).

Yes, I know I need to create a List of DataPoints but I don't know how can I do it.

My formula only gives me one result.

Basically, I want to use in the X-Axis the Years (0 to 'PeriodofTime') and in the Y-Axis the Money (0 to 'Capital').

In the chart I want to show the 'Amount'.

These variables (Capital, PeriodOfTime, FlateRate) are local variables of the screen and receive value when the user writes in the input widgets, only the "Amount" is calculated.

I don't use aggregates in this case.

It's possible to do what I want to do?


I don't know how can I get the list of DataPoints...

Can you help me?


Sorry, if my explanation isn't the better.


Thank you!.


Best regards,

FC

0
0
on 7th Feb
Copy link to comment
Afonso Carvalho
mvp_badge
MVP
Rank: #45

Replying to Fábio Miguel Ferreira Coelho's comment on 07 Feb 2021 00:09:24


I think I understand your explanation, but maybe I'm not fully understanding what you want to accomplish.

A chart displays a set of data that is fed into it, a list of datapoints. But the form you showed us, as well as the formula, will output one result, so only one datapoint. 

How do you translate this result into a list of results? Something in your formula needs to vary in order to create a set of datapoints. Looking at your X and Y axis, it would probably be the period of time.

What you can do is cycle through your time period. So assuming that the Period Of Time input is supposed to be the number of years, you create a loop that will cycle through your formula X number of times (where X is what the user inputted), but with a different year (1, 2, 3, 4 years, etc), and at the end of the formula calculation, you append the result of it to your DataPoint List local variable using the ListAppend action.

0
0
on 7th Feb
Copy link to comment

Replying to Afonso Carvalho's comment on 07 Feb 2021 00:25:27

Yes, I understand what you write and you are totally right.

It's easier to show you what I want to do.

I want to do this in outsystems https://www.investor.gov/financial-tools-calculators/calculators/compound-interest-calculator 




Can you help me?


Thanks in advance.


Best regards,

FC


0
0
on 7th Feb
Copy link to comment
Afonso Carvalho
mvp_badge
MVP
Rank: #45
Solution

Replying to Fábio Miguel Ferreira Coelho's comment on 07 Feb 2021 02:12:36


I'm thinking it will look a little like this. Right now it only deals with one Series, but you should be able to create another by changing the DataSeriesName attribute when you append elements to the DataPoint List.

Note the loop using an If instead of a For Each element. It's easier like this because we're not working with a List, we're building it off an integer (the number of years).

Try debugging it and seeing if you can get a feel of how it works.

ReactiveApp.oml

1
0
on 7th Feb
Copy link to comment

Replying to Afonso Carvalho's comment on 07 Feb 2021 16:35:50

Hi Afonso,


Yes, it is!!!

It's solved.

Thanks for your support.


Have a nice day!


Best regards,

FC

1
0
on 7th Feb
Copy link to comment
Dorine Boudry
Rank: #127

Hi Fabio Miguel,

It sounds to me like all you need to do is create a list of datapoints, one for every year from 0 to PeriodOfTime, with the year as label and the result of that formula as value.  And maybe a second dataseries with the year as label and the capital as value, allthough I'm not really seeing the point of plotting that as it doesn't change over time.

You don't need AdvancedFormat for that, just make a list of Datapoint (already available in OS) and set that list as SourceDataPointList of your chart widget.

Dorine

1
0
on 6th Feb
Copy link to comment

Hi Dorine,


Thanks for your answer.


I thought I had to use the AdvancedFormat_Init because I had to customize the chart to get the DataPoints (X-Axis and Y_Axis).

Yes, I know I need to create a List of DataPoints but I don't know how can I do it.

My formula only gives me one result.

Basically, I want to use in the X-Axis the Years (0 to 'PeriodofTime') and in the Y-Axis the Money (0 to 'Capital').

In the chart I want to show the 'Amount'.

These variables (Capital, PeriodOfTime, FlateRate) are local variables of the screen and receive value when the user writes in the input widgets, only the "Amount" is calculated.

I don't use aggregates in this case.

It's possible to do what I want to do?


I don't know how can I get the list of DataPoints...

Can you help me?


Sorry, if my explanation isn't the better.


Thank you!.


Best regards,

FC

0
0
on 7th Feb
Copy link to comment
Dorine Boudry
Rank: #127
Solution

Replying to Fábio Miguel Ferreira Coelho's comment on 07 Feb 2021 00:09:44


Well yes,

as I said in my first reply and as Afonso already said :  loop through the years with an ad hoc loop, and for every year from 0 to PeriodOfTime, add a datapoint to the list with the year as label and the result of that formula as value.  meaning if you want 10 years, you will execute that formula 10 times, each time with a different value for t.  Is there anything in this that you don't know how to do ?  You know what an ad hoc loop is ?  You know how to define a variable of type datapoint list ?  You know how to add items to a list ?

And once you have done that, you will expand your formula to also take into account the monthly contributions.  But for an MVP, I would stick with just an initial investment and get that to work, if I were your.

Dorine

1
0
on 7th Feb
Copy link to comment

Replying to Dorine Boudry's comment on 07 Feb 2021 09:18:10

Dorine,


Yeah, you are absolutely correct.

Yeah, I create this:

It's solved and works perfectly.

Thanks for your explanation and support.


Have a nice day!


Best regards,

FC

0
0
on 7th Feb
Copy link to comment