LogoLogo
Platform
  • Welcome to Infinity - AI Powered Data Analytics tool.
  • Interactive Quick Start Guide
  • Comprehensive User Guide
    • 1. Connecting Your Data
      • Uploading Files as a Datasource
      • Connecting to Databases and Cloud Data Sources
      • AI-Powered Data Definition Wizard
      • Managing Data Sources
      • Supported Data Connectors
    • 2. Charts
      • Creating Charts
        • AI Chart Builder
        • Drag-Drop Builder
        • Data Explorer
      • Chart Customization
        • Chart Configuration Basics
        • Intent and Its Role in Chart Generation
        • Modifying Selected Data Sources and Tables
        • Understanding and Editing the SQL Query
        • Changing the Chart Type
        • Modifying Data Components
        • Using Pivoting for Multi-Dimensional Analysis
        • Applying Filters
        • Customizing Chart with Advanced Editor Panel
          • Styles
            • Chart Background
            • Titles
            • Legend
            • Grid
            • X-Axis
            • Y-Axis
            • Secondary Y-Axis
            • Series
          • Sharing
          • Prompts
          • JS (Code Mode)
        • Using AI Chatbot for Quick Modifications
      • Featured Chart Examples
        • Line/Bar/Column/Scatter Chart
        • Combo Chart
        • Stacked Area/Bar/Column Chart
        • 100% Stacked Column/Bar/Area Chart
        • Pie Chart
        • Metric Chart
        • Bubble Chart
        • Geo Chart
        • Geo with Makers Chart
        • Sankey Chart
        • Histogram Chart
        • Annotation Chart (ToDo)
        • Table Chart
        • Tree Map Chart
        • Timeline Chart (todo)
        • Gauge Chart (todo)
        • Custom Charts
      • Managing Charts
      • Accessing Charts
      • Chart Actions
    • 3. Storyboards
      • Creating Storyboards
      • Storyboard Customization
      • Managing Storyboards
      • Accessing Storyboards
      • Storyboard Actions
    • 4. Feed Page
    • 5. Curated Page
    • 6. Beacons: Working with Unstructured Data
      • Beacon : Basics
      • Creating Beacons
      • Accessing Beacon Data
      • Managing Beacon
    • 7. User and Access Management
      • Inviting Colleagues
      • Approving Join Requests
      • Roles
      • Orgs
      • Distribution Lists
      • Layouts
    • 8. Site Customization
    • 9. Subscriptions
      • Scheduled Emails
      • Event Based Notifications (Alerts)
      • Managing Alerts and Scheduled Emails
    • 10. Profile and settings
    • 11. Making the Most of Infinity's AI-Powered Features
    • 12. Advanced Topics
      • Chart Variables
      • Custom Computes for Event Based Subscriptions
      • Drill-down or Reference Charts
      • Custom XLS Template
      • Custom PPT Template
      • Editing the Chart JavaScript
    • 13. Getting Additional Help
      • Video Resources
      • Best Practices
      • FAQs
        • Error while creating chart
        • User not able to access Charts
        • Unable to Create a DataSource
        • Hard Reset/Reloading the browser
      • Contact Support
  • Topics to address
Powered by GitBook
On this page
  • How-to build a line chart?
  • Tree map chart configuration:
  • Tree map chart customization options
  1. Comprehensive User Guide
  2. 2. Charts
  3. Featured Chart Examples

Timeline Chart (todo)

In this article, we will explain how to create and customize a Annotation chart. So let's get started!

PreviousTree Map ChartNextGauge Chart (todo)

Last updated 1 month ago

A tree chart is a graphical representation of a data tree that allows you to visually explore the hierarchical relationships between different data points. In a tree chart, each node can have one parent (except for the root node, which has no parents) and zero or more children. The root node is typically the starting point of the tree, and all other nodes branch off from it.

Here is an example of a table map chart and sample data:

This tree map chart shows data on the populations and per-capita of various counties within different cities and countries. The rectangles are nested to represent the hierarchical structure of the data, with the size of each rectangle representing the population and the color representing the per-capita of the corresponding region . The user can hover over each rectangle to see the name and metrics of the region.

Sample data:

Child Node
Parent Node
Population (k)
Percapita ($)

World

0

0

North America

World

0

0

United States

North America

0

0

California

United States

0

0

Los Angeles

California

10,206

62,641

San Francisco

California

884

62,641

San Diego

California

3,333

62,641

New York

United States

0

0

New York City

New York

8,175

62,641

Buffalo

New York

260

62,641

Rochester

New York

207

62,641

Asia

World

0

0

South America

World

0

0

Africa

World

0

0

China

Asia

0

0

Fujian

China

0

0

Xiamen

Fujian

4,110

10,261

Fuzhou

Fujian

7,190

10,261

Quanzhou

Fujian

9,360

10,261

India

Asia

0

0

Tamil Nadu

India

0

0

Chennai

Tamil Nadu

8,653

2,059

Coimbatore

Tamil Nadu

2,356

2,059

Madurai

Tamil Nadu

1,754

2,059

Indonesia

Asia

0

0

Java

Indonesia

0

0

Jakarta

Java

10,575

4,295

Surabaya

Java

3,567

4,295

Bandung

Java

2,473

4,295

Brazil

South America

0

0

Sao Paulo

Brazil

0

0

Sao Paulo City

Sao Paulo

21,650

9,731

Rio de Janeiro

Sao Paulo

6,722

9,731

Belo Horizonte

Sao Paulo

5,604

9,731

South Africa

Africa

0

0

Gauteng

South Africa

0

0

Johannesburg

Gauteng

4,434

14,437

Pretoria

Gauteng

2,216

14,437

Soweto

Gauteng

1,296

14,437

Egypt

Africa

0

0

Cairo

Egypt

0

0

Cairo City

Cairo

9,772

3,452

Giza

Cairo

3,862

3,452

Alexandria

Cairo

4,301

3,452

How-to build a line chart?

Tree map chart configuration:

The configuration shown illustrates how to map the two nodes, population and per-capita to create a tree map chart:

In addition to mapping nodes, to create a tree chart, you will need to assign values to each node that determine its size and color. The sizes and colors are relative to all other nodes in the chart, so you can use them to highlight certain nodes or groups of nodes.

If a node is a leaf node (i.e., it has no children), you can specify its size and color. If it is not a leaf node, it will be displayed as a bounding box for leaf nodes. This helps to visually group nodes and make it easier to understand the relationships between them.

The default behavior of a tree chart is to move down the tree when a user left-clicks a node, and to move back up the tree when a user right-clicks the chart. This allows you to easily navigate through the tree and explore the data.

Please note:

  • Remember to set one node as the root with "null" in the parent node column.

  • Make sure that all parent and child nodes are unique, with no self-references. For example, if mapping New York State to New York City, use "New York City" as the child node and "New York State" as the parent node.

  • Make sure that all child nodes have a parent node.

Tree map chart customization options

Infinity offers many customization options for your table map chart. To access these options, click on the customize tab in the chart builder screen. This will display a list of customization options.

Here is a list of notable customization options for the line chart.

Feature
Description

Aggregation

To create an aggregation, click on the data series chip in the data mapping section and choose the desired aggregation.

There are various aggregation options available based on the data type.

Renaming the Data Series

To rename a data series, click on the data series chip in the data mapping section. A pop-up will appear, allowing you to change the name and any aggregation options.

Colors

There are a few options for setting the colors for your rectangles and hierarchies. First, you can use "max," "medium," and "min" colors to set the colors of the color scale. Similarly, you can change the colors of rectangles when highlighted using "maxhighlight," "minhighlight," and "mediumhighlight."

Other

Max Depth:

  1. Specify the maximum number of levels that you want to display in the current view. Any levels beyond this limit will be flattened into the current plane.

  2. If your tree has more levels than the specified limit, you will need to navigate up or down in the tree to view them.

Max Post Depth: You can set the number of levels of nodes beyond "maxDepth" to display in a "hinted" fashion:

There are a few useful tips to keep in mind when using tree map charts:

  1. Make sure to clearly label the chart and include a descriptive title.

  2. Use a clear and readable font for the labels and data values to make it easier for readers to understand the chart.

  3. Use appropriate coloring and shading to differentiate between the different data points and to make the chart visually appealing.

  4. Consider using hover-over text or other interactive elements to help users explore the data and understand the relationships between the different data points.

Navigate to screen

source

from gallery

and the chart to create the desired visualization.

Add New Chart
Select data
Select "Table Map Chart" type
Configure
customize