User Manual

GETTING STARTED


MODULES AND PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

ALL USER MANUAL VERSIONS

Ignition 8.1
Ignition 7.9
Ignition 7.8

Deprecated Pages

Employees

Sign In

Skip to end of metadata
Go to start of metadata

Description

The Chart component, also known as the Classic Chart, can be used to make almost any kind of chart. It provides a flexible way to display XY charts using a host of built-in properties. All you need to do to create a chart is add datasets, fill them in with data, configure a property binding, and setup the chart properties using the customizer.

Customizer

The Chart component has its own special customizer called the Chart Customizer. When you open the customizer, you'll notice five tabs at the top: Dataset, X-Axes, Y-Axes, Dataset Properties, and Plot Properties. Each tab has its own set of properties and defaults.

To get started, first add your dataset(s) and any additional XY axes using the appropriate tabs in the customizer. You can configure additional properties for each dataset, like what axes the data maps to, as well as select from a host of visual styles.

There are six types of axes to choose from when configuring a chart, each having its own list of properties: Number Axis, Date Axis, Category Axis, Logarithmic Axis, Elapsed Axis, and Symbols Axis. Most of the X and Y axes properties are used in the customizer, and some properties are specific to the axis type and have their own unique properties

The customizer already has some default styles in place to help you get started, but you can modify these default settings to your own style using the XY properties, Axes Type, Renderer and Plot styles. If you don't like one style, try another.

Shown below is each tab in the Chart Customizer with all its properties, description, and what axes type it supports. Note: Not all properties are available for all axes type charts.
 

The Dataset tab is where you setup, add, and remove datasets.

PropertyDescription
DataDefault dataset property.
Add
Adds a new dataset. Click the plus icon a new row will be added. Enter the dataset Name and Description.
Delete
Deletes an existing dataset. Click the Delete icon to delete an existing dataset.
NameName of the dataset. Double click in the field to rename the dataset.
TypeDefault type is "Dataset."
DescriptionDescribes the dataset.



The X-Axes tab is where X-Axis properties are configured. You can also add and delete X axes here.


 Property DescriptionSupports Axes Types

Add X axis. When you add an X axis, you can select from one of the following axis types: Number, Date, Category, Logarithmic, Elapsed, and Symbol.
Click the green plus icon, select an Axis Type, enter an Axis Name, and click OK.

All
Delete an existing axis. Select the axis, and click the Delete icon.All
Axis VisibleIf false, the axis will be hidden.All

Axis Label

Name of the axis.All
Axis Label AngleAngle of the value on the axis label.All
Axis Label ColorColor of axis label.All
Axis Label FontFont type and size of text on axis label.All
Tick Labels VisibleIf false, the tick labels will be hidden.All
Tick Label ColorColor of tick labels.All
Tick Label FontFont type and size of text on tick labels.All
Tick Marks VisibleIf false, the tick marks will be hidden.All
Tick Mark ColorColor of tick marks.All
Tick Mark Inside LengthLength of tick marks inside the chart.All
Tick Mark Outside LengthLength of tick marks outside the chart.All
Axis Position

Depends on the axis selected. X-axis label alternates between top and bottom. Y-axis label alternates between left and right. You many need to change both X and Y axis properties to get your intended axis position.

All
Auto RangeIf true, the value axis range will be determined automatically. If false, the specified Lower and Upper bounds will be used.All
Auto Range Min SizeIf true, the minimum value range is used.Date, Number, Logarithmic, Symbol, Elapsed
Fixed Auto RangeSets an axis up for dynamic graphs.Date, Number, Logarithmic, Symbol, Elapsed
Lower BoundLower bound value. Used only when Auto Range is false.Date, Number, Logarithmic, Symbol, Elapsed
Upper BoundUpper bound value. Used only when Auto Range is false.Date, Number, Logarithmic, Symbol, Elapsed
Lower Margin (% of range)Lower margin represented as a percentage. Used only when Auto Range is true.Date, Number, Logarithmic, Symbol, Elapsed
Upper Margin (% of range)Upper margin represented as a percentage. Used only when the Auto Range is true.Date, Number, Logarithmic, Symbol, Elapsed
Negative ArrowIf true, negative arrow is visible.Date, Number, Logarithmic, Symbol, Elapsed
Positive ArrowIf true, positive arrow is visible.Date, Number, Logarithmic, Symbol, Elapsed
Vertical Tick LabelsVertical orientation for tick labels.Date, Number, Logarithmic, Symbol, Elapsed
Auto Range Includes ZeroIf true, the range includes a zero.Date, Number, Logarithmic, Symbol, Elapsed
Auto Range Sticky ZeroIf true, the zero is on both the XY axes.Date, Number, Logarithmic, Symbol, Elapsed
Number Format OverrideOverwrites the current number format.Date, Number, Logarithmic, Symbol
Date StyleThe style of the date displayed on the axis.Date
Time StyleThe style of the time displayed on the axis.Date
Max DateMax value in a series of dates.Date
Min DateMin value in a series of dates.Date
Display Date in TitleIf true, the date will be displayed in the title when the range is zoomed into the hour range.Date
Label AngleThe angle for the value axis labels.Category
"1e#"-style tick labelsIf true, uses scientific notation format (i.e.,1e5, 1e6, etc.,).Logarithmic
"10^n"-style tick labelsIf true, uses power notation format (i.e., 10 to the "X" power).Logarithmic
Symbols StringSequence of characters such as a literal constant. (i.e., On,Off,Auto)Symbols
Grid Bands VisibleIf true, grid bands will be hidden.Symbols
Grid Bands ColorColor of grid bands.Symbols
Grid Bands Alternate ColorBackup color of grid bands.Symbols
Format StringSpecified sequence of characters.Elapsed

The Y-Axes tab is where Y-Axis properties are configured. You can also add and delete Y axes here.
 

 Property DescriptionAxes Types Supports

Add axis. When you add a Y axis, you can select from one of the following axis types: Number, Date, Category, Logarithmic, Elapsed, and Symbol.
Click the green plus icon, select an Axis Type, enter an Axis Name, and click OK.

All
Delete an existing axis. Select an axis, and click the Delete icon.All
Axis VisibleIf false, the axis will be hidden.All

Axis Label

Name of the axis.All
Axis Label AngleAngle of the value on the axis label.All
Axis Label ColorColor of axis label.All
Axis Label FontFont type and size of text on axis label.All
Tick Labels VisibleIf false, the tick labels will be hidden.All
Tick Label ColorColor of tick labels.All
Tick Label FontFont type and size of text on tick labels.All
Tick Marks VisibleIf false, the tick marks will be hidden.All
Tick Mark ColorColor of tick marks.All
Tick Mark Inside LengthLength of tick marks inside the chart.All
Tick Mark Outside LengthLength of tick marks outside the chart.All
Axis Position

Depends on the axis selected. X-axis label alternates between top and bottom. Y-axis label alternates between left and right. You many need to change both X and Y axis properties to get your intended axis position.

All
Auto RangeIf true, the value axis range will be determined automatically. If false, the specified Lower and Upper bounds will be used.All
Auto Range Min SizeIf true, the minimum value range is used.Date, Number, Logarithmic, Symbol, Elapsed
Fixed Auto RangeSets an axis up for dynamic graphs.Date, Number, Logarithmic, Symbol, Elapsed
Lower BoundLower bound value. Used only when Auto Range is false.Date, Number, Logarithmic, Symbol, Elapsed
Upper BoundUpper bound value. Used only when Auto Range is false.Date, Number, Logarithmic, Symbol, Elapsed
Lower Margin (% of range)Lower margin represented as a percentage. Used only when Auto Range is true.Date, Number, Logarithmic, Symbol, Elapsed
Upper Margin (% of range)Upper margin represented as a percentage. Used only when the Auto Range is true.Date, Number, Logarithmic, Symbol, Elapsed
Negative ArrowIf true, negative arrow is visible.Date, Number, Logarithmic, Symbol, Elapsed
Positive ArrowIf true, positive arrow is visible.Date, Number, Logarithmic, Symbol, Elapsed
Vertical Tick LabelsVertical orientation for tick labels.Date, Number, Logarithmic, Symbol, Elapsed
Auto Range Includes ZeroIf true, the range includes a zero.Date, Number, Logarithmic, Symbol, Elapsed
Auto Range Sticky ZeroIf true, the zero is on both the XY axes.Date, Number, Logarithmic, Symbol, Elapsed
Number Format OverrideOverwrites the current number format.Date, Number, Logarithmic, Symbol
Date StyleThe style of the date displayed on the axis.Date
Time StyleThe style of the time displayed on the axis.Date
Max DateMax value in a series of dates.Date
Min DateMin value in a series of dates.Date
Display Date in TitleIf true, the date will be displayed in the title when the range is zoomed into the hour range.Date
Label AngleThe angle for the value axis labels.Category
"1e#"-style tick labelsIf true, uses scientific notation format (i.e.,1e5, 1e6, etc.,).Logarithmic
"10^n"-style tick labelsIf true, uses power notation format (i.e., 10 to the "X" power).Logarithmic
Symbols StringSequence of characters such as a literal constant. (i.e., On,Off,Auto)Symbols
Grid Bands VisibleIf true, grid bands will be hidden.Symbols
Grid Bands ColorColor of grid bands.Symbols
Grid Bands Alternate ColorBackup color of grid bands.Symbols
Format StringSpecified sequence of characters.Elapsed

The Dataset tab is where you can modify the visual styles of your chart. You can configure your chart with subplots, experiment with different renderer types and property types to change how the data is displayed until you find what best meets your requirements. Note: Not all Renderer properties are available for each axis type.


Dataset Tab Properties
PropertyDescriptionAxes Types Supports
DatasetCollection of data in tabular form. Data from the dataset drives the chart.All
X AxisHorizontal axis.All
Y AxisVertical axis.All
Subplot NumberNumber of plot areas on one chart.All
EnabledIf true, the chart is displayed with the selected renderer properties.All
Renderer

The visual style of the data presented on the chart. Select from various renderer styles:

  • XY Line/Shape Renderer
  • XY Bar Renderer
  • XY Area Renderer
  • XY Step Renderer
  • XY Step Area Renderer
  • XY Dot Renderer
  • Category Line/Shape Renderer
  • Category Bar Renderer
All
Series ColorsAn ordered list of the colors to draw series in.All
TypeType of XY Item Renderer.All
Line SizeThe thickness of the line.All
Dash Pattern

The pattern used for dashed lines.

All
Fill ShapesIf false, there is only an outline of the shape, no fill color.All
Shape Offset

The offset into the standard shape list to start this renderer at. Offsets and their shapes are listed below. 

OffsetShape
0Square
1Circle
2Upward triangle
3Diamond
4Horizontal rectangle
5Downward triangle
6Horizontal ellipse
7Rightward triangle
8Vertical rectangle
9Leftward triangle
All
MarginThe percentage by which the bars are trimmed using the XY Bar Renderer.All
ShadowsIf true, draws shadows under the bars using the XY Bar Renderer.All
OutlineIf true, draws an outline around the area using the XY Area Renderer.All
Draw LinesIf true, lines will be drawn to connect the datapoints using the Category Line/Shape Renderer.All
Draw ShapesIf true, shapes will be drawn to connect each datapoint if using the Category Line/Shape Renderer.All

The Plot Properties tab allows you to break up the chart plot area into multiple distinct subplots. 


Property NameDescription
PlotThe chart area displaying data.All
Override Background ColorIf enabled, allows you to change the background color.All
Background ColorBackground color of the chart.All
Plot Weight (Relative)The chart ratio between subplots.All


References

Axis Type Examples

The Chart Customizer has six different axis types to choose from when configuring a chart, each with its own list of properties. Note: Some customizer properties are specific to the axis type and have their own unique properties. Examples of all axis types are shown below along with the property settings used to create each chart.


Number Axis Chart


Binding Type
TagTag History


Chart Customizer Property Settings

Datasets Tab
Property NameValue
DatasetsData
X-Axes Tab
AxesNumber
X Axis LabelNumber Axis
Axis Label ColorRed
Tick Label ColorGreen
Y-Axes Tab

Axes

Default Y Axis
Y Axis LabelOutput Temp
Axis Label ColorRed
Tick Label ColorGreen
Dataset Properties Tab
X AxisNumber
Y AxisDefault Y Axis
RendererXY Line/Shape Renderer
TypeShapes Only


Data Property Dataset


Date Axis Chart




Chart Customizer Property Settings

Datasets Tab
Propert NameDescription
DatasetData
X-Axes Tab
AxesDate
Axis LabelDate
Axis Label ColorRed
Y-Axes Tab
AxesDefault Y Axis
Axis LabelValue
Axis Label ColorRed
Dataset Properties Tab
DatasetsData
X AxisDate
Y AxisDefault Y Axis
RendererXY Line/Shape Render
TypeLines Only


Data Property Dataset


Category Axis Chart


Property Editor Setting

Behavior
PropertyValue
Chart TypeCategory


Chart Customizer Property Settings

Datasets Tab
Property NameValue
DatasetData
X-Axes Tab
AxesCategory
Axis LabelCategory Axis
Axis Label ColorBlue
Y-Axes Tab
AxesDefault Y Axis
Axis LabelValue
Axis Label ColorBlue
Dataset Properties Tab
DatasetsData
X AxisCategory
Y AxisDefault Y Axis
RendererCategory Bar Renderer
StyleBar


Data Property Dataset




Logarithmic Axis Chart



Chart Customizer Property Settings

Datasets Tab
PropertyValue
DatsetsData
X-Axes Tab
AxesLogarithmic
Axis LabelLogarithmic Axis
Axis Label ColorRed
Y-Axes Tab
AxesDefault Y Axis
Axis LabelValue
Axis Label ColorRed
Dataset Properties Tab
DatasetsData
X AxisLogarithmic
Y AxisDefault Y Axis
RendererXY Line/Shape Renderer
TypeLines Only


Data Property Dataset


Symbols Axis Chart




Chart Customizer Property Settings

Datasets Tab
Property NameValue
DatasetData
X-Axes Tab
AxesDefault Axis
Axis LabelSymbol Axis
Axis Label ColorGreen
Y-Axes Tab
AxesSymbol
Axis LabelState
Axis Label ColorGreen
Symbols StringOn,Off,Auto
Dataset Properties Tab
DatasetsData
X AxisDefault X Axis
Y AxisSymbol
RendererXY Line/Shape Renderer
TypeLines Only
Line Size3


Data Property Dataset

Elapsed Time Axis Chart




Binding Type
DatabaseSQL Query


Chart Customizer Property Settings

Datasets Tab
Property NameValue
DatasetData
X-Axes Tab
AxesElapsed Time
Axis LabelTimestamp
Axis Label ColorRed
Tick Label ColorGreen
Upper Bound60,000
Tick Size (ms)30,000
Y-Axes Tab
AxesDefault Y Axis
Axis LabelValue
Axis Label ColorRed
Tick Label ColorGreen
Dataset Properties Tab
DatasetsData
X AxisElapsed
Y AxisDefault Y Axis
RendererXY Line/Shape Renderer
TypeLines Only


Data Property Dataset


  • No labels