register log on
Knowledge base

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.

The example discussed in this article is available on the Arnica demo site at the following URL: The chart is generated when user clicks on the "Charts" icon and selects the chart "Support Incident Dynamics: New Incidents and Closed Incidents by Month" from the list: 

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:

Although the documentation provides all necessary information on how to compose a generic web service (REST) API call, the easiest way to start with Google Chart API analysis is to use its wizard tool:, and follow the API examples.

Google Chart wizard tool helps to express the desired chart presentation characteristics, and then suggests what the API should look like, e.g.:

To display the real chart corresponding to data in a report, all we need to do now is to feed proper data instead of the data specified in the example above.

The data feed is configured in Arnica WebReport design environment. In this article we review how to create the data feed. 

The API structure in the report chart example ("Support Incident Dynamics: New Incidents and Closed Incidents by Month"), has the following format:
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:

local cURL as string

cURL = '' 
cURL = cURL + 'chxl=0:|Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec&chxr=0,'
cURL = cURL + oData.oChartColumn.NewSupportIncidents.cMinValue + ','
cURL = cURL + oData.oChartColumn.NewSupportIncidents.cMaxValue + '|1,'
cURL = cURL + oData.oChartColumn.NewSupportIncidents.cMinValue + ',' 
cURL = cURL + oData.oChartColumn.NewSupportIncidents.cMaxValue
cURL = cURL + '&chxt=x,y&chs=850x350&cht=bvg&chco=3D7930,FF9900&chds='
cURL = cURL + oData.oChartColumn.NewSupportIncidents.cMinValue + ','
cURL = cURL + oData.oChartColumn.NewSupportIncidents.cMaxValue + ','
cURL = cURL + oData.oChartColumn.NewSupportIncidents.cMinValue + ','
cURL = cURL + oData.oChartColumn.NewSupportIncidents.cMaxValue
cURL = cURL + '&chd=t:' + oData.oChartColumn.NewSupportIncidents.cValueList + '|' 
cURL = cURL + oData.oChartColumn.ClosedSupportIncidents.cValueList
cURL = cURL + '&chdl=New+Support+Incidents|Closed+Support+Incidents&chdlp=t'

oServer.oContainer.AddProperty('cRequestTarget', cURL)

return '1'
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: