Building in the WCMS
A successful dashboard incorporates a balance of multiple visual elements to provide different perspectives on a single theme. Adding the right combination of visualizations can provide a cumulative effect that one visualization cannot. Data filtering across the separate elements adds a level of customization to the viewer’s experience. Dashboard Best Practices can be used to inform the content owner about available elements and options during page planning.
The WCMS dashboard is a reusable module that can only be added in the Visual Composer.
Support for filterable data is available in the dashboard editor. To create a dashboard, you need a CSV or JSON file containing a record for each of the entities to be included. When formatting your data, keep the end dashboard in mind to guide data configuration choices.
Specific sets of visualizations will have unique data configuration needs. For example, if you are creating a filterable map, the source file should have multiple records for each geographic entity.
Example CSV files and specific data requirements are available for download at each of the individual data visualization build pages.
Example dashboard CSV files are included below:
- analytics light icon Dashboard Filtered by Location and Type excel icon[XLS – 15 KB]
- analytics light icon Dashboard Filtered by Location and Year excel icon[XLS – 4 KB]
- analytics light icon Dashboard with No Filter excel icon[XLS – 971 B]
Creating the Dashboard
- From the WCMS content browser, select “New Content” and then select “Data Visualization” (under “Media and Visualizations”) as the content type.
- Enter a title and a file name ending in .JSON.
- Then click “Open Visualization Editor” and complete the fields in the following sections.
In the Import Data tab, select “Upload file.” or “Load from URL.” When loading from a URL, you can check “Always Load from URL” to keep the data map in sync with the source data. This causes the map to load from the URL endpoint each time it is rendered. Note: If a URL is used, the host of the URL must be set to allow for cross-domain web requests.
Once the import has completed successfully, you can preview the data in the table on the right. If the data on the right looks correct, click on the “2. Choose Visualization Type” tab to proceed. You may use the Data Orientation Wizard below the Data Source to aid in configuration, but it is not required for dashboard use.
On the “2. Choose Visualization Type” tab select the “Dashboard” visualization type and you will be automatically advanced to the “3. Configuration” tab.
It is highly recommended that you configure the high-level dashboard settings in the “Preview & Configure” tab in the top right before creating the individual visualization elements.
Preview & Configure
- Title – A descriptive title will guide user perceptions and queue users to the functioning of the filters
- Description – Information entered here will appear below the Data Table
Filters can be configured to give a page visitor the ability to customize their view at the dashboard level. Note: When a filter is created here, it affects the logic of all elements within the dashboard. It is recommended to configure the dashboard level filters first to avoid conflicts with the individual visualizations.
- Add Filter – Clicking “Add Filter” opens a filter selection. Selections are generated by the headers in your data. Text entered in the “Label” field displays next to the filter dropdown at the top of the dashboard.
Make selections appropriate for your dashboard application. For 508 accessibility the data table must be available unless an alternative data table is provided on the same page.
Once your Dashboard level configuration is complete, you can add visual elements to the Dashboard using the “Build Layout” tab next to the “Preview & Configure” tab in the top right corner of the Dashboard Editor.
Visualizations can be dragged from the types on the left directly into the desired row and column. Rows and columns can be configured and added much like in the Visual Composer.
Red “Configuration needed” text displays in the visualization panels that need to be configured before displaying correctly. Simply click on the pencil icon in the top right of the element card to enter its configuration window.
The configuration window that appears has the same steps as the stand-alone visualization. Again, the configuration guides for each visualization can be found in the gallery. One thing to keep in mind when configuring each visualization element is that the global dashboard filters you created will influence the visual output. Some advanced filtering and forethought may be required for all elements to work correctly.
Once configuration is complete, click “Back to Dashboard” in the top left of the configuration window to return. “Preview & Configure” can be selected anytime to view the result of your built. Once the build is complete, select the “OK” button in the bottom right to return to the Data Visualization page. BE SURE TO SAVE YOUR PROGRESS before you leave the data visualization page.
With the Dashboard complete it can be added to your page like any other Data Visualization Module. When the page is published, you’ll be prompted to publish the modules as well. As a reusable module type, this dashboard can be added to any page on this site.
When a filter is created at the dashboard level, it affects the logic of all elements within the dashboard. Configure the dashboard level filters first to avoid conflicts with the individual visualizations.
The WCMS dashboard is a reusable module that is created with the “Data Visualization” content type and must be added in Visual Composer.
You can use either the tabs along the top of the visualization editor or the blue navigation buttons within each tab to progress through the building process. The “OK” button closes the editor.
Look for feedback from the visualization editor throughout the process to guide choices and troubleshoot errors.