Axure Tutorial: Making Scatter Chart with Repeater
Introduction
In Axure Tutorial: Make Stacked Histogram with Repeater, We learned how to make stacked bars.
The making method of scatter chart is similar to that of stacked histogram, which is mainly used for the display of discrete data. Today, let's learn how to make scatter chart through repeater. Its advantages include:
· Simply fill in the repeater table to generate a scatter chart without connecting to the external network.
· The data hints can be shown when the mouse hover.
Features to be Realized
1. The scatter chart is used to represent different type of data in different months.
2. When the mouse enters, the specific type of data is shown.
How to Realize these Features
1. The height of different types of data is represented by the histogram, and then the scatter chart is moved to the center of the top of the histogram
2. When the mouse enters the notice panel, the hints will be shown.
Preview the completed prototype for this tutorial
Widgets Setup
Make bars and dots and fill them with colors.
Create it as a repeater. Then set the opacity of all bars to 0%.
Fill in the repeater table with data to represent the quantity of different sub-categories in each month. If there is no data, leave it blank.
Then drag in a text field named Max to calculate the maximum Bar. Make a notice dynamic panel to save hint information.
Create the dot on the panel as a dynamic panel, and set the name of the panel state to be equal to the name of the previous dots.
Make a scale chart to include the maximum quantity.
Interactions Setup
Make Scatters
First group all bars and scatters, and then hide it. This is to make the dynamic effect when it is loaded.
Then wait for 10ms and wait for the maximum value to be saved in Max. Then set the length of 5 bars as Item.BarX divided by the maximum value saved in Max * the length of Bars group.
Move dots to the middle of the top of the bar.
Finally, show Bars and add an animation of sliding up。
Show/Hide Notice
When the mouse enters dots, set the label text on the Notice panel, show the Notice panel, set the Notice to follow the mouse, and set the state of the dot panel to the name of the current dot.
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.
also, is it possible to do this in Axure 9? could you create it in 9 for us? I cannot upgrade to 10 (it requires a subscription doesn’t it?)
what is a notice? and what is part of the repeater, the entire set of bars, dots, and “name” … it feels like a lot of this is very vague… am I missing something?
Leave a comment