How to integrate report with Google Chart

KB Artcile # 2830

Arnica WebReport allows creating charts with virtually any contemporary chart engine. Embedded in WebReport, HTML5 and Flash charting capabilities provide "out-of-the-box" solutions for creating charts against data derived by the report; depending on the existing environment developers might also consider using an alternative chart engine. This article focuses on how to use cloud-based Google Chart engine as an example of a third party charting solution, which can be successfully integrated into reports created by Arnica WebReport.

In this exmple, Arnica WebReport implements the query, data extraction, filtering, sorting, tabular presentation formatting and other data processing and presentation tasks. Google Chart engine accepts data feed from the report, generates a binary chart image and returns it to the report engine; the report then relays the chart image to the chart container web page, managed by the report. The bar chart API used in this example is documented on the Google web site at: http://code.google.com/apis/chart/image/docs/gallery/bar_charts.html

We composed this API pattern using the Google chart wizard tool, picking various presentation properties, and then making final adjustments in accordance with Google Chart documentation to achieve the desired presentation output.

The next step is to enter chart definition properties, using Arnica WebReport Administrator, starting with creating a new chart:

Columns, which provide values for the axis, must be selected on the chart properties page. For each column used by the chart there should be a certain serialization pattern. In our example, Google Chart require data serialized with the following value separators: comma (",") symbol for Y axis values, and pipe ("|") symbol for X axis values - these symbols are used to formulate the serialization patterns.

Next, we should put together a URL, which constitutes a web request call to Google API. The URL will reference WebReport run-time properties, which carry serialized data for selected columns. However, the length of this URL will be too large to view within a single-line text field, so instead we insert an intermediate reference to a custom run-time property oServer.oContainer.cRequestTarget, and then this property will be programmed to get its value through a multi-line condition script.

The screen shot above highlights the custom property, which will carry the value of the URL. This custom property was defined in the chart condition script (also highlighted in the screenshot). The script builds the value of the URL line by line:

Finally, because the chart itself is generated as binary content displayed by the <img> element of the chart container page, the chart definition should have the Response Type property set to "Binary Output":

This article reviewed how a third party charting engine (public cloud-based Google Chart) may be integrated with Arnica WebReport to create a custom data-visualization solution. Use of a third party charting engine is optional in Arnica WebReport; its embedded HTML5 and Flash charting engine provides ready-to-use technologies for creating great looking charts, which may be used in many scenarios (dashboards, stand-alone charts, charts combined with tabular data, charts on portal-generated pages, etc.). The openness of the WebReport architecture provides users with the ability to use other chart engines, depending on the desired functionality or expertise of a specific development team. A single report may be designed to use various chart engines at the same time.

Examples of reports using Arnica WebReport embedded chart engine are available from the Arnica demo site: