Reporting software is most frequently used to display data in a tabular format. Integrating charts with report output allows us to quickly get an idea of trends and relations before reading and analyzing data encapsulated in numerous rows and cells of the report table. "Data visualization" is the best way to describe the role of charts in report output. This article is about how we integrated charting in the Arnica WebReport product.
As a reporting tool, Arnica WebReport (http://www.arnicasoftware.com/products/reporting-software/overview.aspx) excels in connecting to various data sources (major databases, XML sources, web services, etc.), post-processing data by applying filters, data grouping, aggregate calculations, business rules, and then generating great-looking HTML output or exporting data to Excel, XML, CSV, PDF, etc.
To facilitate chart output, WebReport provides templates for creating data feeds (or in other words: serialized output), which serve as a source of data for a particular charting component. The data feed format is set by designers and can be anything: XML, JSON, comma-delimited set of values, line-feed separated textual output, or any other format. Various charting components require their own specific formats of serialized data, and WebReport has a specialized service to generate such output.
One of specific features of an HTML-based reporting tool is that most of the processing is done on the server, while the browser only interprets and displays data in a certain way. To display a chart, the traditional technique has always been to generate GIF, JPEG or PNG binary output (on the server), send it to the browser as a binary stream via HTTP, and display using <img> element integrated within the page. This solution is often considered the "lowest common denominator" approach to producing a chart, because it is compatible with virtually any browser, even their 10-year-old versions, however, its static presentation nature is no longer appealing to demanding users.
The next generation of charting in HTML reports relies on Adobe Flash (or Microsoft Silverlight) to render the presentation, while the server side reporting component sends a data stream to the client-side Flash object. Feature-rich dynamics and interactivity of the Flash presentation bring charting in HTML-based reports to the next level.
The latest trend in charting is to use HTML5/JavaScript-based solutions, which allows implementing many visual and interactive effects previously available only in Flash-based solutions. HTML5 charts are 100% browser-based, they depend only on integral browser features, and work great with browsers capable of processing HTML5, such as Internet Explorer 9, FireFox, Chrome, Safari, Opera, Android 3, iPhone 4 browser, iPAD, and others.
Arnica WebReport does not restrict developers to using any particular charting technology: it can support both static graphics, Flash, and HTML charting solutions and interface with charting components deployed either on a local server, or hosted on a private or public cloud (for example Google Charts). This is made possible by providing open templates per chart, which, in turn, allow specifying both serialization patterns and in-page integration HTML code. This way, a single report may include multiple charts, each implemented using different techniques.
Arnica WebReport also includes a built-in charting engine, which generates great-looking interactive HTML5 and Flash charts, ensuring superior user experience when used either embedded within HTML report pages or integrated in business intelligence analytical dashboards. However, we did not assume that built-in WebReport charts will always be a developers's first choice and thus included capabilities for integrating WebReport with other charting components and services, e.g. with FusionCharts deployed on a local web server, or within a private cloud infrastructure, or with Google Charts accessible from a public cloud, etc. When using third party charting components, developers have to figure out the proper serialization pattern required by the component and adjust the row serialization template for that particular chart.
For example, if the following data set is required by a particular charting component:
month:Jan|amount:11.22;month:Feb|amount:22.33;month:Mar|amount:44.55
it may be implemented using the following row item serialization template specified within WebReport chart definition page at design time:
month:<%sourcedata.monthstring%>|amount:<%oServer.oSystem.ConvertToString(sourcedata.salesamount)%>;
Below are examples of Arnica WebReport output which uses built-in HTML5 charting engine, integrated with the body of the page together with tabular data:
These examples could be explored live from Arnica Software demo site: