šŸŽ‰ NocoBase Pricing adjustment - Apr 1, 2025

Chapter 9: Task Dashboard: Charts

This chapter delves into creating and configuring task statistical charts in NocoBase, including task status statistics, task counts by assignee, and setting up data filtering and dynamic displays, to achieve visual management of task data and enhance team collaboration efficiency.

Dear friends, Weā€™ve finally reached the long-awaited chapter on visualization! In this chapter, weā€™ll explore how to quickly zero in on the information we truly need amidst the clutter. As managers, we mustnā€™t lose our way in the complexity of tasks! Letā€™s tackle task statistics and information display together with ease.

9.1 Focus on Key Information

Our goal is to gain a quick overview of team tasks, highlighting those we are responsible for or interested in, without being overwhelmed by unnecessary data.

Letā€™s start by creating a team task statistics chart.

9.1.1 Create a Chart Block

With a new page:

  1. Create a New Chart Data Block. (Within this main block, you can build multiple charts.)
  2. Select the Target Table: Task Table. Then proceed to chart configuration.

Steps Example Configuration Example

9.1.2 Configure Task Status Statistics

If we want to count the number of tasks in different states, what should we do? First, we have to process the data:

  • Measures: Choose a unique field, such as the ID field to count.
  • Dimensions: Group data by status.

Next, Chart Configuration:

  1. Select a bar or column chart.
  2. Set the X field to ā€œStatusā€ and the Y field to ā€œID.ā€ (Tip: Remember to choose the ā€œStatusā€ in dimension fields for better visual distinction.)

9.1.3 Multi-Dimensional Statistics: Tasks Per Person

Want to view task counts per person and their statuses? Use dual dimensions by adding the ā€œAssignee/Nicknameā€ dimension.

  1. Click ā€œRun Queryā€ in the top-left corner.

  1. If the result isnā€™t what you expected, select ā€œisGroupā€ to display a comparative breakdown of tasks by assignees.

  1. Meanwhile, if you want to display the overall number of stacked, you can choose ā€œisStackā€. In this way, we can see the percentage of tasks for each person + the overall task status!

9.2 Data Filtering and Dynamic Display

9.2.1 Configure Data Filters

Of course, we can further remove the ā€œCanceledā€ and ā€œArchivedā€ data, just remove these two options in the left filter conditions, I believe you are very familiar with these conditions!

Once filtered, click confirm, exit configuration, and your first chart is ready!

9.2.2 Duplicate Charts

Need both ā€œisGroupā€ and ā€œisStackā€ charts without starting from scratch? Duplicate your chart:

  • Click the copy icon on the top-right of your first chart block.
  • Slide the wheel down, the second chart has appeared, drag and drop it to the right, remove the ā€œisStackā€ configuration, change to ā€œisGroupā€.

9.2.3 Dynamic Filtering

For interactive filtering of task data:

Of Course! We open ā€œFilterā€ below the chart data block, and the filter box has appeared above. We show the desired fields and set the filtering conditions for the fields. (For example, change the date field to ā€œbetweenā€)

Filter Example

9.2.4 Creating Custom Filter Fields

What if we also want to include ā€œCanceledā€ and ā€œArchivedā€ data in special cases, and support dynamic filtering and set filtering defaults?

Letā€™s create a customized filter field!

You can easily configure filters by selecting fields from associated data tables or creating custom fields.(Only available within chart block)

Options include editing field titles, descriptions, operators, and setting default values (e.g., the current user or date), making filters more tailored to your needs.

  1. fill in the title of the ā€œStatusā€.
  2. Leave the Source field blank.
  3. Select ā€œCheckboxā€ for the component.
  4. Options are filled in according to the value of the Status attribute when the database is created (note that the order of attributes here is Option Label - Option Value).

Create successfully, click ā€œSet Default Valueā€, select the option we need.

202411162000481731758448.png

After setting the default value, go back to the chart configuration, change the filter condition to ā€œStatus - is any of - Current filters / statusā€, and then confirm! (Both charts should be changed.)

Done, letā€™s filter test, the data has been perfectly rendered.

202411162003151731758595.png

A powerful feature: clicking on a statistic to jump to filtered tasks. Letā€™s make it happen.

9.3.1 Using the ā€œNot startedā€ Example, Create a Statistical Chart

  1. Set the Measures to ID - Count.
  2. Add a filter: Status = ā€œNot Startedā€
  3. Set container name to ā€œNot Startedā€, Chart Type to ā€œStatisticā€, and leave chart name blank.

The unstarted stats have been successfully displayed. Letā€™s make five copies by state and drag them to the top.

  1. Go back to the page containing the task management table block and observe the link format in the browserā€™s address bar (usually something like http://xxxxxxxxx/admin/0z9e0um1vcn).

    Assume xxxxxxxxx represents your website domain, and /admin/0z9e0um1vcn is the path. (We only need to find the last /admin.)

  2. Copy part of the link:

    • We need to perform a link jump. To do this, we first extract a specific portion of the link.
    • Copy from the text after admin/ (excluding admin/) to the end of the link. For example, in this case, the portion to copy is: 0z9e0um1vcn.

Move the cursor over ā€œNot Started,ā€ and youā€™ll notice the cursor changes to a hand icon. Click on it to jump successfully.

  1. Configure the chart link
    , letā€™s add a filter parameter to the link. Do you remember the database identifier for task status? Weā€™ll need to append this parameter to the end of the link to further filter tasks.
    • Add ?task_status=Not started to the end of the link. Your link will then look like: 0z9e0um1vcn?task_status=Not started.

Understanding URL Parameters: When adding parameters to a URL, there are formatting rules to follow:

  • Question mark (?): Indicates the start of the parameters.
  • Parameter name and value: Format as parameter_name=parameter_value.
  • Multiple parameters: Use the & symbol to connect them. For example: http://xxxxxxxxx/admin/hliu6s5tp9x?status=todo&user=123. In this example, user is another parameter name, and 123 is its corresponding value.
  1. Go back to the page, click to jump, and youā€™ll find the desired parameters are now included in the URL. ļ¼ˆLike http://xxxxxxxxx/admin/0z9e0um1vcn normallyļ¼‰

9.3.3 Associating URL Filter Conditions

Why hasnā€™t the table changed yet? Donā€™t worry, letā€™s finish the last step together!

  • Go back to the form block configuration and click on ā€œSet data rangeā€.
  • Select ā€œStatusā€ equal to ā€œURL search params / statusā€.

Click on ā€œConfirmā€ and the filtering is successful!

f8c9b2d7f64cf1da4daaa80497235f92.png

9.4 Data Visualization: Stunning Charts

Data Visualization: ECharts (Commercial Plugin) ECharts offers more advanced and customizable configuration options, such as ā€œLine Chart (Multi-Dimension),ā€ ā€œRadar Chart,ā€ ā€œWord Cloud,ā€ and more.

If you want to access more chart configuration options, you can enable ā€œData Visualization: EChartsā€!

9.4.1 Quickly Configure a Stunning Radar Chart

If you notice data overlap, remember to adjust the size or radius to ensure that all information is clearly displayed!

202411162121201731763280.png

After configuration, simply drag and adjust the display style to complete!

9.4.2 More chart containers

Here are more charts for you to explore.

Word Cloud

Funnel

Multiple Indicators (Dual Axes, Echarts Line)

For bi-axial charts you can add more indicators

Diverging bar

9.5 Mini Challenge

  1. Configure URL parameters for the remaining statuses: ā€œIn Progress,ā€ ā€œPending Review,ā€ ā€œCompleted,ā€ ā€œCanceled,ā€ and ā€œArchived.ā€
  2. Set up a ā€œAssigneeā€ multi-select field, just like the ā€œStatusā€ field, with a default value of the current userā€™s nickname.

Looking forward to seeing you in the next chapter!


Keep exploring and creating endless possibilities! If you encounter any issues along the way, donā€™t forget to check the NocoBase Documentation or join the NocoBase Community for discussions and support.

× View Image