Circular progress bar in Axure
Data visualization is a more and more important part of UX projects nowadays, and an aspect of UX that I am really fond [...]
Axure allows you to create and use variables in a pretty advanced way. I recently used the Math.random() function a lot, and thought it could be useful (at least for me) to write the good random formulas somewhere, for later reference. It is probably very easy for programmers, but this is not my case, and I don’t want to lose time trying to figure out which is the right way of writing the formulas each time. So here it is!
I have bee working on a lot of projects requiring data visualization lately. The simplest way to illustrate wireframes with data is to copy and paste. But then you have the same data and graphs repeated all over the pages, and at some point you lose the relevancy. Another solution is to manually change each occurrence, at least a bit to give the right feeling and not lose attention on repetition. Even if repeaters are a great tool for this, you still need to input the data manually at some point. As having the exact data is not what matters at this stage, I now use random as often as possible. It creates differences which give the right rythm to the page, without even having to bother about entering the data. This way I have only one master, set to randomly change on page load, and only one place to make updates if needed.
First of all, where is the random accessible in Axure? Every time you use an interaction like Move or Change size, you can by default enter a value. But on the right of the value field is a little “fx” icon. When you click on it, it opens a new window where you can program a custom value. From there, if you click on Insert variable or function, you can either use the variables you have previously created (but this is another topic) or use pre-defined functions, including the x and y positions, scroll, date, etc. In the Maths category is where you will find our Math-random().