The clean look and informativeness of inline report charts (also known as sparklines) are the main reasons for their popularity in HTML reporting. Implementation of an inline chart solution, however, is often a very code-intensive exercise. In this article I will demonstrate how inline charts may be implemented with only a few lines of code added to report cell definition.
The report with inline charts in our example was built with the Arnica WebReport tool; the report presents a product list and includes a chart in each row, displaying year-to-date sales trend:
In order to implement this presentation, we created two reports:
- Product list report, and
- Sales trend report.
The first (parent) report presents a list of products by row - this is the report we see in the screenshot above. The last column of this report (YTD Sales Trend) is configured at design time to make a web request against the second report and get binary image of the chart.
The second (child) report defines the chart as a single-line chart, producing output based on sales data in Y axis against month in the X axis. The report accepts product identifier as a parameter, so sales data is filtered by the specified product.
A different product identifier is sent via each web request to the second report since the product is different in each row of the parent report. Thus, a single instance of the parent report engages multiple concurrent instances of the child report, obtaining the chart for each row in real-time. Because of fast data processing speed and low latency of the Arnica WebReport engine, the entire report with inline charts comes up within a few seconds. This may be tested live from Arnica Software demo site using the link specified above. This example runs on commodity-grade servers and, in our tests, produces results in 3 seconds on average (your test results may vary depending on your internet connection speed).
To have the parent report show the chart image generated by the child report, we created a custom column in the parent report using tools available from design-time report properties page:
Content of this custom column is based on the template, highlighted at the bottom of the screenshot below:
Thus, all it takes to incorporate a chart into a report cell is to configure an HTML image element using <img> tag with image source pointing to Arnica WebReport web service, which invokes the child report. Child report generates chart output filtered by the product identifer parameter.
Child report may be tested independently from parent report, before integrating them in one solution.
Other blog articles describing how charts are created with Arnica WebReport may be accessed using the following links:
... or explored from Arnica Software demo site: