How to Create a Range Navigator Widget

Getting Started with a Range Navigator Widget

Click the “New Dashboard” button and select the “Blank Dashboard” option. A pop-up box will prompt you to configure a data source.

Bold BI has a great variety of sample data sources to choose from, and for this dashboard, I am selecting our “Distribution-Weather Details” data source.

Simply select the data source you would like to use and click “Add”.

Selecting the Range Navigator Widget

Range Navigator controls allow you to select a smaller range from a large collection. They are commonly used to filter the date range for which the data is visualized.

Assigning Data to the Range Navigator Widget

I know the range navigator widget allows me to select a range of data from a series, and this can also be used as a filter for other controls.

Thus, in this widget, I would like to see the maximum temperature recorded in August 2018.

To assign data to my widget, I need to click the “Settings” button in the upper right corner of my widget. Then, I will click the “Assign Data” tab.

Now, I am ready to assign data to my widget. After clicking the “Assign Data” tab, I will drag the “Max Temp” field to the “Values” box and the “Date” field to the “Argument” box.

Customizing the Range Navigator

Then, I can change the range chart type to Area, Line, or Step Line by using the dropdown list in the “Properties” tab. Here, I will use the default type “Area”.

My widget has now been created, but it looks a bit odd. This is because my data source only contains temperature data for one month, August 2018, but my widget is displaying the date in a year format (rather than showing each individual day of August as I intended).

You may have noticed that though the “Dimensions” box contains a field called “Date,” the field’s name changed to “Year(Date)” when you dragged it over to the “Argument” box. This is because the widget shows data for the entire year by default.

This format would be helpful if I wanted to compare data across multiple years, but since I am only looking at one month of data, I need to revise my date display criteria. It does not make sense for my widget to supposedly display data for all of 2018 if I am only examining one month of temperature data.

To change the date settings for my widget, I need to navigate back to the “Argument” box and click the “Options” button beside the “Year(Date)” field. When I do, I see a list of different date display options: Date, Year, and More (clicking the “More” button will provide you with additional options).

You can set “Range” and “Period” options from the Relative Date Filter menu. You can also set a specific date by enabling “Link to Specific Date”.

As we noted earlier, the “Year” option is selected by default. In order to see the maximum temperature data for each individual day of the month with the year, I am going to click the “Day Month Year” option.

After I click “Day Month Year,” I can see that the name of the date field in the “Argument” box has been changed to “DayMonthYear(Date),” and my widget’s appearance has been updated accordingly.

Adding a Range Navigator Filter to an Area Chart

My area chart widget highlights the maximum temperature for each day of August 2018 (if you have not already done so, please feel free to read the post outlining how I created my area chart widget).

To test my already customized range navigator filter’s functionality, I can click the “Preview” button in the upper right corner of my dashboard and navigate to the range navigator.

I can select a date range by dragging the sliders. For example, if I want to see data for the last 10 days of August, I can drag the sliders accordingly, and my area chart widget will show data for the selected date range.

If I would like to clear the applied filter, I just need to click the “Clear Filter” button that appears in the upper right corner of my range navigator, and the widget will return to its original appearance.