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

Scatter Chart1. 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

Make bars and dots and fill them with colors.

Create widgets as repeater


Create it as a repeater. 
Then set the opacity of all bars to 0%.

 Fill Repeater Table

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.

Max Text Field and Notice Panel

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 Scale chart

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.

Set Maximum quantity to text field

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.

Make Bar length

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 top of bars

Move dots to the middle of the top of the bar.

Show Bars Group

Finally, show Bars and add an animation of sliding up。 

Show/Hide Notice 

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. 


2 comments


  • Nick

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


  • Nick

    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

Please note, comments must be approved before they are published

This site is protected by hCaptcha and the hCaptcha Privacy Policy and Terms of Service apply.