Extension—Data Chart

The Data Chart extension can be used to visualize your data. When you use it, you can import data sets, input data in batches, or collect and generate data in real time through blocks, and it can display data in tables, line charts, bar charts, dual-axis charts, and pie charts.

Note:

  • A maximum of 500 pieces of data can be displayed in total.
  • A maximum of 15 data groups can be displayed, and a maximum of 300 pieces of data can be included in one data group.

Let's have a try.

Add the Data Chart extension

1. Click the Sprites tab and click + extension at the bottom of the Blocks area.

1596678324368-09d85f7e-60ff-4c06-b35c-189b1765b5bc.png

2. On the Extension center page that appears, click + Add at the bottom of Data Chart.

1596697900950-b9284b2b-65ee-48d1-9e29-efcbe83afa7d.png

After being added, the extension and its blocks are displayed in the Blocks area.

B9`}A%SZ%F29_U}MZ91]}J6.png

Use the Data Chart blocks

Let's make a line chart to show the temperature of Shenzhen in a week.

Set the table

1. Drag the Data Chart blocks open data chart window and set chart title ( ) to the Scripts area, and name the chart Temperature of the Week.

_7T42~F1B9T69MPDCCEJ9CA.png

2. Drag the Data Chart block set chart type to ( ) to the Scripts area and choose line chart from the drop-down list box.

7[~)EWCB_E34@EE86T}PD)J.png

3. Drag the Data Chart block set axis name: x () y ( ) to the Scripts area and set the x-axis name to Day and y-axis name to Temperature/℃.

ZC458K[[QDE)7B)R6QAMV4J.png

Input data

4. Enter the data. Let's enter the following data to generate a line chart.

1596697703166-d744810b-f103-425e-88f8-4b7c26acd067.png

Note: The data shown in the table above is just for demonstration.

5. Drag the Data Chart block input data to ( ): x ( ) y ( ) to the Scripts area. The temperature data of each day includes the highest and lowest temperature. Enter the data for Monday as follows.

1.gif

6. Right-click the block and choose Duplicate to quickly add 12 input data to ( ): x ( ) y ( ) blocks. Enter the temperature data of Tuesday to Sunday.

2.gif

image.png

Add an event

7. Drag the Events block when green flag clicked to the Scripts area and drop it on the top of the other blocks.

3.gif

You can choose to display the data in bar or pie charts. You can also choose to view the data in a table.

Dual-axis chart

The dual-axis chart is a special chart type that can be used to display multiple data groups. The data of these data groups may be recorded in different units but can share the same x-axis.

Example:

Based on the highest and lowest temperature of the week, we can analyze the relationship between temperature and humidity.

The unit of humidity is percentage (%), and that of temperature is degree centigrade (℃). Therefore, these data can't be displayed in a one-axis coordinate system.

You can use a dual-axis chart to display these data.

V8I]TL~E`WY}M~$YV5VMT)X.png

As shown in the figure above, the humidity data is displayed in a bar chart, corresponding to the y-axis on the right. The temperature data is displayed in a line chart, corresponding to the y-axis on the left. The humidity and temperature data share the same x-axis.

You can configure a dual-axis chart in mBlock 5 as follows (based on the above temperature example):

1. Set the title of the y-axis on the right.

S4ABZKF{SQQPPO2`J7BAJ95.png

2. Specify which data groups are to be displayed on the y-axis on the left and which on the y-axis on the right.

@BQ_FB21)@VI1N$9WKFNUEM.png

Note:

The name y-axis on the right: ( ) and set data group ( ) to y-axis on the ( ) blocks can only be used for dual-axis charts.

When configuring a dual-axis chart, you don't need to set all data in the chart. For example, if you have four data groups, A, B, C, and D, you can set B to the y-axis on the left, and D on the y-axis on the right. In this way, data groups A and C are not displayed.

The following dual-axis chart displays the temperature and humidity of the week.

H2BHBRD}1I1%IPH(XFQ3X$I.png

Scale data

It may be difficult to compare and analyze some data when the difference between the data is not obvious. When this happens, you can scale the chart to make the difference more obvious in one of the following ways:

Way 1: Click the zoom-in/zoom-out button in the upper right corner to zoom in the window.

]_%N}$WB(RM3YADAIB_7V`5.png

Way 2: Use the mouse wheel on your PC, gestures on your touch panel, or your finger in the app to drag the chart to scale or move some data. In a dual-axis chart, you can also control the scaling by dragging the bar on the left/right.

4.gif

Import data sets

In addition to using blocks to collect and generate data in real time, you can also import data sets in batches.

On the Data Table tab, click Import, select a .csv file from your local disk, and click Open.

Note:

  • The size of the .csv file to be imported can't be greater than 1 M.
  • You can't import a file when you use the Data Chart extension on a mobile device.
  • The total number of pieces of data in the .csv file can't be greater than 500, the number of data groups can't be greater than 15, and the number of pieces of data in one data group can't be greater than 300.

N55IYDY%}1~LRYR0}(AL{%8.png

Delete data

After you close the data chart window, the data you have entered into the chart is not automatically deleted. To delete the data, you need to use the clear data block. As shown in the following figure, you can delete the data before you enter some other data.

1596697703500-2c84231e-7014-4c09-b1dc-f5acd3a69efe.png

Was this article helpful?
4 out of 4 found this helpful

Comments

0 comments

Please sign in to leave a comment.