Insert scripted third party web content


1. Overview

This article shows how to insert custom web content onto a single dashboard and pass it data, when you don't want to add a new type of control to the toolbar. For reusable controls that users can find in the toolbar, see the article: Create a custom control.

The example shown here adds a custom Bing Maps control onto a dashboard using the Bing Maps API, a metric set, and an HTML label control. The metric set will hold the latitude and longitude values we wish to display on a map. The HTML label control will be used to define a div element that can be used with most third party content tools, including the Bing maps shown here.

The Map visualization in Dundas BI supports Bing as one of its street-level map providers, as well as many others. If your goal is mainly to display Bing maps behind location markers or other elements the built-in maps support, they are strongly recommended.

Script Library: Insert scripted third party web content sample

2. Setting up the data

To set up data to pass to the third party content, create a new Metric Set from the main menu.

Create a metric set
Create a metric set

For this example, an excel file containing latitude and longitude data was dropped onto the canvas. The data automatically appears as a table.

Metric set after dropping latitude and longitude data
Metric set after dropping latitude and longitude data

Next, find the metric set ID by going into the Explore window or main menu, right-clicking the metric set you just created, and then choosing Properties.

Open the metric set properties
Open the metric set properties

In the Properties dialog, find the ID and copy it for later, so we can request this data from the dashboard.

Get the metric set ID
Get the metric set ID

3. Integrating the custom web content

Edit your dashboard and add an HTML Label from the toolbar.

The HTML Label in the toolbar
The HTML Label in the toolbar

Set the label text property to define an element to act as the placeholder for the custom content:

<div id="bingMapContainer" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%">

This example above sets additional positioning in a style attribute that is likely not needed except when used with a Bing Maps control.

The Label Text property
The Label Text property

In the dashboard’s Loading actions, add the following script with the required input fields updated, including the metric set ID and Bing key:

// Add the Bing Map Scripts
var tag = document.createElement('script');
tag.setAttribute('type', 'text/javascript');
tag.setAttribute('src', '');
// Wait for the scripts to load.
tag.onload = function () {
    /* Required Input */
    var placeholderElement = document.getElementById('bingMapContainer'); // Defined in the HTML label
    var metricSetId = '3f65707b-bdeb-4e13-8067-d91084416c9e';
    var latitudeIndex = 0; // The index of your latitude in the metric set
    var longitudeIndex = 1; // The index of your longitude in the metric set
    var initialZoomLevel = 9;  // The default zoom level of the map 1-10 (out>in)
    var bingKey = 'YourBingKey';
    // Describes the visual used as a placeholder for the symbol
    var pushpinOptions = { width: null, height: null, htmlContent: "" };
    // Request data from a metric set by its ID:
    var request = new{ objectId: metricSetId });
    // Do not limit the number of rows by paging:
    request.pagingOptions.pagingKind =;
    // Get the data retrieval service
    var dataRetrievalService = this.getService("DataRetrievalService");
    // Make this aysnc
    var dataPromise = dataRetrievalService.getData(request);
    // Used to show loading animation over the bing map during the data request
    var viewService = this.getService("ViewService");
    viewService.showLoadingRestCall(dataPromise, { "element": placeholderElement });
    // On data retrieval successful
    dataPromise.done(function (results) {
        var mapOptions = {
            credentials: bingKey,     
            mapTypeId: Microsoft.Maps.MapTypeId.road,
            showScalebar: true,
            showDashboard: false,
            enableSearchLogo: false,
            disableKeyboardInput: false,
            disableMouseInput: false,
            disablePanning: false,
            disableTouchInput: false,
            disableUserInput: false,
            disableZooming: false
        var lat = [];
        var long = [];
        for (i = 0; i < results.length; i++) {
            if (results[i] == metricSetId) {
                lat = results[i].cellset.cells[latitudeIndex]; // latitude column
                long = results[i].cellset.cells[longitudeIndex]; // longitude column
        // Initialize the map
        if ( == null) {
   = new Microsoft.Maps.Map(placeholderElement, mapOptions);
        // Clear and existing entities;
        // Create an array of locations (so that we can later calculate the center point)
        var locations = [];
        // Iterate the data that is returned
        for (i = 0; i < lat.length; i++) {
            // collect the points so that we can later calculate the center point
            locations.push(new Microsoft.Maps.Location(lat[i].value, long[i].value));
            // add the pushpin to the map
            var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat[i].value, long[i].value), pushpinOptions);
        // Calculate the center point of the map and the zoom level
        var r = Microsoft.Maps.LocationRect.fromLocations(locations);{ zoom: initialZoomLevel, center: })
        // Signal operation complete (for async)
// Add the script tag.

See the Class for the complete list of data request options.

You will need to set up an account with Bing Maps and create a key. As part of the key setup you must associate each key with an application. More information on creating a key can be found at

Once your design is complete, view and refresh the dashboard. Your placeholder div on the dashboard should now display the custom content.

4. Troubleshooting

  • Mixed Content Errors - The Dundas BI web application and third party JavaScript file (e.g., should use the same protocol, so update the beginning of these URLs used in script elements, etc., to match if needed.

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