Create a Line Graph chart reading data from a Repeater?

I have created a table using a repeater. I have over 100 + rows in my table to simulate our application. The table headers are using the sort interaction, and there is also a filter by text input on the row below the column header.

My requirement are to create a line chart using the data that is in the repeater table. I need to generate basically about 4 lines on the chart that show time as the (x) and another variable as the (y).

Has anyone had any success in building such a dynamic chart before using Axure 7?

Please any help is very much appreciated.

Hi Charity,

If you need to create an accurate line chart to represent your data then you’ll probably want to use Excel (or something similar). You can copy and paste the repeater data from the repeater data table into Excel, and from there you can create your chart. You can’t directly copy and paste the Excel chart into Axure RP though, so you would want to export the chart as an image first and then import that back into Axure RP.

If you need your chart to be interactive, you could try building it in Axure RP from widgets or overlaying the Excel chart with hotspots. Hopefully that helps!

So this isn’t a line chart, but it’s an interactive bar graph being generated form repeater data. If this would help, let me know and I can send the rp file. You’ll need to duplicate the repeater because in my example the repeater is the actual bar graph.

Home

The problem with a line chart in axure is that we can’t dynamically rotate elements. If we had that capability, using a little bit of trig would get you an interactive line graph using dynamic panels rotated based on the difference in y coordinates from point to point (y) as well as the scale used in pixels (x). Even then, it would be really complicated to do.

You can try to use one of those cookie cutter html5 line chart libraries (just google it), then host that on a server, then insert that into axure using an iframe. A lot of these libraries come with interactivity, sorting options, zoom features, etc. You usually just have to set up some options when instantiating the library in javascript. I’d say that’s you best bet.

1 Like

matei1987

That is AWESOME and exactly what I am looking for. I know that the product manger is looking for a line chart but perhaps I could sell him on a bar graph instead. If you wouldn’t mind sharing the RP file or a tutorial on how you achieved this I would be ever so thankful!

Here is what I have so far
Example.rp (316 KB)

Here you go. It’s going to be really daunting trying to understand what’s going on in there. There is a lot of math and variables being thrown around. If someone handed me this I’d have a hell of a time understanding it. I made you a really basic started graph that you can build out to suit your needs.

My complex one

Each repeater item made up of :

• the label on the bottom -> text comes from repeater column
• a dynamic panel NOT set to ‘fit to content’ (make sure it’s unchecked) + a rectangle the same size as the dp set inside of it moved down so it can’t be seen in the dp. Think that the rectangle top starts at the bottom of the dp.

The height secret sauce:

to get each height right you’ll need to move (-1Y) the rectangle in the dp in the repeater item on its load event by valueYouAreGraphing / maxYValueForTheGraph * graphHeight. This moves that hidden rectangle up and by the proportionate amount to the value you are graphing.
• in the complex graph you’ll see a max column, but I used that for different reasons, mostly eye candy and the y axis animation. in the simple one I’ve replaced that with a global variable.

The simple one

It should be easy to follow, but here are some tips:

•*Make sure that in the repeater properties pane you uncheck isolate selection groups for the click on each bar to work right.
•*The max value of the data is in a global variable called max.
•*I used Item.repeater.height in the calculation instead of hardcoding to 400px because that way you can change the size of the bars and it’ll still work. If you do, remember that the bar_inner and bar_outter NEED TO BE THE SAME SIZE.

Hope this helped! Pass it forward next time you know an answer to a question!
barGraph.rp (112 KB)

simpleBarGraph.rp (54.5 KB)

3 Likes

matei1987

I see how you are creating the chart and its really cool. I have learned several new things from this RP file, thank you! Perhaps you can help me a little bit further though. What I am attempting to accomplish, if you look in the Example.RP file I attached is for the when the user selects the ‘Chart’ button the data that was displayed in the repeater on the ‘Table’ view, that data will be pulled and utilized to create that chart data.

I would love to apply the bar graph that you sent me, but it appears that you are creating a new repeater for the chart data rather than pulling data from another repeater.

Do you have any thoughts on this?

You can’t reuse repeaters unfortunately. Duplicate it with just the data you need and do it that way. It’ll be a little slow, but it will work. If that data is going to be dynamic, like adding to one repeater and the having the graph show it, you’ll need to update the graph repeater based on some common id.

Lets say you delete an item in the list view, then in the same event, you’ll need to delete rows from the graph repeater where id in repeater 1 == to id in repeater 2.

Let me tinker with it, I will come back to you and see what I can do. Thanks in advance.

Hi there, I use koolchart for creating charts and graphs. It is a complete charting library which offers many different types of charts like line, pie, bubble, bar, plot and many more.

Don’t make product decisions based on what’s possible to do in Axure… :slight_smile:

Wow, yes. I cannot reiterate enough this advice. Remember that Axure is only one tool in a whole suite of what’s available to UX professionals. If what you are looking for cannot be achieved with one, use another; or perhaps find a way of faking the interaction and look of what you want without including all the dynamic functionality.

Hello, I found this post using Google Fusion for data and charting, and then Axure can use the chart in an inline frame.

@Jeff posted a solution, you find it in the following thread.
[Doomed] Dynamic, repeater-fed charts with no frames or code injection

Thanks,
Vikram

the bar chart doesnt work when i move it into a axure project where it is has dynamic panel inside it

Hi Jake,
I creates bar-chart, that I can share.

fake bar-chart.rp (343.2 KB)

Natalie

2 Likes

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.