Line Chart 2

Qubes 9.0 Line chart 2 graphic component.

Properties

PropertyDescription
AxisXFormatX-axis display format (numeric or date).
You can also define your format in greater detail (such as '%.2f', ¤mm/dd/yyyy, etc.).
AxisXMaxMaximum value of the x-axis.
AxisXMinMinimum value of the x-axis.
AxisYFormatY-axis display format (numeric or date).
You can also define your format in greater detail (such as '%.2f', ¤mm/dd/yyyy, etc.).
AxisYMaxMaximum value of the y-axis. If a single value is entered, it will be applied to both the left and right axes.
To specify different values for the left and right axes, you will need to provide a list containing one value for the left axis and another for the right.
AxisYMinMinimum value of the y-axis. If a single value is entered, it will be applied to both the left and right axes.
To specify different values for the left and right axes, you will need to provide a list containing one value for the left axis and another for the right.
DataList of point coordinates (x,y) for the series.
If there is more than one series, the lists of values for each series must be separated by at least one "-".
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.
SeriesAxisSeries anchor axis: left, right, left-log or right-log. By adding -log, axis follows a logarithmic10 scale. 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.
SeriesColorsList of the series' colors in HTML format. If there is more than one series, you will need to provide a list containing a value for each series.
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

(Qubes 10.0)
Returns a String which is an encapsulated array of JSON Object with the data of the last position.
Each JSON contains :

  • curveColor: String, color of the curve;
  • pointIndex: Integer, index of the value starting from 0;
  • seriesIndex: Integer, index of the series starting from 0;
  • seriesName: String, name of the series;
  • xValue: Float or String, x-axis value of the point;
  • yValue: Float, y-axis value the point;

Remarks

If Legend=auto has been defined, the graphic component will contain its legend inside the cell.
In that case, the position of the legend inside the graph is defined by the cell alignment.

Date values must be among the following formats : Epoch Date Time (see Date/Time), ISO 8601 or Unix Time Stamp.

For AxisXMax, AxisXMin, AxisYMax and AxisYMin: if the axis manipulate date-type data, values must be in Unix Time Stamp format (see TimeSeries example for more information).

For Y axis which scale are set to logarithm, AxisYMax and AxisYMin will be interpretated as log10(value) (value must be positive).

You can't use a date-type date for both X and Y axis.

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 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.

The date displayed on the axis are user's locale equivalent.

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 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 graph:

  • To indicate that there are three series:
SeriesNames=List('A', 'B', 'C')
  • To indicate the vertical axes to which the three series are attached:
SeriesAxis=List('left', 'left', 'right-log')
  • To define the same minimum for both the left and right axes:
AxisYMin=0
  • To define different maximums for the left and right axes:
AxisYMax=List(100, 3)
  • To define the display formats for the left and right axes:
AxisYFormat=List('%.0f trans', '%.2f $')
  • The component was left to manage the x-axis, the series colors and its style:
AxisXMin=auto
AxisXMax=auto
AxisXFormat=auto
SeriesColors=auto
Style=''
  • The component was left to format the legend, but the text is centered in the cell, so the legend is on the top of the component:
Legend=auto
  • The series data were then defined:

'''Note that the three series' lists of coordinates are separated by a "-".
Also note that there is a break in the second series, because of the empty point ("", "").
Lastly, note that, in this case, a single list could also have been written, instead of a list of lists.
But, in general, each series' point coordinates are provided by separate input data or named ranges.

Data=List(List('0', '10', '1', '20', '4', '30', '6', '50'), 
       '-', List('1', '30', '2', '10', '', '', '3', '40', '6', '80'), 
       '-', List('0', '4', '1', '12', '2', '40', '4', '127', '6', '600')
     )

Classification

Graphs and Curves