TreeGrid v6.4
Line charts
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.
TreeGrid can show one or more charts in space row cells of type Chart.
<Space cell> string Type [“Text”] Type=”Chart” new 6.4 .
Type=”Chart” sets the cell to show line chart.
<Space cell> string Chart new 6.4 .
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.
<Space cell> string[] SourcesY new 6.4 .
Specifies column names where to get the Y sources for the chart.
Every column will produce one line.
<Space cell> string[] SourcesX new 6.4 .
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.
<Space cell> string Parent new 6.4 .
To show chart only for children of some row in tree, set the Parent to the parent row id.
<Space cell> string[] Refresh new 6.4 .
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.
<Space cell> int Width .
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.
<Space> int Height .
Height of the whole row in pixels. It specifies the Height of the chart.
API method void GetChart (string id) new 6.4 .
Returns the actually rendered TLineChart object with the given id.
The chart is accessible only after it is rendered.
API method void RefreshChart (string id) new 6.4 .
Recalculates and repaints the actually rendered TLineChart object with the given id.
It just calls RefreshCell for the cell displaying the chart.
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 or Points 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');
TLineChart string id new 6.4 .
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).
TLineChart TChartLine [ ] Lines new 6.4 .
Array of settings of individual lines.
In standalone usage the lines contain also points data.
TLineChart TChartLine Default new 6.4 .
Default settings for all lines.
These attributes of Default are used when the line does not have defined the attribute.
TLineChart string Class [“GMChart”] Only standalone usage new 6.4 .
Class prefix for all items in the chart.
For TreeGrid usage it is set always to <Cfg Style> value + “Chart”
Size
TLineChart int Width new 6.4 .
Width of the chart space in pixels.
If not set, it is computed from the parent tag or cell width.
TLineChart int Height new 6.4 .
Height of the chart space in pixels.
If not set, it is computed from the parent tag or row height.
TLineChart float MinX new 6.4 .
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.
TLineChart float MaxX new 6.4 .
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.
TLineChart float ChartRoundX new 6.4 .
Rounds the first X down and last X up in chart if not set MinX and MaxX.
TLineChart float ChartAddX new 6.4 .
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)
TLineChart float MinY new 6.4 .
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.
TLineChart float MaxY new 6.4 .
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.
TLineChart float ChartRoundY new 6.4 .
Rounds the first Y down and last Y up in chart if not set MinY and MaxY.
TLineChart float ChartAddY new 6.4 .
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
TLineChart int Left new 6.4 .
Space in pixels reserved from left. Used for Axis Y labels.
TLineChart int Right new 6.4 .
Space in pixels reserved from right.
TLineChart int Top new 6.4 .
Space in pixels reserved from top. Used for caption.
TLineChart int Bottom new 6.4 .
Space in pixels reserved from bottom. Used for Axis X labels.
TLineChart float AxisX new 6.4 .
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, ...
TLineChart float LabelX new 6.4 .
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 ...
TLineChart string LabelYFormat new 6.4 .
Format string to format the label x numbers.
It is standard TreeGrid Format string.
TLineChart float AxisY new 6.4 .
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, ...
TLineChart float LabelY new 6.4 .
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 ...
TLineChart string LabelYFormat new 6.4 .
Format string to format the label y numbers.
It is standard TreeGrid Format string.
TLineChart string Caption new 6.4 .
Text shown above the chart, the space for it should be reserved by Top attribute.
TChartLine float[] X Only standalone usage new 6.4 .
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.
TChartLine float[] Y Only standalone usage new 6.4 .
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.
TChartLine int Sort [1] new 6.4 .
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.
TChartLine bool Connect [0] new 6.4 .
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.
TChartLine bool Visible [1] new 6.4 .
If this line chart is visible.
To easily show and hide the individual lines from the chart
TChartLine int Interpolation [3] new 6.4 .
Interpolation function used to connect the points
0 – none (line is hidden), 1 – linear (straight lines between points), 2 - cosine, 3 - hermite, 4 - cubic.
TChartLine int Width [2] new 6.4 .
Width of the line in pixels. 0 hides the line.
TChartLine string Color [“black”] new 6.4 .
CSS color used for the line. It can be any string usable for CSS background attribute.
TChartLine string Color2 new 6.4 .
When set, the Color2 is used for ascending lines and the Color for descending lines. It can also simulate 3d effect of the line.
TChartLine int PointType [1] new 6.4 .
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
global func. TLineChart ShowLineChart (TLineChart Chart, string tag) new 6.4 .
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.