Advanced · Axure Promotion · Axure RP · Axure Tutorial · Charts · Data Visualization · Learn axure · Repeater · Jan 18, 2022

Axure Tutorial: Generating Visual Charts Through JavaScript and Repeaters

by WELLJOE

Introduction

ECharts is an open source visual chart Library Based on JavaScript, which contains many common and beautiful statistical charts. So how do we use these charts in Axure?

We can make a prototype template of visual chart by using Axure repeater and chart code of ECharts. When using this template, users only need to fill in data in the repeater table, they can automatically generate ECharts chart and realize high fidelity interaction effect. Next, I will use the case of pie chart as a tutorial.

Features to be Realized

1. Call ECharts chart through JavaScript.
2. Fill the data in the repeater, and the data in the final pie chart is realized according to the filled data.

Generate Visual Chart with JavaScript and Repeater

Preview the completed prototype for this tutorial

Thinking

The principle of making is to call the chart of ECharts through JavaScript, and then modify and replace the corresponding attributes through the repeater. Next time, you only need to modify the data in the repeater table.

First, let's look at the code of the ECharts pie chart.

Expample chart

The left side of the image above is the code, and the right side is the rendered image. The red box on the left is the data content, that is, the text we need to replace with a repeater.

Other attributes, such as Tooltip and legend, can be changed or not changed.

Widgets Setup

widgets setup

1. Drag a repeater, a label, and a rectangle into the canvas. The rectangle named bar1 is used to store the generated chart, and its size is the size of the chart. Its text content can be changed as needed. The label is named data Used to record data to be replaced. Repeaters are used to modify attribute data.

Repeater

Repeater data table

The repeater is only used for storing data and interaction, not for display, so we can delete the built-in rectangle in the repeater or hide the repeater.

Rectangle

We named the rectangle bar1. the rectangle is used to display the chart. You can adjust the size of the rectangle to control the size of the chart. We can add text to the rectangle to distinguish the chart.

Label

It is hidden by default and null by default. It is only used to record repeater data.

Interactions setup

1. When each item of repeater is loaded

Because the data of the repeater is loaded row by row, we need to record all the data in the data label by setting the text interaction. We want to use the text in the red box in the code: {value: 1048, name: 'search engine'}

Item loaded action

Item.Value : for specific data, we replace 1048,

Item.Name : category name, we replace the "search engine",

target. Text: keep previous data

In this way, we store the data in the data label.

2. Rectangle loaded

Here, we use JavaScript to turn the rectangle into the carrier of ECharts. Specifically, we have the following interactions :

Rectangle action

Wait: we need to wait for each item of the repeater to be loaded before executing the interaction. Here, wait for 10ms.

Open link: link to the URL or file path in the current window, and enter the code. There are 3 sections of code in total. The 1 and 3 code is the code calling EChart.

First section of code:

javascript: var script = document.createElement("script"); script.type = "text/javascript"; script.src ="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"; document.head.appendChild(script); setTimeout(function(){ var dom =$("[data-label=bar1]").get(0); var myChart = echarts.init(dom);

script.src is the address of JavaScript, which should be introduced here. If you can connect to the Internet, you can directly find the online JavaScript address on the official website of ECarts and replace it. In this way, you can directly see the chart during preview, which is also very convenient to use. If you can't connect to the Internet, you should download JavaScript code from the official website of ECharts and put the file "Ecarts.min.js" in the default settings \ prototype of Axure_ In the files \ resources \ scripts directory, you can also directly count charts when generating HTML. It should be noted here that because Axure cannot read local files during preview, it is impossible to see in the preview. Therefore, if you can link to the Internet, it is more convenient to use the JS address of the Internet.

Second section of code:

option = {
tooltip: {
trigger: 'item'
},
legend: {
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
[[LVAR1]]
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};

The above code here is actually copied from ECharts. You can look back. The data in the red box is replaced by the variable [[LVAR1]]. LVAR1 is the value of the text label saved through the repeater. Therefore, we can directly modify the repeater table to automatically generate charts.

Third section of code:

if (option && typeof option === "object"){ myChart.setOption(option, true); }}, 800);

The first code and the third code remain unchanged. In fact, we only need to modify the code of the repeater.

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

Note

This set of code can be used for basic charts of ECarts such as histogram, bar chart, ring chart, rose chart, radar chart, K-line chart and funnel chart. The ideas are the same. Replace the values in the second section with repeaters. Even Newbie who doesn't understand the code can use the template directly.

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.