Table Layout

Overview

Table layout is a kind of dashboard tools, which provides clear and effective way of positioning data on plot. Dashboard is an easy to read, often single page, real-time user interface, showing a graphical presentation of the current status (snapshot) and historical trends of an organization’s key performance indicators to enable instantaneous and informed decisions to be made at a glance.

Table Layout helps to manage several elements within the limits of one chart container. Table may help to control visual appearance and logic structure of data.

Acceptable Content

A cell in table layout dashboard may contain:

  • String with simple text or a number
    • Any visual element of AnyChart (Legend, LegendItem, Label, Title, etc)
    • Any type of a chart (pie, cartesian, etc)
    • Any data series (for instance, anychart.cartesian.series.Line)

Visual Settings

Visual settings control:

  • Cell padding & text settings
    • Fill
    • Border
    • Cols and rows span

Fill

With AnyChart html5 charting framework it is possible to color background of any cell with a solid color, with a gradient transition or fill it with an image. It can be achieved with .cellFill() method.


This section contains information on colorizing the whole table and each of the cells separately. To find out all possible ways of controlling background color, please see Fill tutorial.

Table fill

Background for all the table can be configured with .cellFill() parameter.

  table.cellFill('#E1E1E1');

JsFiddle Playground

Even and Odd Rows

As a more advanced way of controlling table's background color there are parameters to adjust colors of even and/or odd row in the table. Parameter .rowEvenFill() is responsible for the background color of even rows and .rowOddFill() is responsible for the background color of all odd rows.

  table.rowOddFill('#F5F5F5');  // color for odd rows
  table.rowEvenFill('#FFFFFF'); // color for even rows

Here is the sample with "#FFFFFF" background color for all cells in even rows and "#F5F5F5" color for all cells in odd rows.

JsFiddle Playground

Cell Fill

For emphasizing attention on one of the cells, it can be colorized in unique way. Background color of a certain cell is controlled by parameter .fill() and it should be applied to the cell itself.

  var cell = table.getCell(0,1);  // Get a cell from the first row in second column
  cell.fill('#E0E43A');           // Set gold color as a background for the cell

Row Settings

In most cases it is required to adjust settings for all cells in a row. For instance, each cell of the first row can contain some explanations for every column of the table. Use .getRow() method to tune visual appearance of the whole row.

  // get the first row
  var headerRow = table.getRow(0);
  
  // set style for the first row
  headerRow.height(40).cellFill('#F5F5F5').fontWeight(900);

These settings makes the color of first row slightly darker and bold all the text in the row.

JsFiddle Playground

Height

Default height of the table is the height of the table's container. Fixed height of the table can be set using .height() parameter. If you want to have flexible table consider using .minHeight() and .maxHeight() methods. Moreover, .height(), .minHeight() and .maxHeight() methods can be set for each row of a table.

Column Settings

You can adjust settings for a particular column as easy as you do it for a row. Use .getCol() method to tune all the cells in the column.

  table.getCol(0)         // settings for the first column
.width(70)            // set width of the column
.cellFill('#F5F5F5')  // set background color for all cells in the column
.fontWeight(900);     // bold text in every cell of the column

We use such settings to set fixed width for the first column, make this column a bit darker and bold all the text in the column.

JsFiddle Playground

Width

Default width of the table is the width of the container. Fixed width of the table can be set using .width() parameter. If you want to have flexible table consider using .minWidth() and .maxWidth() methods. Moreover, .width(), .minWidth() and .maxWidth() methods can be set for any column of a table.

Border

Border is a part of a table. It visually divides whole table into separate cells as well as wraps these cells. As any part of chart it can be configured and all settings can be adjusted. In this section there are just several demonstration samples. Full information on borders and lines settings can be found in Strokes and Lines tutorial.


In this section revealed all methods of controlling borders in a table. Parameter .cellBorder() provides an opportunity to set desirably configured border for all cells in a table. As far as content for each cell can be absolutely different, style for each of the cells can be set individually as well.


Sample below demonstrates setting gray stroke for the whole chart, set thickness equal to 1 px and makes it dashed, with 5 px dashes and 2 pixel gaps. Moreover, to cells have red stroke, which emphasize them.

  //set style
  table.cellBorder(
'#B8B8B8',          // Color
1,                  // Thickness
'5 2'               // Dash and gap length
  );
  
  // get cell from the second column and second row
  table.getCell(1,1).border({
keys: ['#86cf38'],  // Set leaner color
thickness: 3        // Set thickness
  });
  
  //get cell from second column and fourth row
  table.getCell(3, 1).border({
keys: ['#86cf38'],  // Set leaner color
thickness: 3        // Set thickness
  });

JsFiddle Playground

Note: As far as any cell has 4 borders, there is a way to control style for each of them. Parameters .border().top(), .border().left(), .border().bottom() and .border().right() of the .getCell() method controls style for each of 4 cell's borders.


Moreover, there are 4 methods to control each of the border for every cell in the table. .top(), .left(), .bottom() and .right() of .cellBorder() adjust style of a border for each cell in table. Also, these four methods can be applied to .border() of the table for tuning any border of the table.

Text Settings and Padding

Table layout may contain simple text in several cells. Text settings can be applied to the cell of the table or to the whole table.


Cells are not limited in content type and amount of data, which may lead to a problem of content sticking to the cell's borders. For preventing such situations there is .cellPadding() parameter for controlling content position.

Sample below demonstrates controlling text settings and using padding for the whole table

  table
.cellPadding(10)        // set 10px padding from each border of every cell
.vAlign('center')       // set vertical align of the text
.hAlign('right')        // set horizontal align of the text
.fontWeight(600)        // set text font weight
.fontSize(12)           // set text font size
.fontColor('#86cf38');  // set text font color

JsFiddle Playground

Span

In some cases it is desirable to enlarge a cell by uniting it with one or several cells from nearby. There are two parameters for spanning several cells into one. Parameter .rowSpan() unites the cell with cells below in the column and parameter .colSpan() unites cells in the row on the right side from the cell.

  // span cells
  table.getCell(1,0).rowSpan(2);  // span two cells into one row
  table.getCell(3,0).rowSpan(3);  // span tree cells into one row
  table.getCell(0,0).colSpan(2);  // span 2 cells 

  table.getCell(1,1).colSpan(2);  // span 2 cells in the row
  table.getCell(0,0).rowSpan(3);  // span 3 cells in the column

Sample below demonstrates connection of two cells in first row into one and connection of cells in first column according to season.

JsFiddle Playground

Using Table

Title

As far as title on a dashboard contains the main idea of a dashboard, it is vital to configure it's visual appearance. Here is a sample with simple title at the top of the dashboard and table layout dashboard below.

JsFiddle Playground

Header Row

Title may represent information for the whole dashboard, but for parts of dashboard it may require to format several titles. One of the most convenient way of configuring titles is setting desirable configuration for the first row of the table layout.


Here is a sample with text settings, applied only for the first (head) row of a table layout dashboard.

JsFiddle Playground

Common Elements

Table layout dashboard may contain several charts. For visualization sake different chart may use common elements. One of the most popular common elements is scale. As far as scale calculates values, common scale may be used in comparative purposes.


Here is a sample of table layout dashboard with all bullet charts using same scale and custom axis uses the scale as well.

JsFiddle Playground

You are looking at an outdated 7.11.0 version of this document. Switch to the 8.0.1 version to see the up to date information.