Custom Control: Bargraph Horizontal

A bargraph is a display method that uses a scale for the magnitude of a signal, where the length of a bar changes with the magnitude of the signal.

To give you as many variation possibilities as possible, we have once the Bargraph "BargraphLFill", where the fill bar moves from left to right. Or the bar graph "BargraphRFill", here the idea is that you can work with a color gradient, for example, to symbolize temperatures if required. Here the Bargraph simply moves from right to left and reveals a color gradient, as in this example.

BargraphLFill

Fill bar moves from left to right

Custom Control: BargraphLFill - fill bar moves from left to right

Custom Control: BargraphLFill - fill bar moves from left to right

BargraphRFill

Fill bar moves from right to left

Custom Control: BargraphRFill - fill bar moves from right to left

Custom Control: BargraphRFill - fill bar moves from right to left

SVG elements

id = "thumb"

  • The id "thumb" must be assigned a group or object
  • This defines the center of the bar chart

id = "barPath"

  • Must be a "rect" (SVG) object!
  • barPath defines the boundaries in which the barFill can move
  • It can be used as a transparent element (to define only the borders)

id = "barLFill"

  • Is the graphical representation of a variable value. It ranges from the minimum defined value to the current variable value and fills the space between these two points from right to left

id = "barRFill

  • Similar to barLFill it fills the space between 2 points but from left to right
  • This can be used to make an underlying gradient visible, for example to represent a temperature.

Conclusion

The main elements "thumb" and "barPath" are essential, the element "barFill" is optional.