Visualizers

The Reports Module displays data using a Visualizer. A Visualizer is a component which is capable of displaying tabular data. This section describes each Visualizer and the settings associated with it.

The Reports Module comes with 5 Visualizers, 3 of which are installed by default.

Grid Visualizer
Displays data in a Grid format, allowing Paging and Sorting
HTML Template Visualizer
Displays data by processing an (X)HTML Template to replace tokens with values retrieved from the database.
XSLT Transformation Visualizer
Displays data by converting it to a well-defined XML format (see the Show Xml Source command) and running an XSLT Transformation to produce HTML
Chart Visualizer
Displays data by producing a Bar or Column chart comparing two fields from the returned dataset. Powered by the ZedGraph Graphing Library for .Net
Microsoft ReportViewer Visualizer
Displays reports produced in Microsoft Report Definition Language . This includes reports which are processed locally on the web server as well as reports processed on a Microsoft SQL Server Reporting Services server.

Grid Visualizer

Installed By Default

Grid Visualizer

Figure 1 - The Grid Visualizer

The Grid Visualizer displays data in a tabular grid and supports Paging and Sorting. If sorting is enabled, each column header can be clicked to toggle that column between ascending and descending sorting. The page links at the bottom can be clicked to jump between pages of data.

The Grid Visualizer allows administrators to customize the appearance of the grid in a few ways. First, they can enable or disable the Paging and Sorting features, and set the size of a Page if Paging is enabled. Administrators can also choose to show or hide the column headers (Note: If column headers are hidden and sorting is enabled, users will have no way to sort the data). The display of grid lines in the resulting grid can be controlled as well. For finer grained control over the appearance of the Grid, Administrators can also attach CSS Classes and CSS Attributes to the entire Grid.

For even more control over the styling of the grid, the Grid Visualizer defines the following CSS Classes that can be implemented in a Portal's CSS file:

Reports_Header
Applied to the header of the Grid
Reports_Row
Applied to every row of the Grid
Reports_AlternatingRow
Applied to alternating rows of the Grid
Reports_Pager
Applied to the pager at the bottom of the Grid
These classes can be used either to change the style of all Grids in a portal by defining them in a Portal CSS file, or by using the CSS Class setting to apply a unique CSS Class to the entire grid. You can also use the cascading nature of CSS to apply styles to particular instances of the Grid Visualizer. For example, if the CSS Class setting for a particular instance of the Grid Visualizer has been set to CustomersReport, then the following CSS will change the background color of alternating rows in the Grid to "white":

.CustomersReport .Reports_AlternatingRow
{
    background-color: white;
}

Changes to CSS can be made in the Admin > Site Settings page.

HTML Template Visualizer

Installed By Default

HTML Template Visualizer

Figure 2 - The HTML Template Visualizer

The HTML Template Visualizer uses an HTML Template file to display the data retrieved in the report. The template file is processed once for each row and then rendered as a list. Each Template is processed by locating tokens of the form [Column Name] in the Template and replacing them with the value of Column Name in the returned dataset.

For example, the following HTML Template was used to produce the output seen in Figure 2 on the right.

<h1>Module #[ModuleID]</h1>
<p>Title: [ModuleTitle]</p>

The HTML Template Visualizer automatically processes every row retrieved from the data source. If you wish to display just one row, or a smaller set of rows, you must change the Data Source to have it return only the rows you need.

XSLT Transformation Visualizer

Installed By Default

The XSLT Transformation Visualizer uses an XSLT Transformation file and XML produced by the Data Source to produce HTML that is used to display the report. The XML produced by the Data Source has the following format:

<DocumentElement>
  <QueryResults>
    <Column1Name>Column1Value</Column1Name>
    <Column2Name>Column2Value</Column2Name>
    ...
  </QueryResults>
  <QueryResults>
    ... Same as above, for Row 2 ...
  </QueryResults>
  ...

To ensure the correctness of your XSLT, you can use the Show Xml Source command to check the exact XML returned by your Data Source configuration.

As an example, to reproduce the results of the HTML Template Visualizer sample shown in Figure 2 above, the following XSLT would be used:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="xml" indent="yes" 
    doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" />
    
  <xsl:template match="/DocumentElement/QueryResults">
    <h1>Module #<xsl:value-of select="ModuleID" /></h1>
    <p>Title: <xsl:value-of select="ModuleTitle" /></p>
  </xsl:template>
</xsl:stylesheet>

Similar to the HTML Template Visualizer, all of the data retrieved from the Data Source will be displayed in this Visualizer. If you wish to restrict the amount of data displayed, you must modify your Data Source configuration

Chart Visualizer

Installed By Default

Chart Visualizer

Figure 3 - The Chart Visualizer

The Chart Visualizer uses the settings you configure to render a Chart based on the results of the query. Administrators can configure various settings, which are detailed below:

Chart Type
The type of chart that will be rendered:
Horizontal Bar Chart
A Bar Chart with bars stretching from left to right
Vertical Column Chart
A Bar Chart with bars stretching from bottom to top
Note that the X-Axis Title and Y-Axis Title settings still refer to the Horizontal and Vertical axes (respectively), no matter what value this setting has.
Width/Height
Set the width and height of the produced chart in pixels
X-Axis Title
The title to be displayed along the X-Axis (Horizontal) of the chart
Y-Axis Title
The title to be displayed along the Y-Axis (Vertical) of the chart
Bar Name Column
The name of the column in the produced dataset that will be used as the name of each bar in the chart
Bar Value Column
The name of the column in the produced dataset that will be used to determine the height of each bar in the chart
Bar Color Mode
The way in which the color of each bar will be determined:
One Color for every Bar
Every bar has the same color
One Color per Bar
The color of each bar is given by a column in the dataset
Bar Color (Visible if One Color for every Bar is selected)
The color to use for the bars in the chart
Bar Color Column (Visible if One Color per Bar is selected)
The name of the column containing the color for each bar in the chart
Chart Visualizer Settings

Figure 4 - The Chart Visualizer Settings page