post is part of our on-going how-to series covering the Syncfusion Dashboard
Platform. In this entry, we will explore working with Dashboard’s filters. You
can watch the full video on our YouTube page.
filters help you visualize different combinations of data in a single dashboard.
Instead of creating a separate dashboard to visualize subsets of data, the
dashboard filters allow you to analyze them within the same view. This post
will explain various filtering options like adding a dashboard filter,
configuring the master and listener settings, performing cross-data source
filtering, and using filter profiles.
can add filters to a dashboard by dragging the filter elements from the toolbox
on the left and dropping them on the design canvas.
can also use the dedicated filter panel available for configuring filter
elements. For more information on filter panels, see our video on YouTube or read its accompanying blog post.
For this example, we’ll build a multi-tab dashboard to display the current
statistics of the English Premier League. We’ll have the league standings in
one of the tabs and the team statistics in the other, so we can filter out
individual teams and analyze their performance.
We have the latest Dashboard Designer and a data source that contains the
Premier League Standing details. This is actually a web data source providing
us live feeds through REST API. There are details in here like the team name,
the logo of the team in the form of URLs, the total number of games played,
number of points secured, total number of games won, lost, and quite a bit
more. First, let’s rename this data source "Standings."
you can see in the above GIF, the dashboard builds successfully. It has the
Premier League logo, the season details, and a tree map showing the goal
statistics. At the bottom are the booking details for the top 10 teams and a
grid that shows the standings. We have the team name, the number of games
played and won, and the number of points secured by the team. Open the grid
configuration with the blue icon at the top-right of the grid card.
the data section are the columns bound to the widget. Click the settings icon
for the "Team name" column and choose Custom sort. Among the advanced sorting options in the pop-up, choose
Field, based on points, and the default aggregation type Sum, in Descending
Advanced Sorting Options
Apply. Now the best in the league is
at the top of the grid.
going to add another dashboard to display the individual team statistics and
name it accordingly. A few widgets have been added to this dashboard: at the
top, a combo box to filter using team names; on the left, an image widget bound
to the field containing the URL for the team logo; and on the bottom, a card
widget to show the total number of goals scored by the team.
Click Preview to see how the
By default, all the filter elements added to the dashboard will act as a master
widget and all the other widgets in the dashboard will act as listener widgets.
You can check this using the "Filter configuration" window available
through an icon in the toolbar, or by clicking Dashboard and then Filters.
Dashboard Filters Configuration
master widget is on the left, and is actually a combo box that we have to use
to filter out the team name. On the right side are the listener widgets. By
default, all the widgets in the dashboard are selected as listener widgets. You
can uncheck one if you have to ignore the filter actions. Click Close.
You can also make the other nonfilter widgets into master widgets. This works
for charts, maps, and grids wherever selection is applicable. So, if you select
the grid we added earlier, you can select the check box at the top Act as Master Widget like in the
Act as Master Widget Check Box
opening the Filters Configuration manager, the grid will have been added as a
master widget and all the other widgets as listener widgets. Click Preview to see how the filtering works.
As you can see, whenever you select a team name, the filtering will be done and
only the filtered values will be shown in the dashboard.
we’re adding another data source called “Results” containing the results of
individual games of the league, so we can gather team statistics like goals
scored at home, away goals, and others. With the help of this data, we’re going
to build individual statistics.
In the team statistics dashboard, add a card widget to show the number of goals
scored by the team at home. Go back to the data source tab. Click the filter
icon for the HomeTeam column and filter out the team name by unchecking (Select All).
Uncheck (Select All)
this, we can summarize the total number of goals scored by the team on home
ground. Go back to the dashboard to configure the card widget. In the data
section, drag the GoalsHomeTeam
column to the Actual Value box. In the properties section, rename the widget
Home Goals and center align the title.
Open the filter configuration window. You can see the new card widget in the
listener widgets category. But probably, the filter actions won't take place
here because the master widget uses a different data source from the listener
widget, Home Goals. You can also see at the bottom the relationship between the
master and the listener widgets is not established here. To do cross-data
source filtering, choose the Custom
relationship. Click + and choose teamName as the source column name, Results for the target data source, and
HomeTeam for the target column.
Now, the relationship between the master and the listener widgets is
established. Commit this by clicking the check mark icon, and then click Update. Check the preview to see the
filter action now works as expected.
you wanted to create the same filters, but for goals made in away games, you
would follow all the steps you just took until reaching the Filters
Configuration window. You will still see the custom relationship for the Home
Goals displayed. You cannot add another relationship to this because filtering
both the columns will result in an operation and both columns will be filtered.
This is where the filter profiles can be used. By default, a filter profile
will be present: rename it “Home” and uncheck Away Goals in the listener widget list.
Click + to add another filter
profile, and name it “Away.” For this one, check only Away Goals in the
listener widget list.
Then create a custom relationship for it like the last one and save it. In the
preview, you can see both these cards works as intended.
adding and configuring more related widgets to the dashboard using these filter
profiles, the filters work as shown in the following GIF.
You can also add internal links to your dashboard for easier navigation. For
more information on how to do this, please watch our Working with Multi-tabbed Dashboards video or read its
accompanying blog post. You can find all the
details about the filters applied to your dashboard by clicking the Filters Overview drop-down.
We hope this post was helpful. Again, the
link to the full video is here. If you aren’t a user of
Syncfusion’s Dashboard Platform yet, give it a try with a
free, 30-day trial.