How to dynamically update Repeater data for interactive bar graphs?

Hi all,

I’m currently prototyping an ROI calculator. This calculator needs to be able to generate bar graphs based on calculations that will update based on users updating their own data into a few text fields.

I’m using this amazing example from matie1987 as a starting point to have the bar graphs animate to scale based on repeater data.

Top Selling Albums in the last 20 years. (Interactive Bar Graph)

His example was in Axure 7, so I’m reverse engineering it a bit to work in Axure 8.

Where I’m getting a bit stuck is how to make the repeater data dynamic (in other words, if I surface a few text fields for the user to enter some numbers, those numbers need to generate new values in the repeater table, and then the bar graphs will update based on the new repeater data).

When I started going down this path, I assumed that I could add functions in the Repeater table cells, but I now see that the Repeater data is “hard-coded”.

Is it possible to do what I’m asking?

Here’s an over-simplified version of what I’m trying to do, just so I can see what, if any, approach would work:

User Input Data:

x = Hourly wage
y = Number of staff
z = average hours worked per employee/year

Repeater Data

Column Title = Total Yearly Salary
Column Value = (xyz)

Within the Repeater table, we’re also modeling growth, so we’d add extra rows to illustrate changes in yearly salary over time based on adding <n> of employees each year, as well as a large number of other dynamic calculations for other columns in the Repeater table.

I’ve been able to create Global Variables to provide a starting point for each math variable, but I’m not that fluent with variables, so it’s not entirely clear how I should go about building my .rp file so that I can have a user text field that updates the values within the Repeater so that the visualization of the bar graphs represents the user input data.

(The equations we want to use are much more complex than this example, but I think once I learn how to update the repeater data with this simple example, I should be able to figure out the rest :slight_smile:

Thanks in advance for any pointers!

Cheers,

Jeremy

In short:

Do you calculations in the action that adds the data to repeater. When you add a row to the repeater you can put an expression in each column of the row. So using local variables that point to the text on inputs you can add something like, [[Input1 + Input2 / Input 3]] (click the ‘fx’ button on the cell to add local variables).

If you have a dynamic value in your row that is based off of other values in the row, don’t store that dynamic value in the repeater and try to keep it up to date. You can still visually represent in your row but using the OnItemLoad event use a Set Text action to calculate the dynamic value and set the display. Basically, instead of storing X, Y, Z, X+Y+Z as columns, only store X, Y, Z, and calculate X+Y+Z every time you need to use it on the fly. I think this will be easier than trying to constantly update and maintain a dynamic value in your repeater like you would in excel.

I’ve never tried making something similar to what you describe but this is how I would approach it.

Thanks nkrisk,

Your approach makes sense, and I’m going to try that shortly as I ramp up on adding and updating items in the Repeater.

One question before I do that because I’m very close to having the visualization of the bargraphs, but I’m clearly not initializing the Repeater data fully.

I’ve attached a screen shot of my Axure workspace.

After fiddling with my expressions, I finally have the bar graphs doing what they should in the Repeater preview within the Axure file itself, but when I preview it in Chrome, the bar graphs do not move to these locations.

So, I’m now confident that my expression is correct, but I’m guessing I still need to do something to initiate the table data for the instance of the Repeater?

I don’t actually want to surface the values because I’m just using them behind the scenes to determine the height of the graph … so, so I still need an OnItemLoad function to assign each column Item as a label of a rectangle object, for example, and then hide those objects?

If not, what is the reason that I would see the result of the functions correction in the Axure preview, but then the data would not be applied correctly when Previewing in HTML?

I sense that I’m close but still missing an essential piece :slight_smile:

Thanks for any insight …

Cheers,

Jeremy



No, if you’re not using the labels you don’t need to set any widget to have it as text. You can have all the data you want in their and show none of it if you wanted.

You have commas and other symbols in your data; that will break any math functions and I suspect that’s what is happening. Because it’s all JavaScript under the hood, 1,000+1,000 is not 2,000 but instead is 1,0001,000 because Axure will treat them as strings (and concatenate them) as they’re not valid number literals.

Store all your numbers in the repeaters as only numbers and add commas and other symbols in when you want to display them on a widget.

You want [[1000+1000]] not [[1,000+1,000]].

Alternatively, you could just remove the commas and other symobls everytime you do the math.

[[A.replace(’,’,’’).replace(’$’,’’) + B.replace(’,’,’’).replace(’$’,’’)]]. Even though they’re still strings, if they’re only numeric Axure will first attempt to treat them as numbers instead of strings. Take your pick as to what is least cumbersome.

Thank you Nathan!

The commas in the Repeater data was exactly the source of the problem.

I copied that data directly from my spreadsheet and I would have been spinning my wheels on that for a long time … what you suggested makes total sense now …

This is fantastic.

I think I now have all the framework in place to start working with the more dynamic calculations I want … I’ll let you know how it goes, but I think your approach to add/update rows to the repeater data and have the calculations done on the way in is the way to go …

Cheers,

Jeremy

Hi, Jeremy

Can you upload your RP file as i need similar thing to go for my project.

Regards Sana

I’m with Sana: would be great to see your RP file.
I’m building a complex dashboard with multiple graphs and tables and this would be super helpful.