Charting Framework Component Design

Metaphor: Charting Framework

A modular framework for easy development of charts to represent different data structures. The transformation of input data should be as dynamic as possible to allow an easy expansion of functionality. The representation of data has to be interactiv and dynamic (live visualization).

User application

The user application creates and configures a concrete chart, links its user application data to the chart for displaying.

Chart

Each concrete chart receives application data from the user application, which it filters and converts to shapes for display on the canvas. It handles the user input notifications that it receives from the canvas and modifies the shapes accordingly.

Canvas

The canvas provides the means for the efficient drawing of and the basic interaction with shapes on an infinite real plane. A view on that plane can be specified and will be rendered as image. The dimensions of the view are specified in units of the user application data and will be transformed to screen coordinates by the canvas. It provides notifications on user input like mouse clicks, mouse movements and keyboard input such that the chart can react to them and modify the shapes accordingly.

Application data

The data structures provided from the application. This data set may be changing over time and the Chart may react to the changes. So the chart can display live status of the output.

Chart-specific data structures

The chart specific data structures describe the data to be displayed on the chart. That includes the actual user application data to be visualized as well as visual properties like colors or line widths.

Shapes

Shapes can be defined by the user of the canvas. Shapes “know” how to draw themselves. There can be primitive shapes like lines and circles as well as composite shapes that consist of other shapes. Complex “controls” like scroll bars, legends and coordinate planes can be defined as composite shapes. Shapes have a z-order, which is required for drawing the shapes in the correct order and for invalidation.

Filter

The filtering of the application data: so the application supports a bunch of data but the line chart only needs a subset of this data and if you want to visualize the same data in a point matrix chart, you may need an other part of data (or for example only every second point,..)

Preprocess

Preprocess is the process of converting the (maybe filtered) user application data into chart specific data structures (e.g. converting some points into a matrix for more performant oparations to create the shapes)

Interactions and events

Examples for user interactions on the canvas:

• Drag and Drop of Shapes
• Zooming, panning
• Draw new shapes
• mouseover over shapes
• selecting shapes

These events will be submitted to the chart engine which will decide how to react on specific interactions because this may vary in the different charts.