Bar Graph

 Qubes 6.1 Bar chart graphic component.

Properties

PropertyDescription
AxisFormatX-axis display format (see FormatFloat for more informations).
AxisMaxMaximum value of the x-axis.
AxisMinMinimum value of the x-axis.
DataList of numerical data associated with the data labels.
If there is more than one series, the lists of values for each series must be separated by at least one "-".
Empty and non-numerical values will be considered as 0s.
For each series, if there are more values than there are data labels, only the first values will be used. If there are fewer, a 0 will be assigned to the data labels with no values.
DataLabelsList of data labels.
EnabledBoolean indicating whether or not the component is enabled.
HintSpecifies the user hint string that will appear in the component's interactive help bubble.
LegendHow the legend is displayed. auto displays the legend inside the graph, according to standard formatting rules. "" displays no legend.
If you want the legend to be displayed in a legend component, you will need to indicate the name of that legend component.
SeriesColorsGraphic elements of the series. If there is more than one series, you will need to provide a list containing a value for each series.
SeriesModesHow the series are displayed (grouped | stacked). grouped is the default value.
SeriesNamesSeries name(s). If there is more than one series, you will need to provide a list containing a value for each series.
ValueInitialDetermines the component's initial value when the screen opens and each time it is reset (see Reset Button).
VisibleBoolean indicating whether or not the component will be visible.

Value

N/A

Remarks

Syntax for Colors: StartColor [EndColor] [opacity][;[BarOutlineColor];[BarSize]]
Example:

  • #000000 #FFFFFF 0.8;#AA0000. This will display a gradation from black to white, with an opacity of 0.8 and a color of #AA0000 for the bars' outlines.
  • #000000. This will display the bars in the series in black.
  • #000000 0.5. This will display the bars in the series in black, with an opacity of 0.5.

The position of the legend inside the graph is determined by the cell alignment.

This component does not require Internet access, but does need a browser that supports HTML5 Canvas. In practice, all modern browsers support it, except Internet Explorer 8 and below.

Examples

The following settings were defined to generate the above stacked graph:

  • To indicate series' names:
SeriesNames=List('1', '2')
  • To specify the colors of the two series:
SeriesColors=List('#8a9cff #8a9cff 0.9; #4863FF;; 2', '#ffa033 #ffa033 .7; #FF8700;; 2')
  • Axis are not formated:
AxisFormat=''
  • To define the display mode of the graph:
SeriesMode=stacked
  • To define the axis max :
AxisMax=150
  • The component was left to determine the axis min:
AxisMin=auto
  • The component was left to use its own integrated legend:
    Here the graph is justified to the right.
Legend=auto
  • The series data defined:
Data=List(List(54, 42, 22, 6, 80, 22, 76),
       '-', List(45, 87, 54, 76, 56, 54)
     )
  • The series data labels defined:
DataLabels=List('Monday','Tuesday','Wednesday','Thursday','Friday','Saturday')

Classification

Graphs and Curves