HTML5 Viewer Enrichment

We're really excited about the ActiveReports 11 Service Pack 1 release. I think you'll like what we've done to improve the HTML5 viewer. In addition to adding user-requested tweaks and fixes, we've added several brand new features: SVG rendering, frozen row and column headers, and chart tooltips. Here are details on these features.

SVG Rendering

We now use Scalable Vector Graphics technology to render our charts in the HTML5 viewer. This keeps curves smooth and angles sharp, even when you zoom in. Chart zoom before and after Click to see the dramatic improvement at high zoom levels.

Improved Table and Tablix Rendering

We have also fixed an issue with cell borders in HTML5 that allows us to render our Table and Tablix controls with precise and crisp lines and corners. Tablix zoom before and after SVG Click to zoom in and see the difference.

Frozen Row and Column Headers

We added two new properties to Table and Tablix data regions that are supported in the HTML5 viewer: FrozenRows and FrozenColumns. These properties take a numeric value, but there are a couple of restrictions on the value you can enter.

  1. You can't enter a number higher than the number of header rows or columns in the data region.
  2. You can't enter a number that would split up any merged cells within the header row or column.

To illustrate how it works, first I'll show you the problem we're addressing with these properties. Here is what a Tablix looks like with the HTML5 viewer in Galley mode without setting the FrozenRows and FrozenColumns properties. No Frozen Headers Now we'll go back to the designer and set the FrozenRows property to 2, and the FrozenColumns property to 3. You can see that these are the only numbers that we can use for this Tablix based on the constraints I mentioned above. There are two header rows, but some of them are merged, so you can't use less than 2 for the value. Similarly, there are three header columns, but some of them merge all three columns, so you can't use less than 3. Frozen Rows Columns Design Time Here is how it looks at run time in the HTML5 viewer. Frozen Headers

Chart Tooltips

We've added a Tooltip property to the chart data series that allows you to enter an expression showing details about the data represented by each data point. You can also enter an expression for a Tooltip to display anywhere in the chart area. The first step to using this new feature is to open the Chart Data dialog. You can find the command in the Properties window. Property Window Chart Data Chart Data opens on the General tab. This Tooltip property is the one that displays a general tooltip when you hover anywhere in the chart. Here I've added the classic "Hello world!" string, but you can use any expression. Chart Data General Tab Here's how this looks in the HTML5 viewer at run time. Chart General Tooltip The real reason you want tooltips, though, is to show details for each data point. To do this, instead of the General tab, you use the Series Values tab. You can provide a tooltip for each series if you have more than one. Chart Data Series Tab I used this expression: 

="Sales: " & format(Sum(Fields!Sales.Value),"$#,##0")

Which automatically converts to this shorthand: 

="Sales: " & format(Sum([Sales]),"$#,##0")

Notice that I concatenated a static string ("Sales: ") with an expression that gets the sales value. The part of the expression in pink is what actually grabs the values, and the blue is what I added to format the number as currency. Now for the cool part. Here it is in the HTML5 viewer at run time. Chart Series Tooltips I'll be blogging about the other new features in ActiveReports 11 Service Pack 1. In the meantime, you can check them out yourself by downloading the latest build!

MESCIUS inc.

comments powered by Disqus