Axure Tutorial: Making Scatter Chart with Repeater


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.

When repeater item loaded, if the value of the Max text field is less than or equal to Item.BarX. Set its text to IItem.BarX. This saves the maximum quantity to Max, which is used to calculate the length of bars.

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.

#axure widgets #ux design #Axure templates #Axure tutorial #Axure

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.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store