How would you like to be able to filter your report by the latest month or latest year without user interaction?
This article will explain how you can achieve this using the Data-Driven Content object available from SAS Visual Analytics 8.2.
If you have not already heard about the Data-Driven Content object and the benefits it brings to Visual Analytics, you can read the following articles and websites:
To develop Data-Driven Content objects, you need:
You can use the web server included in the SAS Viya environment but it means you will have to upload your files each time to the SAS Viya environment. To keep the file transfer process to the minimum, you can run a web server on your machine during the development phase and then upload the code to a production web server as soon as you are happy with your code. If you want to install Apache web server on your machine, you have multiple options XAMPP being one of them.
Now that we are all on the same line regarding usage of Data-Driven Content object, I will explain the steps to create a Data-Driven Content object to dynamically filter your data.
First, we will create a report in VA. The report will contain two objects: a List table and a Data-Driven Content object. The report will be based on MegaCorp table but any other data source with a date variable having MMDDYY8 format will work. I will explain later why it should be in that format and how to workaround if you have dates formatted differently.
Here is a screenshot of my two object report and how I have assigned the roles from my MegaCorp data source. Please notice that the Data-Driven Content object displays a default view. This is useful to look at the data available to the object. I have also defined an action from the Data-Driven Content object to the List Table. The report is now fully functional and selecting values in the Data-Driven Content object will filter the List Table.
Select any image to see a larger version.
Those two files should be stored in a folder named util on the web server that will be used to render the html page. You can also download the following 2 files and store them at the same level as the util folder created previously:
The folder structure should look like this:
The css file contains the styles to be applied on the html elements and make them look nicer.
Let's start with the header of the html page:
Line 7 references the css file.
Lines 11 and 12 are loading the util scripts.
In the body, we have a div. The visual elements will be defined in that div.
The page contains:
Note the checkbox switch will appear as a toggle in the browser.
This div and the head section combined with the css file are enough to render the page in the browser:
The selectDate function defines a list of row IDs to be selected. Depending on the choice of the user, the function will return the single row ID for the "Latest date" selection or a list of row IDs for the "Latest month" and "Latest year" selections. You should always keep in mind that the VA report expects an array of row IDs to filter the data. The selection list should not contain more than the selected row IDs.
This function is also in charge of defining the information to be displayed in the html based on the selection.
On line 57, there is a little trick. The getMonth function returns a value between 0 and 11. This means that December as a value of 11 and not 12 as in real life. As you might guess, adding 1 to the returned value is enough to display the usual month numbers.
The manageEvent function is called each time there is an interaction in the report:
If the switch is ON (line 77-78), the selectDate function is called to define which dates should be included in the filter.
If the switch is OFF (line 80-82), the selection is empty and there is no filter applied.
When the selection is defined, the function will take care of displaying the correct information (lines 84-85) and to filter the report data (line 86).
This is the function that is called as soon as the VA report receives the data (line 108). The code checks if there is a variable with type "date" (line 92).
If there is no date, it will display a message to the user that a "date" variable is required.
You have two solutions:
This call is most probably the most important. Without this line, nothing would happen. It makes the web page wait for the data from VA and then triggers the filter function as soon as the data are available.
These few lines are there to handle the user interface logic. They define what should be done when the selection changes or when the switch is turned on or off.
Now, that you better understand what the html page contains, you should adapt the Data-Driven Content object in the VA report and make it point to the URL of the page.
Your report can now be used like this:
Of course, this example still requires some user interaction if you want to switch off the filter or change between Latest month or Latest year but there is no need to have those components in your web page. You can easily customize the code and the user interface to your needs.
If you need help, please don't hesitate to contact me.
Registration is open! SAS is returning to Vegas for an AI and analytics experience like no other! Whether you're an executive, manager, end user or SAS partner, SAS Innovate is designed for everyone on your team. Register for just $495 by 12/31/2023.
If you are interested in speaking, there is still time to submit a session idea. More details are posted on the website.
Data Literacy is for all, even absolute beginners. Jump on board with this free e-learning and boost your career prospects.