Description
The Chart component (also called the Classic Chart when contrasted with the Easy Chart) provides a flexible way to display either timeseries or X-Y charts that are powered by any number of datasets. Typically, these datasets are bound to SQL Query bindings.
Features
| • | SQL Query and/or SQLTags Historian data sources |
| • | Zoom, Pan, X-Trace modes |
| • | Any number of Y-axes and subplots |
| • | Realtime or Historical |
| • | Many different rendering styles |
Configuration
The basic idea behind configuring the class chart is simple: add datasets, and fill them in with data in a format that the chart understands. You add datasets to the chart using the chart's customizer. You then use standard property binding to put data into these charts. Commonly you'll use a SQL Query binding. Since these datasets are just normal dynamic properties, you can also access them via scripting.
The Customizer also lets you add additional X and Y axes. There are various types of axes, and they each have a large number of properties. Lastly, you can configure additional properties for each dataset, such as which axes it maps to, its visual style, subplot, etc.
Datasets
Each dataset should define one or more "series" (a.k.a "pens"). The format for these datasets is quite simple. Each series in a dataset shares common X-values, defined by the first column. Each additional column are the Y-values for a series. For example:
t_stamp |
motor_amps |
motor_speed |
motor_hoa_state |
2010-01-13 8:05:00 |
16.8 |
223 |
0 |
2010-01-13 8:10:00 |
16.8 |
245 |
0 |
2010-01-13 8:15:00 |
16.9 |
244 |
1 |
Note that it is certainly not a coincidence that this looks just like a database table that the Historical Group is logging to. It is also what the result datasets of a SQLTags Historian query looks like.
| • | Rows must be sorted in ascending order. The chart will draw and connect the points in whatever order you provide, them, so unless you want a jumbled mess - don't forget the ORDER BY clause in your query. |
| • | Make sure that your timestamp column, as well as other columns that may appear in your WHERE clause, are indexed. This will help your chart queries run much faster. We've seen queries that literally take over 5 minutes of database-cranking reduced to a few seconds with the addition of an index. |
| • | String values are not allowed (except in category chart x-values, see below). Make sure your database columns are numeric, or date/time for x-values. |
Binding Techniques
The classic chart can be used to make almost any kind of chart, with some effort. Historical, realtime, dynamic pen selection, etc is all possible. Your job is just to fill the datasets with the pertinent data, and the chart will display it.
The most common idea is to make the chart dynamic by varying the date range that the dataset's SQL Query bindings run. This is easy to do by adding a Date Range component and using Indirect Bindings.
Chart Type: XY vs Category
The classic chart is typically in XY Plot mode. This means that the x-axis is either date or numeric, and the y-axes are numeric. If your x-axis is categorical (names, not numbers), you can switch the Chart Type property to Category Chart. Don't be surprised when you get a few errors - you'll need to go and switch your x-axis to be a Category Axis, and fill your dataset in with valid category data, that is, String-based x-values. This is most often used with the bar-renderer (see the Customizer).
Properties
Appearance |
|||||||||||||||||||||||||||||||||||||
Font |
Font of text of this component
|
||||||||||||||||||||||||||||||||||||
Foreground Color |
The foreground color of the component.
|
||||||||||||||||||||||||||||||||||||
Background Color |
The background color of the component.
|
||||||||||||||||||||||||||||||||||||
Plot Background |
The background color for all plots, unless they override it
|
||||||||||||||||||||||||||||||||||||
Chart Title |
An optional title that will appear at the top of the chart.
|
||||||||||||||||||||||||||||||||||||
Chart Orientation |
The orientation of the domain axis of the chart.
|
||||||||||||||||||||||||||||||||||||
Show Legend? |
If true, a legend will be shown for the series displayed in the chart.
|
||||||||||||||||||||||||||||||||||||
Selection Highlight Color |
The color of the selection highlight
|
||||||||||||||||||||||||||||||||||||
Selection Highlight Width |
The line width of the selection highlight
|
||||||||||||||||||||||||||||||||||||
Behavior |
|||||||||||||||||||||||||||||||||||||
Chart Type |
Choose the type for this chart: XY (Numeric X-axis) or Category (String X-axis)
|
||||||||||||||||||||||||||||||||||||
Extract Order |
Extract order for how category datasets should be interpreted.
|
||||||||||||||||||||||||||||||||||||
Subplot Mode |
The axis that subplots share if more than 1 subplot.
|
||||||||||||||||||||||||||||||||||||
Show Tooltips? |
If true, tooltips showing point values will be displayed.
|
||||||||||||||||||||||||||||||||||||
Show Popup? |
If true, a popup menu will be shown on right-click that allows the user to change mode, print, save, etc.
|
||||||||||||||||||||||||||||||||||||
Selection Enabled? |
If true, the user will be able to select datapoints on the chart. The selected datapoint will be highlighted, and the "selectedData" property will reflect it.
|
||||||||||||||||||||||||||||||||||||
Common |
|||||||||||||||||||||||||||||||||||||
Name |
The name of this component.
|
||||||||||||||||||||||||||||||||||||
Visible |
If disabled, the component will be hidden.
|
||||||||||||||||||||||||||||||||||||
Border |
The border surrounding this component. NOTE that the border is unaffected by rotation.
|
||||||||||||||||||||||||||||||||||||
Mouseover Text |
The text that is displayed in the tooltip which pops up on mouseover of this component.
|
||||||||||||||||||||||||||||||||||||
Cursor |
The mouse cursor to use when hovering over this component.
|
||||||||||||||||||||||||||||||||||||
Data |
|||||||||||||||||||||||||||||||||||||
Selected Datapoint |
The currently selected datapoint
|
||||||||||||||||||||||||||||||||||||
Selected X Value |
The selected domain axis value for X-Trace and Mark modes.
|
||||||||||||||||||||||||||||||||||||
Data Quality |
The data quality code for any tag bindings on this component.
|
||||||||||||||||||||||||||||||||||||
Uncategorized |
|||||||||||||||||||||||||||||||||||||
Properties Loading |
The number of properties currently being loaded
|
||||||||||||||||||||||||||||||||||||
Scripting
Events
The following event sets are fired by this component. See Component Event Handlers to learn more.
| • | mouse |
| • | mouseMotion |
| • | propertyChange |
Scripting Functions
This component has no special scripting functions.
Extension Functions
The chart has the following extension functions. See each function's doc string for usage details.
| • | configureChart() |
| • | getXTraceLabel() |