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?
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.
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.
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 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)
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.
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.
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.
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.
