Bar Chart Line 2

Qubes 10.0 Bar Chart Line 2 graphic component.

Properties

PropertyDescription
AxisFormatData-axis display format (numeric, date).
You can also define your format in greater detail (such as '%.2f', ¤mm/dd/yyyy, etc.).
AxisMaxMaximum value of the y-axis.
AxisMinMinimum value of the y-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.
LabelFormatFormat the labels displayed. auto autodetect the type of label displayed. You can define your format like ¤mm/dd/yyyy to format the labels as dates.
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.
SeriesAxisSeries anchor axis: left or right.
SeriesColorsGraphic elements of the series.
SeriesModesSeries display mode (line, line stacked, bar, bar stacked or bar grouped). bar 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.
StyleAdvanced and optional style properties for the graph. When specified, it must be a list of keys and values. Learn more about its syntax and possibilities at Graph Style Property.
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

Returns a String which is an encapsulated JSON Object with the data of the last clicked bar or line.
The encapsulated JSON contains :

  • color: String, color of the bar / curve;
  • seriesIndex: Integer, index of the series starting from 0;
  • seriesName: String, name of the series;
  • value: Float, value of the bar / point of the curve;
  • valueIndex: Integer, index of the value starting from 0;

Remarks

Syntax of Colors: color [opacity][;[pointSize] [pointColor];[barOutlineColor][;areaUnderCurveColor;[barSize]].
Colors must be in hexadecimal.

For AxisFormat, SeriesAxis, SeriesModes and SeriesColors if a single value is entered, it will be applied to all of the graph's series.
To specify different values for the different series, you will need to provide a list containing a value for each series.

For SeriesModes, only the first mode by type of display (line or bar) will be interpreted.
So List("bar stacked", "line", "line grouped", "bar grouped") will be equivalent to List("bar stacked", "line", "line", "bar stacked").

If the graph is located inside layers whose Visible property is dynamic, it is recommended to set the graph's Enabled to false to avoid undesired behaviour with mouse events.

To use Unix Time Stamp with milliseconds (that can be obtained with UnixTimeMsec), your value needs to be decimal where the decimals are the milliseconds of your value. (For example : UnixTimeMsec() which returns 1632150863281 has to be 1632150863.281 for the component).

If you want to force a line return in the labels, you have to add <br> inside your String.

It is possible to zoom in on the graph.
To do that, simply select the area on which you want to zoom. To revert it to its original size, click anywhere in the graph.

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

The only supported fonts currently are : "Arial", "Balto", "Courier New", "Droid Sans", "Droid Serif", "Droid Sans Mono", "Gravitas One", "Old Standard TT", "Open Sans", "Overpass", "PT Sans Narrow", "Raleway", "Times New Roman". Any other font applied to this component will be interpreted as "Times New Roman".

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

Examples

The following settings were defined to generate the above chart:

  • To indicate axis' format: 
AxisFormat=List("%.0f Units", "%.2f %")
  • To indicate axis' max: 
AxisFormat=List(20000, 100)
  • To format the labels as dates: 
LabelFormat=¤mm/yyyy
  • To set the left axis for the bars and the right axis for the curve: 
SeriesAxis=List("left", "left", "right")
  • To specify the colors of the three series: 
SeriesColors=List('#fa2d4c 0.8', '#4863FF 0.6', '#FF8700;8 #09D1B7;;#ffc78780')
  • To display the two first series as stacked bars and the third as a curve: 
SeriesMode=List('bar stacked', 'bar stacked', 'line')
  • To define the series' names : 
SeriesNames=List('Factory A', 'Factory B', 'Productivity')
  • The component was left to use its own integrated legend:
    Here the graph is centered. 
Legend=auto
  • The component style wasn't modified: 
Style=''
  • The series data defined: 
Data=List(List(2490, 8180, 8400, 4405, 6800, 7250, 9120, 5620),
          '-', List(3500, 4810, 7500, 5805, 3400, 8420, 6380, 8410),
          '-', List(29.95, 64.95, 79.5, 51.05, 51, 78.35, 77.5, 70.15)
     )
  • The series data labels defined: 
DataLabels=List(43719, 43892, 44065, 44238, 44411, 44584, 44757, 44930)

Classification

Graphs and Curves