Welcome   Charts   Advanced settings  
WelcomeChartsCharts exportRemote toolsRemote toolsWhat's new

All properties of the chart component can be edited at runtime. Therefore, three editors are available to easily change properties of the panes, series and annotation elements.

Panes editor
The panes editor dialog is commonly used to change the appearance of the panes. Properties such as global, background, bands, crosshair, legend, navigator, splitter, title, X-axis, Y-axis, X-grid, Y-grid, series and zoom control are all fully customizable to change the behavior and the look and feel of the chart viewer. You can show this dialog by selecting a pane in the treeview and clicking on the 'Setting the graph' button Chart settings on the chart toolbar or on the 'Setting the chart ...' line in the contextual menu.

Series editor
The series editor dialog is used to change the appearance of the series, and to change the calculation of the serie values. Properties such as global, chart type, crosshair, marker, serie, X-axis, Y-axis, Pie-Donut and zoom control are all fully customizable to change the look and feel. An important property Autorange at the Y-axis tab changes the way the minimum and the maximum value are calculated. You can show this dialog by selecting a serie in the treeview and clicking on the 'Setting the graph' button Chart settings on the chart toolbar or on the 'Setting the chart ...' line in the contextual menu.

Annotations editor
The annotations editor dialog is a smaller editor which only edits the annotations attached to the serie. Annotations are used to mark important points or to display comments about the points. You can choose different types of shapes such as balloon, circle, square ... The Annotations editor is called by doubleclicking on the name of a serie in the series editor.

TopPanes editor (Global)
Chart panes editor
Height
Set the height in combination with 'Height type' to a fixed or autosize value.


Height type
The type of the height when you have multiple panes :
Example : There are 3 panes of height = 30
Pixels Total height will be 90
Percentage Total height will be 90% of the Chart Viewer component height
Auto Total height will be the Chart Viewer component height and the panes height will be auto calculated


Axis mode
The 'Axis mode' allows you to change the drawing of the X-axis and Y-axis :
AxisChartAxis Chart Width Height
XaxisXAxis Full Width
YaxisYAxis Full Height


Scaling and scrolling
The chart pane can be scaled in both X–direction and Y–direction. Set the property 'Vertical Scale' and/or 'Horizontal Scale' in the pane options to true. Then click and hold your mouse on the X-axis or Y-axis to scale the chart. You can also scroll left, right, up or down. Set the 'Horizontal Scroll' and/or 'Vertical Scroll' to true, click on the pane background and hold your mouse to scroll.


Pane moving
The chart pane can be moved to another position in the Chart viewer. Set the 'pane drag & drop' property to true in the pane options. Hold Shift + click and drag the pane above another pane. Then release the Shift + click and the pane will be dropped into the new location.


Orientation
By default, a chart is shown in vertical direction. This means that the X-axis is at the bottom and the Y-axis at the left and/or right side of the chart. In some cases, it is desirable that the chart is shown in horizontal direction. The horizontal mode can be considered as a chart that is rotated -90° degrees. The Y-axis is at the bottom and/or top of the chart and the X-axis on the left side. The checkbox "Horizontal" controls the orientation of the chart by setting it to either Horizontal or Vertical.
TopPanes editor (Crosshairs)
The crosshair behaviour can be set per pane. When crosshairs are enabled, move the mouse in the pane area and values which intersect with the crosshair are shown either in the Y-axis area, at the crosshair intersection point or in a separate tracker window.
Chart panes editor

Type
There are 3 kinds of crosshair types you can use to locate the Y-values of a serie.
None No crosshair is visible
Small CrossHair A Small crosshair will appear when selecting a point in range between RangeFrom and RangeTo
FullSize CrossHair At Cursor A full pane width horizontal crosshair will appear at cursor point
FullSize CrossHair At Series A full pane width horizontal crosshair will appear at every serie.


Values
Serie values 'Serie values' enables you to show the horizontal crosshair found with the vertical crosshair at every serie.
Y-Position value 'Y-Position value' enables you to show the horizontal crosshair found with the vertical crosshair on the Mouse position


Position
The 'Position' property allows you to set the values that are found on the intersection of the vertical and horizontal crosshair. You can allow the value to be displayed at the mouse cursor, on the horizontal crosshair or at the value tracker window if it is visible.

Tracker
To track and display values found at crosshair position you can use a floating tracker window. Set the 'Value tracker' property to true in the position options or click on the button 'Show/Hide the tracker' Tracker on the chart toolbar or on the 'Show/Hide tracker' in the contextual menu. The tracker window is displayed on top of the chart component and can be moved anywhere on the screen. The tracker show the series and the serie values found at mouse cursor position on the chart while moving with the mouse cursor.

TopPanes editor (Legend)
Chart panes editor

Display the legend text for the number of current chart series added to the chart pane.

TopPanes editor (Navigator)
Chart panes editor

Scaling and scrolling
Instead of scrolling on the pane and scaling with the Y-axis and the X-axis, you can show a navigator on the pane. With the navigator you can only scroll and scale in X–direction. To scale, hold your mouse on the navigator and move left or right to zoom in/out. To scroll, set the Scrollbuttons property to visible and click and hold on the left button to scroll left, or the right button to scroll right.

TopPanes editor (Splitter)
Chart panes editor

Changing pane height
To change the pane height, move your mouse cursor until it changes to a crSizeNS type (Sizing direction North – South). Then click and hold your mouse and drag up or down. The splitter is always attached to the pane under the splitter. You can only change the height of the pane if you have multiple panes and the Pane height type is set to pixel or percentage. If you move up with the mouse your pane will increase height and the pane above will decrease height.

TopPanes editor (X-Axis)

The X-axis displays the range of points in the chart in number format, a date/time format with unit types minute, day, month, year, custom drawn values or specified values per point. The X-axis supports scaling with mouse. The X-axis formatting can be set per pane and per serie.

Chart panes editor

Position
This property changes the position of the X-axis to top, bottom or will display a X-axis at the top and the bottom in case the position is both.

Unit type
In Invent Upshot, the 'Unit type' is always set to 'Custom drawn'.

TopPanes editor (Y-Axis)

The Y-axis displays the range of series values from a defined minimum to maximum or via Autorange the best range can automatically be choosen. The Y-axis supports scaling with the mouse and/or keyboard. The Y-axis can be set at the left side of the chart, the right side of the chart or both sides. Different Y-axis values can be shown for different series. The Y-axis also has the capability to show major & minor units with a different font and formatting can be set per pane and per serie.

Chart panes editor
Position
This property changes the position of the Y-axis to left, right or will display a Y-axis at the left and the right in case the position is both.


Auto units
When 'Auto units' is set true, the chart calculates the best possible value and position based on the minimum and the maximum value. If 'Auto units' is false, you need to set the Major and the Minor unit properties to the difference between the first and the second value you want to see.
Example there is a range from 0 to 10. Set the major unit to 2 and the minor unit to 1.
Result : MajorUnit = 0, 2, 4, 6, 8, 10 / MinorUnit = 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10.
TopPanes editor (X-Grid)

The X-grid formatting can be set per pane.

Chart panes editor
MajorDistance and MinorDistance
If the X-grid is visible you can specify a Major or Minor Distance to draw the grid with smaller or larger steps. The X-grid line positions are defined in the same way as the X-axis value positions except that there is no AutoUnits property and the MajorUnit and MinorUnit properties must be filled before you can see the X-grid.
TopPanes editor (Y-Grid)

The Y-grid formatting can be set per pane.

Chart panes editor
MajorDistance and MinorDistance
If the Y-grid is visible you can specify a Major or Minor distance to draw the grid with smaller or larger steps.


Auto units
If 'Auto units' is true the Y-grid will be drawn at the same calculation as the Y-axis values. This means if there is no room to display minor units, the Y-grid will disappear. When 'Auto units' is false you can use the MajorDistance / MinorDistance on the same way as the X-grid.


Serie index
The Y-grid is related to the serie index because each serie can have its own Minimum and Maximum. Change the SerieIndex and the Y-grid will draw to match the new serie values.
TopPanes editor (Zoom control)

The zoom control window allows the user to navigate through the chart and always displays the complete chart range by default. There are 2 handles that can be dragged left or right representing the RangeFrom and RangeTo of the Chart. The zoom control appearance can be customized in the Panes Editor Dialog.

Chart panes editor
Auto update
By default the chart will be automatically updated when changing the range. The property 'Auto update' can be changed to update immediate, upon release of the mouse button, or no automatic update.
TopSeries editor (Chart type)
Choose a chart type
Choosing the right chart type to visualize your data depends on the data you are using. Below is an overview of the current available chart types and when to use them :
None
None
Serie is not displayed.
Line
Line
Serie is shown as a line from value to value.
DigitalLine
DigitalLine
Serie is shown as a digital line from value to value.
Bar
Bar
Serie is shown as bars with height representing the value. The bar can be a rectangle, pyramid or cylinder. Select this property in the dropdown list "Bar shape".
Area
Area
Serie is shown as a filled area.
LineBar
LineBar
Serie is shown as bars with values connected by a line.
Histogram
Histogram
Serie is shown as a histogram which is similar to a bar chart except that it offers a different color for each value.
LineHistogram
LineHistogram
Serie is shown as a histogram with values connected by a line.
CandleStick
CandleStick
Serie is shown as a candlestick chart, showing 4 values per point : open/close & high/low value.
LineCandleStick
LineCandleStick
Serie is shown as a candlestick chart with values connected by a line.
OHLC
OHLC
Serie is shown as OHLC chart, showing 4 values per point : open/close & high/low value.
Markers
Markers
Serie is shown as marker/image per value.
StackedBar
StackedBar
Multiple series joined in stacked bar which shows the summed value of all series of type StackedBar.
StackedArea
StackedArea
Multiple series joined in stacked bar which shows the summed value of all series of type StackedArea.
StackedPercentageBar
StackedPercentageBar
Same as stacked bar but values per serie are represented by percentage.
StackedPercentageArea
StackedPercentageArea
Same as stacked area but values per serie are represented by percentage.
Error
Error
Two values per serie point show at value with line height depending on error value.
Arrow / ScaledArrow
Arrow
Two values per serie point show an arrow. The vertical position of the arrow depends on the first value, the orientation of the arrow depends on the second value.
Bubble / ScaledBubble
Bubble
Two values per serie point show a circle. The vertical position of the circle depends on the first value, the size of the circle depends on the second value.
Pie / HalfPie
PieHalfPie
Add points and display in an (optionally) exploded pie/halfpie chart with many options like slice gradient colors and values.
Donut / HalfDonut
DonutHalfDonut
Add points and display in an (optionally) exploded donut/halfdonut chart with the possibility of multiple donut rings.
Spider / HalfSpider
SpiderHalfSpider
Add points and display in a spider chart with optional grid.
Band
Band
Add double points to create a band type chart (similar to area but with without zero points).
VarRadiusPie / VarRadiusHalfPie
VarRadiusPieVarRadiusHalfPie
Add points and display in a variable radius pie with optional grid.
VarRadiusDonut / VarRadiusHalfDonut
VarRadiusDonutVarRadiusHalfDonut
Add points and display in a variable radius donut with optional grid.
SizedPie / SizedHalfPie
SizedPieSizedHalfPie
Add points and display in a sized pie with optional grid.
SizedDonut / SizedHalfDonut
SizedDonutSizedHalfDonut
Add points and display in a sized donut with optional grid.
BoxPlot
BoxPlot
A Chart type with five-number summaries: the smallest observation (minimum), lower quartile (Q1), median (Q2), upper quartile (Q3), and largest observation (maximum).
Renko
Renko
Rising and falling diagonal lines of boxes that are filled and show a downward (red) or upward (green) trend.
XYLine
XYLine
Serie is shown as a line from value to value, with a custom X value.
XYMarkers
XYMarkers
Serie is shown as marker/image per value, with a custom X value.
Extra information  
The difference between variable radius pie and sized pie is that the sized pie angle is equal for all slices (10 slices = 36°). The radius in the variable radius pie is calculated based on the added values.
TopSeries editor (Crosshair)
Chart series editor
Crosshair
When the crosshair is enabled you can set different graphical settings to display serie values or y–position values found at the crosshair. With the different types of crosshairs, you can draw horizontal lines where the value was found. When "full size crosshair at series" crosshair type is chosen a horizontal line will automatically be drawn where a serie value is found.

TopSeries editor (Marker)
Chart series editor
Marker
A marker can be selected. Set the SelectedColor and the SelectedSize property. Click on the marker at runtime, the marker will be shown in the selected color & size.

TopSeries editor (Serie)
Chart series editor
Legend text
The legend text that will be displayed in the legend.


Logarithmic Y-Scale
Transforms the Linear Y-Scale into a Logarithmic Y-Scale. By default, the Y-axis scale on charts is a linear scale. For scientific applications, it is often mandatory to use a logarithmic scale. When using a logarithmic Y-scale the MajorUnit is automatically set to 1 and cannot be changed. This means that on the Y-axis values 1,10,100,1000,… will be shown. The MinorUnit can be set for the Y-Axis and the Y-Grid to a value of choice. Note that the logarithmic Y-scale is only supported for single value chart types.


Different serie values on the left and/or right size of the Y-axis
You can add multiple series per pane. Usually the series have a common value range and the Autorange mode Common will be chosen. When adding series which do not have a common value range, use the Autorange mode Enabled, and set property serie Y-axis position to left / right / both. You can choose a matching font color for values in the Y-axis that match the serie color for example to easily identify which values belong to which serie. Another feature is formatting of the value. Set a format in the Value format property of the serie. Format specifiers have the following form :
"%" [index ":"] ["-"] [width] ["." prec] type
A format specifier begins with a % character. After the % come the following, in this order :
  • An optional argument zero-offset index specifier (that is, the first item has index 0), [index ":"]

  • An optional left justification indicator, ["-"]

  • An optional width specifier, [width]

  • An optional precision specifier, ["." prec]

  • The conversion type character, type
The following table summarizes the possible values for type :
d
Decimal
The argument must be an integer value. The value is converted to a string of decimal digits. If the format string contains a precision specifier, it indicates that the resulting string must contain at least the specified number of digits. If the value has less digits, the resulting string is left-padded with zeros.
u
Unsigned decimal
Similar to 'd' but no sign is output.
e
Scientific
The argument must be a floating-point value. The value is converted to a string of the form "-d.ddd...E+ddd". The resulting string starts with a minus sign if the number is negative. One digit always precedes the decimal point. The total number of digits in the resulting string (including the one before the decimal point) is given by the precision specifier in the format string—a default precision of 15 is assumed if no precision specifier is present. The "E" exponent character in the resulting string is always followed by a plus or minus sign and at least three digits.
f
Fixed
The argument must be a floating-point value. The value is converted to a string of the form "-ddd.ddd...". The resulting string starts with a minus sign if the number is negative. The number of digits after the decimal point is given by the precision specifier in the format string—a default of 2 decimal digits is assumed if no precision specifier is present.
g
General
The argument must be a floating-point value. The value is converted to the shortest possible decimal string using fixed or scientific format. The number of significant digits in the resulting string is given by the precision specifier in the format string—a default precision of 15 is assumed if no precision specifier is present. Trailing zeros are removed from the resulting string, and a decimal point appears only if necessary. The resulting string uses fixed point format if the number of digits to the left of the decimal point in the value is less than or equal to the specified precision, and if the value is greater than or equal to 0.00001. Otherwise the resulting string uses scientific format.
n
Number
The argument must be a floating-point value. The value is converted to a string of the form "-d,ddd,ddd.ddd...". The "n" format corresponds to the "f" format, except that the resulting string contains thousand separators.
m
Money
The argument must be a floating-point value. The value is converted to a string that represents a currency amount. The conversion is controlled by the CurrencyString, CurrencyFormat, NegCurrFormat, ThousandSeparator, DecimalSeparator, and CurrencyDecimals global variables or their equivalent in a FormatSettings data structure. If the format string contains a precision specifier, it overrides the value given by the CurrencyDecimals global variable or its FormatSettings equivalent.
p
Pointer
The argument must be a pointer value. The value is converted to an 8 characters string that represents the pointers value in hexadecimal.
s
String
The argument must be a character, a string, or a PChar value. The string or character is inserted in place of the format specifier. The precision specifier, if present in the format string, specifies the maximum length of the resulting string. If the argument is a string that is longer than this maximum, the string is truncated.
x
Hexadecimal
The argument must be an integer value. The value is converted to a string of hexadecimal digits. If the format string contains a precision specifier, it indicates that the resulting string must contain at least the specified number of digits. Iif the value has fewer digits, the resulting string is left-padded with zeros.


Conversion characters may be specified in uppercase as well as in lowercase—both produce the same results. For all floating-point formats, the actual characters used as decimal and thousand separators are obtained from the DecimalSeparator and ThousandSeparator global variables or their TFormatSettings equivalent. In the sample below, the Y-axis Value format on the left side was set to ‗%gK‘ and for the right side ‗%.1f‘.
TopSeries editor (X-Axis)
Chart series editor
MajorUnit and MinorUnit
MajorUnit and MinorUnit is used to determine the X-axis values on Serie level. If you set the MajorUnit to 2, the values will range from RangeFrom to RangeTo in steps of 2 (0, 2, 4, 6, …).

TopSeries editor (Y-Axis)
Chart series editor
MajorUnit and MinorUnit
When 'Auto units' is false on pane level you must specify a MajorUnit and MinorUnit to determine the Y-axis values on Serie level.


AutoRange
The 'AutoRange' property determines how the series are displayed with an automatically calculated minimum and a maximum value range. There are 5 types you can choose from depending on the chart type you choose :
Disabled If 'Disabled' is chosen the Chart viewer does not perform any automatic calculations of minimum or maximum values of the serie. If 'AutoRange' is set to 'Disabled', the minimum and maximum value must be programmatically set. The minimum or maximum can or cannot correspond to the real minimum and maximum in the serie.
Enabled If 'Enabled' is chosen the minimum and maximum value are calculated automatically.
Enabled Zero Based The 'EnabledZeroBased' type is similar to the 'Enabled' type. Again the minimum and maximum values are calculated automatically but this time the minimum value is set to 0 causing all negative values to disappear.
Common The 'Common' type is only useful if you have more than one serie. If you only have one serie, the 'Common' type will be equivalent as the 'Enabled' type. The 'Common' type can be used to automatically use the minimum/maximum of all calculated minima/maxima of all series with the 'Common' type.
Common Zero Based The 'CommonZeroBased' Autorange type is similar to the 'Common' type. The maximum value will still be calculated for multiple series but the major difference with the previous 'Common' type is that the minimum value for all series will be set to zero.
TopSeries editor (Zoom control)
Chart series editor
Serie type
When you start the application, the zoomcontrol window will be empty. Therefore it is important to link the series by setting the 'Serie type' property. The 'Serie type' property specifies how and what series from the serie collection of the chart is used on the zoomcontrol :
Normal This is the default value. The serie will not be visible in the zoom control window.
In Zoom Control Only The serie will only be displayed in the zoom control window.
In Zoom Control and Normal The serie will be displayed in the zoom control window and as a normal serie.
TopAnnotations editor
Chart annotations editor
Annotations editor
The annotations editor dialog is a smaller editor which only edits the annotations attached to the serie. Annotations are used to mark important points or to display comments about the points. There are different kinds of annotations :
  • Balloon, Circle, RoundRectangle, Rectangle : Shapes to wrap around the text.

  • Line : a line drawn from top to bottom on the X-position of the point.
The Annotations editor is called by doubleclicking on the name of a serie in the series editor.

© 2009, 2010 Aplixio. All rights reserved