Creating a Venn diagram

Contents[Hide]

1. Overview

This sample shows how to integrate an external Javascript library, such as a Venn diagram library, into a specific Dundas BI dashboard using an HTML label.

The Venn diagram was first introduced in 1880 by John Venn, and is designed to show all possible logical relations between a finite collection of different sets. 

Note
Venn diagrams are not great visualization tools for comparing quantitative data and are also quite limited when it comes to showing logical relations between more than 3 collections (in that case you might consider the Relationship Diagram).

If you prefer to add a custom visualization to the toolbar for Dundas BI users to add themselves to their own metric sets and dashboards without writing script, see Create a custom data visualization control.

2. Prerequisites

This sample requires:

  • Basic knowledge of HTML, CSS and Javascript.
  • Venn.js - A JavaScript library that can be used to draw Venn diagrams, based on the D3 library.
  • dundasVennLib.js - A helper library that can create a Venn diagram in Dundas BI based on a metric set's data result.
  • A user account with the Developer seat type in order to add custom script to a dashboard.
  • Administrator access to Dundas BI and its server if you are adding the JavaScript and CSS to the instance as shown below.

3. Sample data

Create a metric set from the main menu, selecting the different category intersections on Rows and the member counts on Measures.

Disable totals from the toolbar or from the dialog shown when clicking the Edit button in the Data Analysis Panel.

A sample metric set looks like this:

Sample metric set
Sample metric set

Important
When using the example script shown below, the values of the intersection dimension should all be in the form of category names separated by "&".

4. Integrating Venn.js

The D3 library is already included in Dundas BI, but this example uses the D3-based Venn.js library, as well as a Dundas helper library to do most of the work of creating the Venn diagram and passing it data. The following steps show how to add these additional JavaScript libraries to your Dundas BI instance as well as CSS styling.

Note
This example adds the JavaScript and CSS to the entire Dundas BI instance so it can be used on multiple pages. Alternatively, you can add this JavaScript and CSS to individual dashboards or views using JavaScript in their script editor.

First, download and extract venn.js and dundasVennLib.js from the links in the prerequisites section above.

4.1. Version 9 and above

When logged onto Dundas BI as an administrator, access Administration from the main menu, click to expand Setup, and choose Static Resources.

For each file, click Add New in the toolbar, set Resource File Type to JavaScript file, and choose the file to upload.

Add the files as static resources
Add the files as static resources

URLs are listed next to each file that you can use to access them. In most cases, /api/ should be the first subpath or subfolder after the root of the website; if not, you may need to adjust the paths used to refer to these files below accordingly.

Next, navigate to App Styling from the blue sidebar on the left, and double-click or open the details for the HTML resource. Enter script elements like the following to include the JavaScript library files on each page in Dundas BI:

<script src="/api/resource/staticresourcefile/venn.js"></script>
<script src="/api/resource/staticresourcefile/dundasVennLib.js"></script>

Click to submit the dialog when finished.

4.2. Previous versions

Within the installed Dundas BI folder on the server, find or create a Dundas BI Javascript override folder located at [BIWebsite]/wwwroot/Scripts/Override, then add the JavaScript library files to this folder.

When logged into Dundas BI as an administrator, click Admin in the main menu, click to expand Setup and go to App Styling. Double-click or open the details for the HTML resource, then refer to the two JavaScript files above using <script> elements like the following:

<script src="/Scripts/Override/venn.js"></script>
<script src="/Scripts/Override/dundasVennLib.js"></script

5. CSS

Continuing from the App Styling page in administration, double-click or open the details for the CSS style resource, then paste in this CSS to format the tooltip displayed when hovering over the Venn diagram:

.venntooltip {
  position: absolute;
  text-align: center;
  width: 128px;
  height: 16px;
  background: #000;
  color: #FFF;
  padding: 2px;
  border: 0px;
  /*border-radius: 8px;*/
  opacity: 0;
  z-index: 10000;
} 

For details on adding custom JavaScript and CSS to your Dundas BI instance as done above for this example, see White labeling the application.

6. Dashboard setup

When editing a dashboard, add an HTML Label component.

Under the Text properties of the HTML Label, add the following to the HTML Label Text:

<div id="venn"></div>

In the Properties window without any elements selected on your dashboard, find the Ready event under Actions, and add script to call window.dundasVennLib.generateVenn.

This script should be updated to refer to the ID of your own metric set created earlier, and the hierarchy and measures unique names from your metric set containing the data to visualize.

  • You can find the metric set ID by right-clicking this file from the main menu or in the Explore window, choosing Properties, and locating the ID field. You can select its contents and press Ctrl+C or ⌘+C to copy it to the clipboard.
  • When editing a metric set, you can confirm each hierarchy or measure unique name by clicking to edit it in the Data Analysis Panel, and checking the Unique Name field.
var div = d3.select("#venn");

var viewParameter1 = this.control.getViewParameterByName("viewParameter1"); // (optional, see below)

window.dundasVennLib.generateVenn(
    htmlLabel1, // the HTML label containing the div below
    div, // the Venn diagram container
    "2c344485-cad0-427b-bcec-9afd221d7eb2", // ID of the metric set providing the data
    "IntersectionName", // unique name of the hierarchy identifying the categories
    "Students" // unique name of the measure indicating the number of members of each category
    // [ // (optional) array of mappings between view parameters and metric set elements,
        // { // for when you want to use filters
        //     targetElementName: "<name_of_element_to_filter>",
        //     parameter: <view_parameter_used_to_filter_the_element>
        // }
    // ]
);

If you intend to use filters on the Venn diagram, you will need to add a script that refreshes the Venn diagram. This script can be added to the Parameter Value Changed event of those filters.

htmlLabel1.refreshVenn();

7. Result

The result of this sample is a Venn diagram that displays how many students are enrolled in the courses provided.

Venn diagram
Venn diagram

8. See also

Dundas Data Visualization, Inc.
400-15 Gervais Drive
Toronto, ON, Canada
M3C 1Y8

North America: 1.800.463.1492
International: 1.416.467.5100

Dundas Support Hours:
Phone: 9am-6pm, ET, Mon-Fri
Email: 7am-6pm, ET, Mon-Fri