Adding a data image
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.
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.
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.
In the Data Analysis Panel, click Visualization. You'll see that your data is assigned under Image Path.
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.
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.
Choose View in the toolbar to see the scorecard showing a list of images.
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.
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:
Click the Process Result transform and then open the Data Preview window to see the Base64 encoded 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.)
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 property||Resolved 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|