Search

Entities

Overview

An entity is a data item representing a persistent object, such as a person, phone number, or email address. Entities run horizontally across the timeline, and are shown when involved in events within the visible time range.

Each entity is shown as a labelled row known as an entity row. If your timeline includes overlapping events, the entity row can be shown as multiple rows for greater clarity using expanded rows.

Entity labels are made up of text and, optionally, a glyph. As you zoom out, KronoGraph arranges entities more compactly, hiding their labels. Use the lens control Lens icon, on the left, to magnify entities and see their labels. See also Entity Label Area Width and label.

Note that entity rows can be displayed with or without entity lines by setting showLines.

Every entity is identified by an id that is unique across both entities and events.

Styling Entities

You can enhance the appearance of your timeline by styling your entities in the following ways:

You can also use both approaches together. If the same property is set in both places, the value on the entity itself takes precedence.

See also Grouping Entities for details about setting up nested groups, and Ordering Entities for information about the different ways that you can order entities, types and groups in the timeline.

Styling an individual entity

Style an entity individually by setting properties on its entity object.

Here the first entity has all the default properties and the second entity has some custom properties set:

Kronograph Example

Log in to view live examples 
const entities = {
  "Default Entity Style": {},
  "Custom Entity Style": {
    color: "#c9477b",
    lineWidth: 5,
    labelColor: "#ffd88f",
    glyph: true,
    fadeOutsideRange: true,
  },
};

Try out some of the properties in the Styling Entities example.

Styling by entity type

Entity types let you set up information about entity appearance and behavior in one place, and then apply those settings to multiple entities.

To do this, define an entityType object with the shared style and behavior settings, then assign that type to each entity. This works as follows:

  • Each entity can have only one type.
  • An entity type can itself specify a base type.
  • You can also set default values for all entities using a default entity type.

A type inherits style and behavior from its base type, and, if not defined there, from the default type.

Entities of the same type are, by default, grouped together. See Grouping Entities for information about creating and using groups. You can control the order in which entity types are listed using their order property, as described in Ordering Entities.

These examples illustrate entity types using a subset of the "Bigfoot Sightings" data from the Bigfoot Field Researchers Organization (BFRO). Here, the numbered sightings are organized into types by State. Each State has its own EntityType where the entity color is set.

There is an assigned order for the California and Colorado entity types. The order property allows you to control the sequence of entity types on the timeline.

Kronograph Example

Log in to view live examples

This is an example of how the entityTypes are shown in the data:

const entityTypes = {
  California: {
    color: "#e9d8a6",
    order: 1,
  },
  Connecticut: {
    color: "#94d2bd",
  },
  Colorado: {
    color: "#EE9B00",
    order: 0,
  },
};

This is how the entityTypes are assigned to the entities using the type property:

const entities = {
  7211: {
    type: "California",
  },
};

See types in use in the Styling Items by Type example.

Entity base types

Entity types can also, optionally, inherit properties from a base type, specified by baseType.

In this example, each entity has a type based on its classification. "Class A" and "Class B" set the labelColor and the entity color is inherited from the "California" entity type.

Kronograph Example

Log in to view live examples 
const entities = {
  7555: {
    type: "Class A",
  },
};
const entityTypes = {
  California: {
    color: "#62b6cb",
  },
  "Class B": {
    labelColor: "#f9c74f",
    baseType: "California",
  },
  "Class A": {
    labelColor: "#90be6d",
    baseType: "California",
  },
  "Class C": {
    baseType: "California",
  },
};

See the Inherited Styles example for more details.

The default entity type

You can set up a default entity type by creating an entity type named default:

const entityTypes = {
  default: {
    color: "#EE9B00",
    lineWidth: 5,
    labelColor: "#EE9B00",
  },
};

Any entity that doesn't have these properties set will inherit them from this default type.

Note the default type cannot specify a baseType.

Grouping Entities

Grouping entities into entity groups can help make it easier to work with large numbers of entities and see relationships in your data.

Entities are automatically grouped by type, but once you have set up your entity types, you can then create additional groups using the groupBy property. This allows you to specify which data properties the entities are grouped by, and the nesting of those groups.

The following example uses data for a set of individuals to illustrate grouping. The entities are grouped first by home city, then by country:

First assign each individual a type of 'Person', and set their data properties to specify the 'city' and then 'country' for each:

const entities   
          
                   
                                            
    
        
                   
                                             
    
            
                   
                                             
    
 ;

Next, configure entities of type 'Person' to be grouped by 'city' and then 'country' using groupBy:

const entityTypes = {
  person: {
    groupBy: ["city", "country"],
  },
};

By default, KronoGraph groups entities by type, then by the properties listed in groupBy. If multiple properties are specified, KronoGraph creates a nested hierarchy of groups in the order in which they are entered:

Kronograph Example

Log in to view live examples

Ordering Entities

The timeline ordering property controls how entity types, groups, and individual entities are ordered.

You can further control the order in which entity types are listed by setting their order property. Types with lower values have higher priority and are shown higher in the list:

  entityTypes: {
    // listed at the top
    person: { order: 1 },

    // listed in the middle
    store: { order: 2 },

    // listed at the bottom
    eshop: {},
  },

For more details on groups, see the Groups example.

Glyphs

Glyphs are small circular visual markers, shown beside entity and entity group labels. They help add meaning or visual emphasis to entities or types of entities, and can be styled with color or font icons as illustrated in the Styling Glyphs example.

Kronograph Example

Log in to view live examples

Use the following APIs to add glyphs to your entities:

const entityTypes   
             
                
                       
                 
                                          
                        
                         
        
      
    
                   
            
                       
                 
                                          
                        
                         
        
      
    
 ;
const entities   
                          
                        
                     
                     
    
                         
                            
                     
                
                     
    
                            
                            
                     
                         
    
                         
                         
                     
                         
    
 ;

Glyphs inherit the color of the entity or entity type that they are applied to unless you assign a color via the Glyph object.

The position of glyphs relative to the entity label (or entity type label) is controlled globally via the glyphPosition option.

For more ideas take a look at the Styling Glyphs example.

Terms of use

These terms do not alter or supersede any existing agreements between you (or your employer) and us.

By accessing or using any Content you agree to be bound by these Terms of Use. Please review these terms carefully before using the website.

The contents of this website, including but not limited to any text, code samples, API references, schemas, interactive tools, and other materials (collectively, the 'Content'), are made available for informational and internal evaluation purposes only. All intellectual property rights in the Content are reserved. No licence is granted to use the Content for any commercial purpose, or to copy, distribute, modify, reverse-engineer, or incorporate any part of the Content into any product or service, without our prior written consent.

This Content is provided “as is” and “as available,” without any representations, warranties, or guarantees of any kind, whether express or implied, including but not limited to implied warranties of merchantability, fitness for a particular purpose, non-infringement, or accuracy. To the fullest extent permitted by applicable law, we expressly exclude and disclaim all implied warranties, conditions, and other terms that might otherwise be implied.

We disclaim all liability for any loss or damage, whether direct, indirect, incidental, consequential, or otherwise, arising from any reliance placed on the Content or from your use of it, to the fullest extent permitted by applicable law. By continuing to access or use the Content, you acknowledge and agree to these terms.