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 a different image depending on data values.
2. Add a data image to a dashboard
This example shows you how to add a data image visualization to your dashboard.
First, create a data connector to the following SQL Server database table.
The Employees table includes a column specifying 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 EmployeePicture column onto the empty data image visualization (or onto the ROWS field of its Data Analysis Panel). This will assign the data image visualization to data and cause it to display the picture corresponding to the first record in the Employees table by default.
In the Data Analysis Panel, click Visualization. You'll see an IMAGE PATH field that maps to the EmployeePicture hierarchy.
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 (e.g., [EmployeePicture]) corresponding to the hierarchy added to the ROWS field of the underlying metric set. This keyword resolves to an actual hierarchy value, allowing the image that is displayed to be different depending on the EmployeePicture hierarchy values.
Open the Data Analysis Panel for the data image again and edit the EmployeePicture ROWS hierarchy. In the Configure Metric Set Element dialog, click the Default Parameter Value dropdown and change it to another value to see a different picture loaded into the control.
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 employee names and corresponding images.
Follow these steps:
- Create a data connector to the Employees table as shown in the previous example.
- Create a new scorecard and set its width to 600.
- Expand the data connector and drag the EmployeeID column to the scorecard's grouping area (drop a column or hierarchy here).
- Drag the EmployeeName column to the body of the scorecard. It will appear as a data label that will be repeated.
- Add a data image visualization to the canvas from the toolbar.
- Drag the EmployeePicture column onto the data image. This will add EmployeePicture as a ROWS hierarchy.
- Drag the data image to the scorecard body so it can be repeated.
The scorecard in the designer appears as follows:
Switch to View mode to see the scorecard showing a list of employees with corresponding 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.
Click the button under the Calculated Elements section to add a new element.
Set the element Name to: LargePhotoBase64
Set the element Data Type to: String
Set the element Expression to: return Convert.ToBase64String($LargePhoto$);
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 data cube's LargePhotoBase64 column 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,[LargePhotoBase64]
(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 data image visualization should display the image for the first product in the data cube result.
For a more practical example, drag the Name column from the data cube to the data image visualization (as a second ROW hierarchy), and then add a member filter to the dashboard which will allow you choose the product you want to see.
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 this.
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|