Tutorial: Dropdown Menus & Search

In the previous tutorial we learnt how to create an interactive chart that shows the cross-tabulation of sales across geographical areas and product categories. This tutorial deals with adding even more granularity to the visualization with dropdown menus and search functionality.

Introduction

Here’s the preview of the data and the corresponding chart.

We are able to see the sales across regions and product categories. Suppose that we want to add even more detail to our dashboard and visualize the same chart, but this time, optionally filtered by a specific sub-category too. Note that there are eleven sub-categories of products in our dataset. This can be verified by grouping the data by the Sub-Category column.

Suppose we want to see the sales of binders. Note that binders don’t appear as a sub-category in the first few columns of the dataset. Thus, we may not see binders in the Sub-Category column unless we jump to the second page of the table, or increase the preview limit from the default 5 rows to 10 rows. In general, the data can be filtered by any value in any column, as long as we can see that value in the table - but in this case, it is not possible to see all possible subcategories in the preview. In such cases, we might want to add some element to the page which allows us to:

In this tutorial we will walk through the search and dropdown functionality provided by g1, the Gramex interaction library, and how it integrates with URL changes and therefore with FormHandlers and Vega charts.

Outcome

By the end of the tutorial, we will have learned how to:

  1. embed a dropdown menu in an HTML page,
  2. detect selection events in the dropdown menu,
  3. trigger events on selection.

The dashboard should look like this:

View Source

Step 0: Laying out the Scaffolding

This tutorial builds upon the previous one. To get started, simply save the following files into your project folder:

At this stage, the output should look like this:

View Source

Step 1: Making a Dropdown Menu

G1 dropdown requires the bootstrap-select library and it’s dependencies.

Add the following to the <body> of our index.html:

Now, the <body> of our index.html should look somewhat like:

What we have now is an empty dropdown menu, and we need to populate it with the unique values found in the Sub-Category column. For any FormHandler URL, the unique values in a column can be found by grouping the dataset by that column. In this case, we can group by the Sub-Category column by appending ?_by=Sub-Category to the end of the FormHandler URL. You shoud see 11 unique sub-categories.

We need to now feed these values into the dropdown menu.

Add the following script to the HTML in order to insert subcategories innto the dropdown menu.

At this stage, the output should look like this:

View Source

Notice that we now have a dropdown menu which contains the unique subcategories found in the dataset.

Step 2: Changing the URL on Selection Events

Note that every time we click on something in the dropdown menu, the page reloads.

To avoid reloading the page on selection, change the dropdown function as follows:

At this stage, the output should look like this:

View Source

By setting the "target" option of the dropdown function to "#", we are ensuring that the selected option is added to the hash of the URL.

A dropdown menu has limited utility. If the number of menu items is too large, a dropdown can become impractical.

Enable search by setting the liveSearch option in the dropdown function as follows:

At this stage, the output should look like this:

View Source

Notice that a textbox has appeared at the top of the dropdown menu, allowing search-as-you-type.

Step 4: Redrawing the Chart on URL Changes

We have successfully managed to make changes to the URL every time an item is selected from the dropdown menu. In the previous tutorial, we have covered how to redraw the color table chart whenever the URL changes. Following the same strategy, we can add event triggers to g1 dropdowns, which redraw the chart whenever a selection happens.

Change the dropdown function to the following, in order to trigger the chart on a selection event.

The dashboard should look like this:

View Source

Exercises

Troubleshooting

Charts not rendering automatically

Next Steps / FAQ