Creating a Venn diagram

Contents[Hide]

1. Overview

This sample will show how to integrate an external Javascript library, such as a Venn diagram based on the D3.js 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 use both in multiple metric sets and dashboards without writing script themselves, see Create a custom data visualization control.

2. Prerequisites

This sample requires:

  • Basic knowledge of HTML, CSS and Javascript.
  • The Venn.js library, which is the source for the D3-based visualization.
  • 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 also 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 extra JavaScript libraries to your Dundas BI instance as well as a CSS file for 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.

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 Venn.js file to this folder.

Download and unzip this file and add the dundasVennLib.js file to the same override 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 JavaScript 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>

From the App Styling page, 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 the JavaScript and CSS overrides used in this example, see White labeling the application.

5. Dashboard setup

On a new or existing 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>

On the Ready event of the dashboard, add the script to call window.dundasVennLib.generateVenn

var div = d3.select("#venn");

var viewParameter1 = this.baseViewService.currentView.control.getViewParameterByName("viewParameter1");

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>
        // }
    // ]
);

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

htmlLabel1.refreshVenn();

6. 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

7. See also

Dundas Data Visualization, Inc.
500-250 Ferrand Drive
Toronto, ON, Canada
M3C 3G8

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