IN THIS ARTICLE

    IN THIS ARTICLE

      Filters

      This comprehensive guide will cover everything about Filters in Mokkup.

      When to Use?

      A filter customize the displayed data, allowing for focused insights. This can be useful for comparing different data sets, or cleaning up the data.

      A Filter is beneficial when:

      • Focus on specific data: Filters help narrow dashboard data to highlight relevant trends and patterns. Filters can limit data to a given time period, product, or client category.
      • Compare data sets on a dashboard: This helps identify parallels and differences between data sets and patterns that would not be obvious without comparison. A filter could compare sales data from different areas or channels.
      • Data cleanup: Dashboard filters can delete unneeded data. This might make the dashboard easier to read or remove irrelevant data from the analysis. A filter could eliminate data for discontinued products or customers who haven't bought anything in a year.

      How to Create?

      There are two ways to use the Filter in Mokkup.

      Creating a New Project:

      • Click on ‘Create new’ from the home page
      • Setup the project by filling in the name and choosing the frame size
      • Drag & Drop the filter on to the canvas or click on it to add from the left menu
      • Resize it on the canvas and place in the desired location
      • Edit it from the customize element menu which opens when element is selected

      Using a Mokkup Template:

      • Choose a template from the template library and click ‘Use Template’
      • Select the filter that needs modification
      • You can also resize it on the canvas and place in the desired location
      • Edit it from the customize element menu which opens on element selection

      How to Customize?

      Mokkup allows various customization options for all elements. These customization options are present in the menu on the left side. 

      This is the default tab that opens when an element is selected. All element customizations can be done in this tab. Each sub-section will be explained below.

      1. Details:

      Edit the basic element details here:

      Title:

      • Change the title of the chart here. Toggle off if not needed.

      Title Position:

      • Adjust the position either to the top or left. 
      • This is only applicable to the following variants - Basic Dropdown, Legend Dropdown, Dropdown with Search, and Title In-Line.

      Alignment: 

      • Adjust the title alignment to either left, center, or right of the element.

      2. Properties:

      Contains all the settings that play a role in the aesthetics of the element. Filters have multiple variations with different customizable properties:

      Basic Dropdown, Legend Dropdown, Dropdown with Search, and Title In-Line

      • Click on the ‘Input Box’ under ‘Add Values’ to append values to dropdown. Press ‘Enter’ to add it to the list.
      • Click on a value from the list to edit it. Click the cross to remove a value from the list.
      • Reorder the values by clicking the ‘Settings’ icon.

      Checkbox Filter and Checkbox Legend Filter

      • Click on the ‘Input Box’ under ‘Add Values’ to append values to dropdown. Press ‘Enter’ to add it to the list.
      • Click on a value from the list to edit it. Click the cross to remove a value from the list.
      • Reorder the values by clicking the ‘Settings’ icon.
      • Change the checkbox style from the dropdown either to circle or square

      Range Filter and Simulator Filter

      • Change the range of the element here. Enter the starting value under ‘From’ and ending value under ‘To’.
      • Add text in it as it is different from the other filters.
      • Toggle on/off to remove ‘To’ value. 

      Date Slicer Filter, Date Range Filter, and Date Selector

      • Toggle on the title text if you want.
      • Toggle on/off to add or remove range in the filter. 
      • Change the date format of the element by clicking the arrows under ‘Date Format’
      • Edit the start date and final date from the ‘Edit’ section
      • Toggle on/off to add/remove sliders from the element
      • Slicer can not be there in the Date Selector anywhere.

      3. Add Ons:

      Contains additional elements that can be added to the filter.

      Search:

      • Switch on or off to add or remove search bar from the filter. 
      • This is only applicable to the following variants - Basic Dropdown, Legend Dropdown, Dropdown with Search, and Title In-Line.

      Legends:

      • Add or remove legends from the filter by toggling on or off.
      • Change the marker style to either circle or square.
      • This is only applicable to the following variants - Basic Dropdown, Legend Dropdown, Dropdown with Search, Title In-Line, Checkbox Filter, and Checkbox Legend Filter.

      Tip: Add-ons are not available for Range Filter, Simulator Filter, Date Slicer Filter, Date Range Filter, and Date Selector.

      4. Variation:

      • Clicking this will open the ‘Choose Style’ pop-up. 
      • Pick a different style for the element from this. 
      • The pop-up can also be accessed by double-clicking any selected element.
      • Different element variations can also be achieved by customizing it using the steps described above.

      5. Design Customizations

      • This will access the 'Design Customizations' menu when clicked. 
      • Use this to change your active theme and utilize customization options to adjust the canvas accordingly.
      • For more information, please refer to this article.

      This was a complete guide to using and editing a filter on Mokkup. For further help, please ask our Chatbot or contact Support.

      Similar articles