Text Tree Chart (todo)
In this article, we will explain how to create and customize a Gauge chart. So let's get started!
Last updated
In this article, we will explain how to create and customize a Gauge chart. So let's get started!
Last updated
A gauge or dial chart is a type of chart that displays a single data point in the form of a dial or gauge. It is often used to display data such as current values, progress, or status. Gauge charts are typically used when you want to show a single value in relation to a set of predefined scales or thresholds.
For example, a gauge chart might be used to display the current temperature in a room, with the dial pointing to the current temperature on a scale from 50 to 80 degrees. Another example might be a gauge chart showing the current fuel level in a car, with the dial indicating the percentage of fuel remaining on a scale from 0 to 100%.
Gauge charts can be useful for quickly visualizing a single data point within a specific range, and can be especially useful for displaying data that is constantly changing, such as real-time data. They are often used in dashboards and other visualizations where it is important to quickly convey information at a glance.
Here is an example of a gauge chart using sample data:
Imagine that we want to display the current temperature in a room using a gauge chart. The temperature in the room can range from 50 to 80 degrees, and we want to display the current temperature on the chart. Here is some sample data we could use:
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 |
Navigate to Add New Chart screen
Select data source
Select "Table Map Chart" type from gallery
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.
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:
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:
Make sure to clearly label the chart and include a descriptive title.
Use a clear and readable font for the labels and data values to make it easier for readers to understand the chart.
Use appropriate coloring and shading to differentiate between the different data points and to make the chart visually appealing.
Consider using hover-over text or other interactive elements to help users explore the data and understand the relationships between the different data points.