Axure Tutorial: Make Histogram with Repeater
Introduction
Histogram is a common chart, which is often used to compare different kinds of data. In Axure, there are many making methods. You can call external JavaScript scripts or draw through dynamic panels. Today, let's learn how to make histogram through repeater. Its advantages include:
· Simply fill in the repeater table to generate a histogram without connecting to the external network.
· The data hints can be shown when the mouse hover.
Features to be Realized
1. When the data is filled, the chart is automatically generated.
2. When the mouse enter the bar, the current category and quantity hints are shown.
How to Realize these Features
1. The chart is made through the repeater. Fill in the corresponding data in the repeater table, and then calculate the height of the histogram through the formula.
2. Make hints through the dynamic panel. When the mouse enter the histogram, the corresponding data will be shown. And the hint panel moves with the mouse.
Preview the completed prototype for this tutorial
Widgets Setup
The widgets of the repeater include a rectangle and a label. Fill in the quantity Column and the Month column of the repeater table.
Then drag in a text field named Max, a dynamic panel with a label named Name and a label named Quantity, which are used to make hints.
Make a scale chart to include the maximum data value.
Interactions Setup
When repeater item loaded, if the text in Max is less than Item.Quantity, set the Max text to Item.Quantity. In this way, the largest quantity in the histogram can be saved to calculate the length of other histograms.
Then calculate the height of all bars. When repeater item loaded, set the height of the bar to Item.Quantity divided by the data saved in the Max text text field * the height of the Bar widget in Repeater.
Note that at first, you need to wait for a little time to calculate the maximum value to Save to Max text field.
When the mouse enter, the notice panel (Hints) is shown and the Name Label is set to Item.Month, set the Quantity Label to Item.Quantity.
Finally, set the page Interactions. When the mouse moves on the page, if it is over the range of the repeater, Notice will be shown and follow the mouse; If it does not enter the repeater range, the notice is hidden.
In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.
If you like the article, please share it with others with page link, thanks for your supporting! ❤
Note: Click here to download the completed RP file for this tutorial (RP 10 or up).
Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.
Leave a comment