DataGrid Column Presets

Overview

JavaScript Gantt chart consists of two parts: TimeLine, that contains visualized information, and DataGrid, that displays strings' numbers and names along with additional information. In this article we will describe how information in the dataGrid columns can be formatted using presets and how to create a custom column formatter.

Column Formatting

DataGrid columns can contain different types of information. You can format each column according to your needs and preferences. Use setColumnFormat() to define an information field in your dataset or a preset for data formatting.

var column = dataGrid().column(2);
column.title("dateDmyDots");
column.setColumnFormat("actualStart", "dateDmyDots");

Let's take a closer look at the presets.

Presets

There are several presets for the setColumnFormat()

method. Some of them are useful for formatting dates, some can adjust simple text and some can process numeric values:

Preset Description Result
dateCommonLog Display date as day/month/year. Day and year have numeric format while month presented in a form of text 3 letters long.
Playground
dateDmyDots Display date as dd.mm.yy. Day, month and year have numeric format and all of them are 2 figures long.
Playground
dateIso8601 Display date as yyyy-mm-dd. Day, month and year have numeric format. Year is 4 figures long while month and day are 2 figures long
Playground
dateUsShort Display date as yyyy-mm-dd. Day, month and year have numeric format. Year is 4 figures long while month and day are 2 figures long.
Playground
percent Format percentage values (assuming that for numeric values 1 stands for 100% and for string values "1" stands for 1%.
Playground
directNumbering Format simple numbers.
Playground
shortText Adjusting text values and fitting it into small columns.
Playground
text Show simple text values without any adjustment.
Playground

Custom Formatter

If your data requires more complex customization you can use your own object with custom settings for data formatting and visual settings. Here is a sample of custom column content formatting:

  // data grid getter
  var dataGrid = chart.dataGrid();

  // create custom column
  var customColumn = dataGrid.column(2);

  // set title for custom column
  customColumn.title("Duration");

  // set custom formatter
  customColumn.setColumnFormat(
    // get id of each string
    "actualStart", 
    {
      // set formatting function
      "formatter": function(value){
        var date = new Date(value);
        // get minuts
        var minutes = date.getUTCMinutes();
        // get hours
        var hours = date.getUTCHours();
        // get month as a word 3 letters long
        var month = date.toLocaleDateString("en-US", {month: "short"});
        // if it is between 12.00 a.m. and 11.59 a.m.
        if (hours < 12) {
          // if 12.00 a.m.
          if (hours === 0 && minutes === 0)
          // display just month and day
            return month + " " + format(date.getUTCDate());
          // format and display hours, minutes, month and day
          return format(hours) + ":" + format(minutes) + " a.m. " + month + " " + format(date.getUTCDate());
          // if it is between 12.00 p.m. and 11.59 p.m
        }else{
          // format and display hours, minutes, month and day
          return format(hours) + ":" + format(minutes) + " p.m. " + month + " " + format(date.getUTCDate());
        }
        function format (number) {
          // if the number is less than 10
          if (number<10)
          // add zero before the digit
            return "0" + number;
          return number;
        }
      },
      // set text visual appearance
      "textStyle": {
        // set clue font color
        "fontColor": "blue"
      },
      // set custom column width
      "width": 150
    }
  );

The object for column customization may contain three parameters: width, textStyle and formatter. The width parameter sets custom column width, textStyle adjusts visual appearance of the text in the column and formatter is a function for adjusting the data in each cell of the column.
Note: If you want to use same formatter for several columns you can create custom function beyond the chart dataGrid scope and use it wherever you want.

var dataGrid = chart.dataGrid();

var column2 = dataGrid.column(2);
// Sets column formats.
column2.setColumnFormat("actualStart", {
  "formatter": columnFormatter
});

var column3 = dataGrid.column(3);
// Sets column formats.
column3.setColumnFormat("actualEnd", {
  "formatter": columnFormatter
});

// custom formatting function
function columnFormatter (value){
  /* code of your function */
}

Here is a sample with custom formatting function applied to two columns:

Playground

Note: In some cases it is more appropriate to use format() method than setColumnFormat() method. For example, if you need to use information from two or more fields of your data it is better to use format() instead of setColumnFormat(). Please, see the DataGrid article for more information.

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