JSignage:Graph:Gauge styling attributes

From SpinetiX Support Wiki

Jump to: navigation, search

This page is related to gauge styling attributes of jSignage Graph API.

Introduction

Both linear gauges and circular gauges can be styled using the styling attributes and objects common to all graph layers. Furthermore, there are two elements that are specific only to gauges: indicator and thresholds bar. The styling objects associated with these elements are detailed below.

Indicator styling

A gauge indicator points to the position of the current value on the gauge main axis. Typically, it has an elongated form with larger length than width. In its width it is centered on the value and symmetrical around it. In its length it has a "tip" on the side closest to the axis and a "back" on the other side.

A gauge indicator can be styled using an indicator styling object.

Indicator styling object

An indicator styling object is a plain object with the following attributes:

  • back
    Type: Plain Object.
    Configuration of the back shape of a needle indicator, with the following properties:
    • inversed
      Type: Boolean. Default: false.
      If true the back tip shape is inversed, extending inwards instead of outwards.
    • length
      Type: String or Number. Default: '25%'.
      Length of the back part of the needle, which extends behind the indicator, as a number of pixels or percentage of the needle length.
    • shape
      Type: String. Default: 'straight'.
      Shape of the back tip of the needle; it can be 'sharp' for a pointy shape, 'round' for a rounded shape or 'cut' for a straight line shape.
    • size
      Type: Number. Default: half of back width.
      Back tip size for non straight back tips.
    • width
      Type: String or Number. Default: Selected so that the back, tip and center point of the needle are aligned.
      Width of the needle at the back, as a number of pixels or percentage of indicator's width.
  • button
    Type: Plain Object. Default: null, except for indicator in the central position on a circular gauge.
    Button circle configuration object, with the following properties:
  • color
    Type: Color. Default: '#888'.
    Fill color of the indicator.
  • length
    Type: Number.
    Indicator length as a number of pixel or percentage of default length. The default length depends on the indicator position. For circular gauges at center position it is the distance from center to the inner side of the bar. For other positions it is the bar width.
  • offset
    Type: String or Number. Default: 0.
    Offset from selected reference position in the length direction, as a number of pixels or percentage of default length.
  • placement
    Type: String. Default: 'outside'.
    Side of the selected position where the indicator is drawn, where relevant, i.e not in the 'bar' and 'center' positions. Possible values: 'inside' or 'outside'.
  • position
    Type: String.
    Indicator reference position, one of:
    • 'in' on the inner axis or inner side of bar for a circular gauge
    • 'out' on the outer axis or outer side of bar for a circular gauge
    • 'center' from the circle center to the inner axis or inner side of bar for a circular gauge
    • 'left' on the left side of the axis or bar for a vertical gauge.
    • 'right' on the right side of the axis or bar for a vertical gauge.
    • 'top' on the up side of the axis or bar for a vertical gauge.
    • 'bottom' on the down side of the axis or bar for a vertical gauge.
    • 'bar' centered on the bar for all bar gauges.
  • shape
    Type: String.
    Shape of indicator, one of: 'rect' (rectangular shape), 'ellipse' (ellipse or circle shape), 'triangle', 'arrow' or 'needle'.
  • strokeStyle
    Type: Plain Object. Default: null (no stroke).
    Stroke styling object.
  • tip
    Type: Plain Object.
    Configuration of the tip shape of a needle indicator, with the following properties:
    • shape
      Type: String. Default: 'sharp'.
      Tip shape, one of 'sharp' for a pointy tip, 'round' for a rounded tip or 'cut' for a straight line.
    • size
      Type: Number. Default: half of tip width.
      Tip size for non straight tips.
    • width
      Type: String or Number. Default: 0.
      Width of the needle at the tip, as a number of pixels or percentage of indicator's width.
  • width
    Type: Number.
    Indicator width as a number of pixel or percentage of default width. The default width is the indicator length, except for needle shapes or indicators in a central position on a circular gauge where it is 10% of length and needle shapes on a linear gauge where it is 20% of length.

Thresholds bar styling

A thresholds bar indicates the position of configurable threshold values alongside an axis. Each segment of the bar maps to a range of values and can have its own color, start size and end size. Besides being filled with one solid color per segment, the thresholds bar can also be filled with a gradient (parallel to the gauge axis).

  • If the end and start size are equal, the segment is drawn as a rectangle for linear gauges, respectively an arc for circular gauges, otherwise the segment is drawn as a triangle or trapezoid for linear gauges, respectively a spiral for circular gauges.
  • To create a "LED" effect, the thresholds bar can drawn as discontinuous color patches instead of continuous segments.
  • The thresholds values are referring to the range of values of the axis that is on the same side of the chart as the thresholds bar in case there is an alternative axis and it is on the opposite side of the main axis.

A gauge thresholds bar can be styled using a thresholds bar styling object.

Thresholds bar styling object

A thresholds bar styling object is a plain object with the following attributes:

  • endSize
    Type: Number. Default: size.
    Size at the end of the thresholds bar.
  • fill
    Type: String. Default: 'solid'.
    Type of segment fill, either 'solid' or 'gradient'.
  • offset
    Type: String or Number.
    Offset from the selected position in pixel or percentage of layer size.
  • position
    Type: String. Default: 'center'.
    The position where the thresholds bar is drawn. Depending on the type of gauge, it can take one of the following values:
    • 'left' or 'right' - to draw on the left / right side of a vertical gauge;
    • 'top' or 'bottom' to draw on the up / down side of a horizontal gauge;
    • 'in' or 'out' to draw on the inner / outer side of a circular gauge;
    • 'center' to draw inside the gauge bar (applies to all types).
  • size
    Type: String or Number. Default: '10%' for side thresholds , '100%' for thresholds inside the gauge bar.
    Bar width as a number of pixels or percentage of layer size for side thresholds or percentage of bar width for thresholds inside the gauge bar.
    This parameter is ignored if both startSize and endSize are specified.
  • startSize
    Type: Number. Default: size.
    Size at the start of the thresholds bar.
  • step
    Type: Number. Default: 0 (draw continuous segments).
    Spacing of color patches.
  • stepSize
    Type: Number. Default: 0.85.
    Relative width of color patches between 0 and 1.
  • zones
    Type: Array.<Plain Object>.
    Array of zone description objects, each with the following attributes:
    • color
      Type: Color. Default: 'red'.
      Fill color of the segment. This parameter is ignored if both startColor and endColor are specified.
    • endColor
      Type: Color. Default: start color of the next segment.
      If the fill is a gradient, this is the color at the end of the segment.
    • endSize
      Type: Number. Default: according to startSize and endSize properties of the thresholds bar object.
      Width at the end of the segment.
    • 'from'
      Type: Number. Default: the 'to' attribute of the previous zone.
      Start of the value range this segment maps to.
    • startColor
      Type: Color. Default: color
      If the fill is a gradient, this is the color at the start of the segment.
    • startSize
      Type: Number. Default: according to startSize and endSize properties of the thresholds bar object.
      Width at the start of the segment.
    • 'to'
      Type: Number. Default: 'from' property of the next zone.
      End of the value range this segment maps to.
Retrieved from "https://support.spinetix.com/w/index.php?title=JSignage:Graph:Gauge_styling_attributes&oldid=9047"
This page was last modified on 20 February 2015, at 12:46.