Insert scripted third party web content

Contents[Hide]

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 Bing map 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.

Note
The Map visualization in Dundas BI supports Bing as one of its street-level map providers, as well as several others. If your goal is mainly to display Bing map layers, the built-in maps 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"></div>

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', 'http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=8.0');
// 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 dundas.data.Request({ objectId: metricSetId });
    // Do not limit the number of rows by paging:
    request.pagingOptions.pagingKind = dundas.data.PagingKind.NONE;
    // 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].metricSet.id == metricSetId) {
                lat = results[i].cellset.cells[latitudeIndex]; // latitude column
                long = results[i].cellset.cells[longitudeIndex]; // longitude column
                break;
            }
        }
        // Initialize the map
        if (window.map == null) {
            window.map = new Microsoft.Maps.Map(placeholderElement, mapOptions);
        }
        // Clear and existing entities
        window.map.entities.clear();
        // 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);
            window.map.entities.push(pushpin);
        }
        // Calculate the center point of the map and the zoom level
        var r = Microsoft.Maps.LocationRect.fromLocations(locations);
        window.map.setView({ zoom: initialZoomLevel, center: r.center })
        // Signal operation complete (for async)
        e.deferred.resolve();
    });
}.bind(this);
// Add the script tag.
document.head.appendChild(tag);

Tip
See the dundas.data.Request Class for the complete list of data request options.

Important
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 https://www.bingmapsportal.com/.

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 Bing Map JavaScript file (http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=8.0') need to use the same protocol (e.g., HTTP or HTTPS). When using HTTPS, you also need to append s=1 to the query string (e.g., https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=8.0&s=1).

5. 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: 7am-6pm, ET, Mon-Fri