Line charts

TreeGrid documentation

TreeGrid can compute and show classic line charts, point charts, XY point charts.
These charts can be shown in TreeGrid space cell from sources in grid data column(s).
The charts are available also in standalone TreeGrid library to use it without TreeGrid itself.

Charts in grid cells

TreeGrid can show one or more charts in space row cells of type Chart.
Type="Chart" sets the cell to show line chart.
The chart settings in JSON format.
The individual Lines settings are used for individual lines according to the sources in SourcesY.
See the TLineChart object.
Specifies column names where to get the Y sources for the chart.
Every column will produce one line.
Specifies column names where to get the X sources for the Y values.
If defined, the chart will the XY point chart.
If not defined, it produces standard line chart and the X will be set as 0 - p, where p is the row count+1 used for Y sources.
To show chart only for children of some row in tree, set the Parent to the parent row id.
List of columns. If any cell in the column is changed by user, the chart is recalculated.
By default it contains all columns from SourcesX and SourcesY.
Use it when some source columns are calculated, to specify their sources here.
Width of the cell in pixels. It specifies the Width of the chart.
It is possible to use also RelWidth, but it can remarkably slow down grid or column resizing, because for every cell resize will be the chart repainted.
Height of the whole row in pixels. It specifies the Height of the chart.
Returns the actually rendered TLineChart object with the given id.
The chart is accessible only after it is rendered.
Recalculates and repaints the actually rendered TLineChart object with the given id.
It just calls RefreshCell for the cell displaying the chart.

Chart JSON definition

The chart is defined in JSON format.
When used in TreeGrid, the data sources are defined by cell attributes SourcesX and SourcesY.
When used standalone, the sources are defined by X, Y parameters of TChartLine. And the chart is shown by ShowLineChart function.

In documentation, the global object is called TLineChart and the individual objects in Lines array are named TChartLine.

JSON Example in TreeGrid Chart attribute (in XML without data):
Col1Chart="
{

id: 'Chart1',
Top: 5, Right: 5,
AxisX: 5, LabelX: 5, Bottom: 20,
AxisY: 5, LabelY: 5, Left: 20,

ChartRoundY: 5, ChartAddY: 0.5,
Lines: [

{ Width:1, PointType:1, Color:'red' },
{ Width:3, PointType:0, Color:'blue' }
]

}"

JSON Example of standalone version with data (in JavaScript with data):
ShowLineChart(
{

id:'Chart1',
Top: 5, Right: 5,
AxisX: 5, LabelX: 5, Bottom: 20,
AxisY: 5, LabelY: 5, Left: 20,
ChartRoundY: 5, ChartAddY: 0.5,
Lines: [

{ X:[-0.25,0,0.25,0.5,0.75,1,1.5,2,3,5],Y:[-1,0,-1,-2,-1,0,1,2,1,0], Width:1, PointType:1, Color:'red' },
{ Points:{'-0.25':1,0:0,0.25:1,0.5:2,0.75:1,1:0,1.5:-1,2:-2,3:-1,5:0}, Width:3, PointType:0, Color:'blue' }

]

},'MyTag');

Base chart settings

Basic attributes

Unique id of the chart.
By this id can be the chart accessible from JavaScript - by global array LineCharts[id] or by TreeGrid API method GetChart(id).
Array of settings of individual lines.
In standalone usage the lines contain also points data.
Default settings for all lines.
These attributes of Default are used when the line does not have defined the attribute.
Class prefix for all items in the chart.
For TreeGrid usage it is set always to <Cfg Style> value + "Chart"

Size

Width of the chart space in pixels.
If not set, it is computed from the parent tag or cell width.
Height of the chart space in pixels.
If not set, it is computed from the parent tag or row height.
The first X value shown in the chart = the left constraint.
If not set, it is used minimal value from X sources rounded down by ChartRoundX and decreased by ChartAddX.
The last X value shown in the chart = the right constraint.
If not set, it is used maximal value from X sources rounded up by ChartRoundX and increased by ChartAddX.
Rounds the first X down and last X up in chart if not set MinX and MaxX.
Subtracts the value from the first X and adds to the last X in the chart if MinX and MaxX not set.
Default value is 10 pixels (yes, pixels, but any set value is in X units).
The first Y value shown in the chart = the top constraint.
If not set, it is used minimal value from Y sources rounded down by ChartRoundY and decreased by ChartAddY.
The last Y value shown in the chart = the bottom constraint.
If not set, it is used maximal value from Y sources rounded up by ChartRoundY and increased by ChartAddY.
Rounds the first Y down and last Y up in chart if not set MinY and MaxY.
Subtracts the value from the first Y and adds to the last Y in the chart if MinY and MaxY not set.
Default value is 10 percent (yes, percent, but any set value is in Y units).

Axis and caption

Space in pixels reserved from left. Used for Axis Y labels.
Space in pixels reserved from right.
Space in pixels reserved from top. Used for caption.
Space in pixels reserved from bottom. Used for Axis X labels.
Shows horizontal lines in chart. The line positions are rounded to this count of x units values.
For example value 5 means the line will be shown at ..., -15, -10,-5, 0, 5, 10, 15, ...
Shows the labels for AxisX lines, below the chart. The label position is rounded to this count x units value.
The space for the labels should be reserved by Bottom attribute.
For example value 10 means the label will be shown at ..., -20, -10, 0, 10, 20 ...
Format string to format the label x numbers.
It is standard TreeGrid Format string.
Shows vertical lines in chart. The line positions are rounded to this count of y units values.
For example value 5 means the line will be shown at ..., -15, -10,-5, 0, 5, 10, 15, ...
Shows the labels for AxisY lines, left to the chart. The label position is rounded to this count y units value.
The space for the labels should be reserved by Left attribute.
For example value 10 means the label will be shown at ..., -20, -10, 0, 10, 20 ...
Format string to format the label y numbers.
It is standard TreeGrid Format string.
Text shown above the chart, the space for it should be reserved by Top attribute.

Individual chart lines

Data sources

The X values for the chart.
If not defined, it will be set as 0,1,2,3,4,5,6 ... - Y length
In TreeGrid the X values are defined in column(s) set by cell SourcesX.
The Y values for the chart.
If not defined, it will be set as 0,1,2,3,4,5,6 ... - X length
In TreeGrid the Y values are defined in column(s) set by cell SourcesY.
If and how will be data sources sorted.
0 - no sort, the chart will be XY points chart.
1 - sort by X, the chart will be horizontal Line chart.
2 - sort by Y, the chart will be vertical Line chart.
Connect also the first and the last points by line.
It connects the points only when Sort is 0, otherwise it just interpolates the last parts like in continuous function.

Visual settings

If this line chart is visible.
To easily show and hide the individual lines from the chart
Interpolation function used to connect the points
0 - none (line is hidden), 1 - linear (straight lines between points), 2 - cosine, 3 - hermite, 4 - cubic.
Width of the line in pixels. 0 hides the line.
CSS color used for the line. It can be any string usable for CSS background attribute.
When set, the Color2 is used for ascending lines and the Color for descending lines. It can also simulate 3d effect of the line.
Type of the point, it is number of icon.
0 - hidden, 1 - black, 2 - red, 3 - blue, 4 - green, 5 - pink, 6 - yellow, 7 - light blue, 8 - gray

API for standalone usage

Calculates and renders the Chart into the tag. The tag can be tag id or HTMLElement itself.
It can be called also after any change in the Chart to recalculate and re-render it.