Axure Promotion · Axure Template · Axure Tutorial · Axure Widget · Elementary · Learn axure · Line Chart · May 01, 2022

Axure Tutorial: Dynamic Line Chart

by WELLJOE

Introduction

When we make some prototype diagrams at work, especially the background prototype, we will often involve statistical diagram information. In the last issue, I introduced in detail how to draw dynamic bar charts. In this issue, I will give you detailed dynamic line charts.

First let's think about it:

What scenarios will use Line charts?
What are the advantages of drawing line charts compared to Bar charts and fan charts?
How to quickly design a beautiful line chart to apply in our work?

1. Usage scenarios

Line charts can display continuous data over time (according to common scale), making them ideal for showing trends in data at equal time intervals.

In a line chart, category data is evenly distributed along the horizontal axis, and all value data is evenly distributed along the vertical axis. Line charts should be used if the categorical labels are text and represent uniformly distributed values (such as months, quarters, or fiscal years). At the same time, the data points of a single line should be more than 2, but it is recommended not to exceed 5 polylines on the same graph.

2. Analysis of advantages

The line chart uses the fluctuation of the line to represent the increase or decrease of the data. It can not only indicate the quantity, but also reflect the increase or decrease of the data. For example, it can be used for the ups and downs of the stock market and temperature or other data indicating trends.

Indicate the comparative relationship between phenomena; reveal the overall structure; check the implementation of the plan; reveal the interdependence between phenomena, reflecting the distribution of overall units; explain the spatial distribution of phenomena. Generally, a rectangular coordinate system is used. The abscissa is used to represent the group of things or the independent variable x, and the ordinate is often used to represent the number of occurrences of the thing or the dependent variable y; or angular coordinates (such as circular charts), geographic coordinates (such as topographic maps), etc.

3. Design prototype

In this issue, I will use common product sales as an example to draw a prototype.

First of all, let's draw the basic horizontal and vertical coordinates. The horizontal axis uses "year" as the unit, and the vertical coordinate uses "amount" as the unit, and draws the basic horizontal and vertical lines. Note that the distance between the horizontal and vertical is equal. .

Then we select the insert tool, select the pen tool, draw the arc pattern, and set the color of the line.

Convert the drawn pattern to a dynamic panel and set the dynamic panel width to 1 and the height unchanged.

After setting the dynamic panel, make interactive settings for the dynamic panel. The interactive style is set to: load - set size - current target, set the width to the required length, keep the height unchanged, and select linear animation for 600 milliseconds.

Then if you want to make the prototype more beautiful, you can add "quantity points" for different years on the statistical chart, which can make the statistical chart more intuitive and clear.