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.
Installed By Default
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.
Installed By Default
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.
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
Installed By Default
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
Figure 4 - The Chart Visualizer Settings page