General Interface is an open source project hosted by the Dojo Foundation

Introduction to Charts

A General Interface application can include charts for visualizing data. Relationships and trends in data sets are often easier to communicate in a chart than in other two-dimensional components, such as matrix views. Like Matrix components, charts display CDF data. Data can originate from any XML data source.

The charting features in General Interface are available in the Charting Add-in, which must be enabled in your project. For more information, see Enabling the Charting Add-in.

You can build rich and dynamic charts by using prototype components, customizing default properties, and adding child objects as needed. Components are provided for most common chart types, including bar, column, area, line, pie, doughnut, scatter, and bubble. Prototype components are useful for building individual charts, and also for building libraries of customized components. For example, a developer can save a customized prototype component that defines a standard look and feel for all charts of a certain type.

Like all General Interface objects, charts are configured using properties and events. Properties allow you to specify layout, fill colors, transparency, and many other characteristics. Events allow a user to trigger a JavaScript event by clicking a chart component. Chart appearance and behavior can be modified at runtime, in response to user input or data changes.

The following General Interface features are especially useful for building and displaying charts:

  • At development time, the look and feel of a chart can be configured using visual properties, significantly reducing development time.
  • Chart prototype objects accelerate the process of building, modifying, and testing charts.
  • At runtime, chart images are generated on the client rather than the server, reducing server and network load.

For more information on charting properties and events, see Charting Components.

Basic Elements

All charts share a common set of basic building block.

The next figure shows a bar chart, which displays data in horizontal bars. The chart compares productivity by month for two data sets, Group A and Group B. In a chart, a data set like Group B is called a series. Each chart must include at least one series.

A bar chart is one example of a Cartesian chart. Cartesian charts display data on an x-y plane, with the x-axis defining the horizontal dimension and the y-axis defining the vertical dimension. An axis can be linear, category, or logarithmic. For axis definitions, see Configuring Axes.

Radial charts display data in radial coordinates, rather than x-y coordinates and do not have axes. General Interface Builder provides prototypes for both Cartesian and radial charts.

Charting Component Library

The Charting component library, which is a General Interface Builder add-in, contains prototype components for building charts. The Charting add-in must be enabled for the project. For more information, see Enabling the Charting Add-in.

As shown in the next figure, the Charting component library is organized into chart prototypes, other chart components, and data series:

  • Charting folder Contains one chart prototype component for each supported major and minor variation.
  • Components folder Contains components for most other chart building blocks, including axes, labels, grid lines, and legends.
  • Series folder Contains one data series prototype for each major chart variation.

Prototype Summaries

The Charting component library contains a prototype for each combination of major and minor chart variations. In the General Interface API, major variations correspond to the chart class and minor variations correspond to the type property.

This section summarizes each major variation and provides an example.

  • Area displays the trend of values over series or categories. By displaying the sum of the plotted values (stacked and stacked 100%), an area chart also shows the relationship of parts to a whole. An area chart is similar to a line chart, with the area below each line filled in.
  • Bar compares values across categories (clustered), shows the relationship of individual items to the whole (stacked), or compares the percentage each value contributes to a total across categories (stacked 100%).
  • Column compares values across categories (clustered), shows the relationship of individual items to the whole (stacked), or compares the percentage each value contributes to a total across categories (stacked 100%).
  • Line represents data as a series of points connected by a continuous line, with optional markers displayed at each data point.
  • Plot represents data as a series of points, each with one value that determines its position along the x-axis, and one value that determines its position along the y-axis. Point charts are useful for presenting scientific data.

    Bubble charts are a variation, where the data points are represented by variable-size markers. Magnitude is shown by category, rather than by series.
  • Pie shows the size of each data point in a single data series, proportional to the sum of the data points (pie). A pie chart is useful for showing proportions and emphasizing a significant element in the data.

    Doughnut charts are a variation, with more than one data series represented. A doughnut chart is useful for comparing proportions among multiple data series.

Contents

Searching General Interface Docs

Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.