Filter data of custom time period

1.Overview

1.1 Application scenarios

This article introduces the input time of the Year Month filter component, and displays the data of the previous X months. For example, select July to filter out all data from January to June. As shown below:

Users often need to view data for a certain period of time. The remaining various scenarios are shown in the following table:

1.2 Implementation ideas

To achieve the effect of selecting a certain month and filtering out the data for the first half of the month. Proceed as follows:

1) First, add the "Year Month Filter Component" that is not bound to the field in the "Dashboard Edit Interface" to filter the year, month and day.

2) Next, add the components that need to be filtered in the "Dashboard Editing Interface", and select "Column Chart".

3) Then, add detailed filter conditions for the data in the "Column Chart Component" to realize that the "Year Month Filter Component" selects a certain month, and the "Column Chart" can display the data of the first half year.

4) Finally, set the default filter value in the "Dashboard Editing Interface" to facilitate users to view data on the dashboard preview interface.

2. Method 1: Filter component that does not bind fields

Data used in the example: "Equipment production schedule" in the demo data.

2.1 Create a new dashboard

Create a new dashboard and display data on the dashboard interface. Open "Dashboard> New Dashboard", enter the dashboard information, and click "OK". As shown below:

2.2 Add date filter component

After creating a new dashboard, enter the dashboard editing interface. Add the Year Month filter component without binding fields to achieve the filtering of the data Year Month.

1) Click "Filter components" and select "Year-Month" to add filter components, as shown in the figure below:

2) Do not perform any operation on the Year-Month filter component and do not bind fields, click "OK" to complete the Year-Month filter component production. As shown below:

2.3 Add column chart component

1) After adding the "Year-Month Filter Component", select "component" on the dashboard editing interface, as shown in the figure below:

2) After adding the component, use the "Equipment production schedule" in the demo data to make the component. As shown below:

3) Enter the component editing interface, drag the dimension field "time" and the indicator field "Output" of the area to be analyzed into the horizontal and vertical axis corresponding to the analysis area, and click "Column Chart" for the chart type, as shown in the following figure:

4) To realize that the data is displayed in the form of Year Month, click on the "time" on the horizontal axis, and drop down to select "Year Month", as shown in the figure below:

2.4 Add detail filtering conditions

After completing the production of the column chart showing the output data by Year Month, perform "Detail Filtering" on the "Output" to realize the connection between the "Year Month filter component" and the "column chart": select a certain "Year Month filter component" Month, "Column Chart" can display all the data of the previous 6 months.

1) Add detailed filter conditions to "Output". As shown below:

2) Set the start date. Add a filter condition of "time" to "Output". First realize the Year Month filter component to select a certain month, and display all the data after the first 6 months. As shown below:

The setting details are shown in the following table:

3) Set a closing date. The "time" filter condition of "Add condition (And)". The steps are the same as above. Achieve display to the Year Month filtering component, select a certain month, display the data from the beginning of the previous 6 months to the end of the previous month. Click "OK" when finished. As shown below:

The relationship between the two conditions added is shown in the following table:

Note: If you only have the data from January to December 2018 and select March, only the data from January to March will be displayed, because the previous data is empty and all are not displayed.

4) Set the Graphic Properties . Select "Pink" for the color of the column chart, adjust the size of the column chart, and drag the "Output" into the tag. After setting, click "Enter the dashboard" to enter the dashboard editing interface, as shown in the figure below:

2.5 Set default data

Filter the data in advance on the dashboard editing interface, and every time you view the dashboard, the data under the default filter conditions will be displayed, reducing the user's operation steps.

1) After entering the dashboard editing interface, drag the component and drag the mouse to modify the size and position of the component, as shown in the following figure:

2) Select the default time "June 2018" that needs to be set for the Year Month filter component, and click "Preview Dashboard" to complete the production. As shown below:

3. Method 2: Filter the component selection field but cancel the control of the component

Data used in the example: "Equipment production schedule" in the demo data.

3.1 Create a new dashboard

Create a new dashboard and display data on the dashboard interface. Open "Dashboard> New Dashboard", enter the dashboard information, and click "OK". As shown below:

3.2 Add date filter component

After creating a new dashboard, enter the dashboard editing interface. Add the Year Month filter component without binding fields to achieve the filtering of the data Year Month.

1) Click "Filter components" and select "Year-Month" to add filter components, as shown in the figure below:

2) Drag the time field into the filter component and click "OK" to complete the Year-Month filter component production. As shown below:

3.3 Add column chart component

1) After adding the "Year-Month Filter Component", select "component" on the dashboard editing interface, as shown in the figure below:

2) After adding the component, use the "Equipment production schedule" in the demo data to make the component. As shown below:

3) Enter the component editing interface, drag the dimension field "time" and the indicator field "Output" of the area to be analyzed into the horizontal and vertical axis corresponding to the analysis area, and click "Column Chart" for the chart type, as shown in the following figure:

4) To realize that the data is displayed in the form of Year Month, click on the "time" on the horizontal axis, and drop down to select "Year Month", as shown in the figure below:

3.4 Add detailed filter conditions

After completing the production of the column chart showing the output data by Year Month, perform "Detail Filtering" on the "Output" to realize the connection between the "Year Month filter component" and the "column chart": select a certain "Year Month filter component" Month, "Column Chart" can display all the data of the previous 6 months.

1) Add detailed filter conditions to "Output". As shown below:

2) Set the start date. Add a filter condition of "time" to "Output". First realize the Year Month filter component to select a certain month, and display all the data after the first 6 months. As shown below:

The setting details are shown in the following table:

3) Set a closing date. The "time" filter condition of "Add condition (And)". The steps are the same as above. Achieve display to the Year Month filtering component, select a certain month, display the data from the beginning of the previous 6 months to the end of the previous month. Click "OK" when finished. As shown below:

The relationship between the two conditions added is shown in the following table:

Note: If you only have the data from January to December 2018 and select March, only the data from January to March will be displayed, because the previous data is empty and all are not displayed.

4) Set the Graphic Properties . Select "Pink" for the color of the column chart, adjust the size of the column chart, and drag the "Output" into the tag. After setting, click "Enter the dashboard" to enter the dashboard editing interface, as shown in the figure below:

3.5 Cancel the control of the filter component to the column chart

Set the filter component to "Custom Control Range" and uncheck the column chart component, as shown in the following figure:

3.6 Set default data

Filter the data in advance on the dashboard editing interface, and every time you view the dashboard, the data under the default filter conditions will be displayed, reducing the user's operation steps.

1) After entering the dashboard editing interface, drag the component and drag the mouse to modify the size and position of the component, as shown in the following figure:

2) Select the default time "June 2018" that needs to be set for the Year Month filter component, and click "Preview Dashboard" to complete the production. As shown below:

4. View the effect

4.1 PC side

The completed dashboard can be found in: Filter out the data for the specified time period.

Note: The sample data is only the data from January to December 2018, so you can only view the effect of the data in this year.

4.2 Mobile

The effect of mobile APP and H5 is shown in the figure below: