Adding a data image
A data image is a data-bound image control 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 Binding 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 Binding Panel). This will bind 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 Binding Panel, click Bindings. You'll see an IMAGE PATH binding which 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 Binding 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 the data image visualization does not directly support the SQL Server image data type, you can use a data cube to convert the binary data to a Base64 string encoding which 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.
First, create a new data cube in Dundas BI using a Manual Query and the AdventureWorks data connector.
Enter the following query in the script editor:
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
Next, insert a Calculated Element transform which will be used to convert the LargePhoto binary column to a new Base64 encoded string column.
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, create a new dashboard and add a data image visualization to the canvas.
Go to the Explore window and drag the data cube's LargePhotoBase64 column onto the data image in order to databind it.
Open Properties for the data image and set its Image Path property to: data:image/gif;base64,[LargePhotoBase64]
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 bound 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|