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.
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.
By the end of the tutorial, we will have learned how to:
The dashboard should look like this:
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:
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:
Notice that we now have a dropdown menu which contains the unique subcategories found in the dataset.
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:
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:
Notice that a textbox has appeared at the top of the dropdown menu, allowing search-as-you-type.
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: