TreeGrid v6.4

Line charts

TreeGrid documentation index

 

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.

 

<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.

 

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 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');

 

Base chart settings

 

Basic attributes

 

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.

 

 

Individual chart lines

 

Data sources

 

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.

 

Visual settings

 

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

 

 

API for standalone usage

 

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.