Adding a data image

Contents[Hide]

1. Overview

A data image is an image control connected to data, which you can add to your dashboard, report, or scorecard. Use it to show images specified in your data source.

2. Add a data image to a dashboard

This example shows you how to add a data image visualization to your dashboard.

First, find or create a data connector with data containing addresses to an image, or parts of an address, like in the following SQL Server database table.

Employees table
Employees table

This example includes the full URL of a picture to go with each employee.

Next, create a new dashboard using the blank template.

Go to the toolbar, click Data Visualization, and then select Data Image. An empty data image visualization appears on the canvas with its Data Analysis Panel opened.

Add a data image from the toolbar
Add a data image from the toolbar

In the Explore window, expand the data connector and drag the column containing the image URLs onto the empty data image visualization (or onto the ROWS field of its Data Analysis Panel). The picture corresponding to the first row is displayed by default.

Drop the EmployeePicture column onto the data image
Drop the EmployeePicture column onto the data image

In the Data Analysis Panel, click Visualization. You'll see that your data is assigned under Image Path.

Image Path data
Image Path data

Next, go to the Properties window for the data image. Look at the value for the Image Path property and you'll see that it has a placeholder keyword corresponding to the hierarchy assigned under Image Path in the Data Analysis Panel.

If you have data that forms only part of the URL to an image, edit this property and use the placeholder keywords to insert whichever parts of the address need to change according to the data. See the image path section below for details.

Image Path property
Image Path property

You can filter your data to change which picture is displayed by the data image.

3. Use a data image in a scorecard

This example shows you how to use a data image visualization in a scorecard (or report) to produce a list of images corresponding with data.

In new scorecard, drag a column identifying each scorecard row to the scorecard's grouping area (labeled drop a column or hierarchy here...).

Add a data image visualization to the body from the toolbar, then drag the data identifying each image onto the data image.

Adding a data image to a scorecard
Adding a data image to a scorecard

Choose View in the toolbar to see the scorecard showing a list of images.

Switch to View mode to see the resulting scorecard
Switch to View mode to see the resulting scorecard

4. Display Base64 encoded image data

Although Dundas BI does not directly support the SQL Server image data type in its data cubes and metric sets, you can use a data cube to convert the binary data to a Base64 string encoding that can then be displayed by the data image visualization. The following example shows you how to do this using the AdventureWorks 2012 sample database, which contains image data for various products.

In our example, we have created a data cube in Dundas BI using the following manual query against SQL Server's Adventure Works sample database:

select p.ProductID, p.Name, ph.ThumbNailPhoto, ph.LargePhoto
from [Production].[Product] p
inner join [Production].[ProductProductPhoto] ppp
on p.ProductID = ppp.ProductID
inner join [Production].[ProductPhoto] ph
on ph.ProductPhotoID = ppp.ProductPhotoID
where ph.ProductPhotoID <> 1

Regardless of whether you use a manual query, first configure the select transform and ensure the Binary columns containing the image data are checked to include them in the cube's result.

Next, insert a Calculated Element transform that will be used to convert the LargePhoto binary column to a new Base64 encoded string column, using the .NET method Convert.ToBase64String.

Double-click the transform to configure it, then click the button under the Calculated Elements section to add a new element.

Set the Data Type to String, and use an expression like the following:

return Convert.ToBase64String($LargePhoto$);

Add a calculated element to convert binary data to base64
Add a calculated element to convert binary data to base64

Click the Process Result transform and then open the Data Preview window to see the Base64 encoded data.

Data Preview shows the Base64 image data
Data Preview shows the Base64 image data

Next, find or add the data image visualization in a dashboard (or other view).

Add the base64-encoded hierarchy from the data cube to the data image or its Data Analysis Panel in order to connect it.

Open Properties for the data image and set its Image Path property to: data:image/gif;base64,[Base64 Hierarchy], where [Base64 Hierarchy] refers to your hierarchy name.

(If your image data is not in GIF format, the "gif" portion of the property setting should be changed to the appropriate file extension.)

Set the Image Path property for Base64 data
Set the Image Path property for Base64 data

5. Properties

5.1. Image Path

The Image Path property specifies a URL that points to an image. The URL can be an absolute image path (e.g., http://www.example.com/images/image1.png), or a path that is relative to the Dundas BI website (e.g., /Content/Images/image1.png).

You can also insert one or more keywords which will be replaced with actual hierarchy values. A keyword can be used to specify the entire path, or just a portion of the path. By default, the Image Path property is pre-populated with keywords corresponding to the connected row hierarchies, but you can modify it to add portions of an address that are missing.

The following table shows some examples of using the Image Path property. Included are a couple of non-URL examples such as using Dundas BI image resources and Base64-encoded image data strings.

Row hierarchy value(s)Image Path propertyResolved URL
ProductPicture = http://www.example.com/products/Picture200.jpg [ProductPicture] http://www.example.com/products/Picture200.jpg
ProductPicture = Picture201.png http://www.example.com/products/[ProductPicture] http://www.example.com/products/Picture201.png
ProductPicture = Picture202 http://www.example.com/products/[ProductPicture].png http://www.example.com/products/Picture202.png
ProductPicture = /Content/Images/Picture203.png [ProductPicture] http://dbiserver/Content/Images/Picture203.png
ProductPicture = Picture204.jpg /Content/Images/[ProductPicture] http://dbiserver/Content/Images/Picture204.jpg
State = Maine, City = Portland /Content/Images/Photo_[State]_[City].jpg http://dbiserver/Content/Images/Photo_Maine_Portland.jpg
CompanyLogo = 0f079222-a7ca-4a15-8e7c-b21c96ab4cbb dundasImageResource:[CompanyLogo] Displays the image resource with the specified ID
ImageDataBase64 = RIOGODlmhw... data:image/gif;base64,[ImageDataBase64] Displays the base64-encoded image

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