How To Filter The Data Within a Graph?

📝 Note: This is a premium feature of Visualizer: Charts and Graphs, which you can get from here.

Filtering the data might be handy if you want to allow your website's visitors to exclude specific data from the graph. and this became easier using the integrated filtering settings of Visualizer. 

🧰 Using the Data Filter

1

Navigate to Visualizer > Charts Library.

2

While editing a chart, open Settings > Chart Data Filter Configuration.

3

From this point, you will be able to see Options to offer filtering options and also UI Options to make them appealing.

⚙️ Available settings

Options

Here you will find the basic settings for adding filters:

• Filter type - according to the chart type, you can add suitable filters: String Filter, Number Filter, Category Filter, Chart, and Data Range Filter.
• Filter by Column Index - pick the column index according to the type ( number / string ).
• Filter by Column Label - charts may have different labels, so you can pick the ones that you want to enter in the filters.
• Formatted, Min, Max Value - settings that restrain the search.
• Match Type - the search results will appear differently according to the match type ( prefix / exact / any ).
• Case Sensitive - enable this if you want to have an exact search, using the case sensitive option.

UI Options 

From here, you can design a more appealing style to the data filter by adding:

• Label - give the visitor more context and add a label next to the filtering method.
• Label Separator -  you can use separators like ":" to delimitate the label better.
• Caption - acts like a placeholder, and it is available only for the Category Filter.

• Label Stacking - the label can appear next to the field ( horizontal ) or above ( vertical ). 
• Orientation - it represents the orientation of the filtering field, and it is applied for the Number Range, Chart Range, and Date Range Filter.
• Show Range Values - some filter types present a range, so you can choose to show the range values or not.

• Allow Multiple
• Allow Typing

💡 Use Cases

• let your visitors select what city they want to find out more about from a traveling post

• allow the users to read the most commented blog posts by adding a number of comments filter