Graph

A graph is a rectangular area within a figure that contains axes, plots, cursors and annotations. Within a figure, graphs are aligned in a grid-like (table-like) arrangement as described in the article on layout.

Properties

• name: KontrastName

  The name of the graph. The name has to be unique within the figure the graph belongs to. The name must not be empty and must not contain a dot, colon, semicolon or a hash (#). The name defaults to graphN, where N is a non-negative integer. We recommend you choose a meaningful name for each graph, so that it can be easily accessed via the development console or the Kontrast menu.

• verticalAlignment: KontrastNumber (default value: 0)

  The vertical alignment of the graph within the space reserved by the layout.

• horizontalAlignment: KontrastNumber (default value: 0)

  The horizontal alignment of the graph within the space reserved by the layout.

• column: KontrastInteger (default value: 0)

  The column index.

  Example: Multiple graphs in one figure

• row: KontrastInteger (default value: 0)

  The row index.

  Example: Multiple graphs in one figure

• hidden: KontrastBoolean (default value: false)

  Whether the graph and all its content is hidden. Note that a hidden graph still takes up space according to the rules of the layout algorithm.

• excludeFromLayout: KontrastBoolean (default value: false)

  Whether the graph is omitted from the layout algorithm. If set to true, the graph is also hidden, since no space is allotted to the graph.

• zones: Collection of KontrastZone

  A collection of all zones within the graph. The object keys are the names of the zones.

• aspectRatio: KontrastAspectRatio (default value: 'arbitrary')

  The aspect ratio (width divided by height) of the graph. The value can be a number to specify a fixed aspect ratio. Moreover, mathematical expression strings are numerically evaluated, such as '16 / 9'. If you specify the string 'arbitrary', Kontrast determines a suitable aspect ratio automatically. In this case, the aspect ratio is derived from the size of the figure and the placement of other graphs.

  Example: Aspect ratio of graphs

• alpha: KontrastNumber (default value: 0)

  The first angle by which the graph is rotated.

• beta: KontrastNumber (default value: 0)

  The second angle by which the graph is rotated.

• gamma: KontrastNumber (default value: 0)

  The third angle by which the graph is rotated.

• cubeScale: KontrastNumber (default value: 1)

  A factor (between zero and one) that is used to scale the unit cube. For normal two-dimensional graphs that are not meant to be rotated, the default value of one is useful, as there is no need to scale-down the graph. When rotating a two-dimensional graph along the screen normal, a value of 1 / Math.sqrt(2) is useful. For freely rotating three-dimensional graphs a value of 1 / Math.sqrt(3) makes sense.

  See also: 3D graph layout

• zoneWidthLeft: KontrastNumber (default value: 0)

  The minimum width in pixels of the left zones.

• zoneWidthRight: KontrastNumber (default value: 0)

  The minimum width in pixels of the right zones.

• zoneWidthBottom: KontrastNumber (default value: 0)

  The minimum width in pixels of the bottom zones.

• zoneWidthTop: KontrastNumber (default value: 0)

  The minimum width in pixels of the top zones.

• interactionMode: KontrastSelection (default value: 'pan', possible values: 'pan', 'rotate')

  Determines how mouse interactions are interpreted. Possible values are pan (which means that spatial axes are shifted) and rotate, where the alpha, beta and gamma properties are changed to rotate the view of the graph.

  Example: 3D coordinate system

• allowShift: KontrastBoolean (default value: true)

  When set to true, the axes within the graph can be shifted by user input (keyboard, mouse, touch pad).

• allowZoom: KontrastBoolean (default value: true)

  When set to true, the axes within the graph can be zoomed in/zoomed out by user input (keyboard, mouse, touch pad).

• allowRotate: KontrastBoolean (default value: true)

  When set to true, the graph can be rotated by user input (keyboard, mouse, touch pad).

Axes

The following functions and properties manage the axes of the graph object.

Functions

• showEverything()
  Set the minimum and maximum value of all axes so that all valid data points used in plots associated with the graph are within the (min to max) range of each axis.
  Example: Show all data within a graph
• captureView()
  When this function is called, the minimum and maximum value of all axes as well as the 3D rotation (the angles alpha, beta and gamma) are stored internally. This allows users to later restore the captured view.
  Example: Capture the view of a graph
• restoreView()
  Restore the most recently captured view.
  Example: Capture the view of a graph

The following functions create/destroy axes (see the axis documentation for details). Note that a direct assignment of the graphs object is a shortcut to create axes (See tutorial).

• createAbscissa(options: object): KontrastAbscissa
  Create an abscissa and set its properties according to the specified options.
• destroyAbscissa(name: string)
  Destroy the abscissa specified by its name.
• createOrdinate(options: object): KontrastOrdinate
  Create an ordinate and set its properties according to the specified options.
• destroyOrdinate(name: string)
  Destroy the ordinate specified by its name.
• createApplicate(options: object): KontrastApplicate
  Create an applicate and set its properties according to the specified options.
• destroyApplicate(name: string)
  Destroy the applicate specified by its name.
• createColorAxis(options: object): KontrastColorAxis
  Create a color axis and set its properties according to the specified options.
• destroyColorAxis(name: string)
  Destroy the color axis specified by its name.
• createOpacityAxis(options: object): KontrastOpacityAxis
  Create an opacity axis and set its properties according to the specified options.
• destroyOpacityAxis(name: string)
  Destroy the opacity axis specified by its name.
• createThicknessAxis(options: object): KontrastThicknessAxis
  Create a thickness axis and set its properties according to the specified options.
• destroyThicknessAxis(name: string)
  Destroy the thickness axis specified by its name.

Properties

• abscissae: Collection of KontrastAbscissa
• ordinates: Collection of KontrastOrdinate
• applicates: Collection of KontrastApplicate
• colorAxes: Collection of KontrastColorAxis
• opacityAxes: Collection of KontrastOpacityAxis
• thicknessAxes: Collection of KontrastThicknessAxis

Plots

The following functions and properties deal with plots.

Functions

• createPoints(options: object): KontrastPoints
  Create a points-plot and set its properties according to the specified options.
• destroyPoints(name: string)
  Destroy a points-plot specified by its name.
• createLines(options: object): KontrastLines
  Create a lines-plot and set its properties according to the specified options.
• destroyLines(name: string)
  Destroy a lines-plot specified by its name.
• createBars(options: object): KontrastBars
  Create a bar-plot and set its properties according to the specified options.
• destroyBars(name: string)
  Destroy a bar-plot specified by its name.
• createPixels(options: object): KontrastPixels
  Create a pixels-plot and set its properties according to the specified options.
• destroyPixels(name: string)
  Destroy a pixels-plot specified by its name.
• createTiles(options: object): KontrastTiles
  Create a tiles-plot and set its properties according to the specified options.
• destroyTiles(name: string)
  Destroy a tiles-plot specified by its name.
• createCubes(options: object): KontrastCubes
  Create a tiles-cubes and set its properties according to the specified options.
• destroyCubes(name: string)
  Destroy a tiles-cubes specified by its name.

Properties

• points: Collection of KontrastPoints
• lines: Collection of KontrastLines
• bars: Collection of KontrastBars
• pixels: Collection of KontrastPixels
• tiles: Collection of KontrastTiles
• cubes: Collection of KontrastCubes

Cursors

Cursors are similar to a point or line plot. The crucial difference is that users can move the individual data points of a cursor interactively with their mouse/touch device. This allows to program interactive visualizations where the users can interactively select, for example, certain ranges within a data set.

Functions

• createCursor(options: object): KontrastCursor
  Create a cursor and set its properties according to the specified options.
• destroyCursor(name: string)
  Destroy the cursor specified by its name.

Properties

• cursors: Collection of KontrastCursor

  A collection of all cursors within the graph. The object keys are the names of the cursors.

Annotations

Annotations are boxes of (HTML-)text. They can be used as title, legend or panel captions (the a, b, c, … captions on graphs as in Example: Multiple graphs in one figure).

Functions

• createAnnotation(name: string)
  Destroy an annotation specified by its name.
• destroyAnnotation(name: string)
  Destroy the annotation specified by its name.

Properties

• annotations: Collection of KontrastAnnotation

  A collection of all annotations within the graph. The object keys are the names of the annotations.

Zones

You can specify the minimum left, right, top and bottom margin of each zone within a graph by accessing the 'zones' collection. The following margin properties are available for the 'inside', 'left', 'right', 'top' and 'bottom' zone:

• minMarginLeft: KontrastNumber (default value: 0)

  The minimum left margin in pixels.

• minMarginRight: KontrastNumber (default value: 0)

  The minimum right margin in pixels.

• minMarginTop: KontrastNumber (default value: 0)

  The minimum top margin in pixels.

• minMarginBottom: KontrastNumber (default value: 0)

  The minimum bottom margin in pixels.

Examples

• Aspect ratio of graphs
• Capture the view of a graph
• Graph layout with stretch factors
• Graph titles
• Multiple graphs in one figure
• Show all data within a graph