The following is an interactive, web based Ajax Thin-Client Treemap demo built with JViews Enterprise

About This Demo

This example demonstrates a treemap chart displayed in a DHTML Web Client using JViews Charts Faces component.

This example shows the world-wide energy production and consumption, from 2004 to 2007, by energy type, by country, and by year. It consists of three parts:

  • At the top, a set of drop-down choices and buttons to control the treemap display.
  • In the center, a treemap displays the the type-country-year records, also grouped by type, by country, or by year, in a way that some consumption records appear big and others visually insignificant - depending on the amount of energy - or some records stand out - depending on the type of energy. This treemap is optimal for getting an overview of all records and for spotting particular records with extraordinary size combined with specific attributes.
  • At the bottom, a table displays the raw data. This table is optimal for viewing all the details of the selected records.


The selection between the treemap and the table is synchronized. This allows you to immediately see the details of a record (in the table) when you click it in the treemap.

How to Use This Demo

This example allows you to display the stock quotes of one or several companies, as well as several technical market indicators. Two kinds of charts are used to display the stock data:

  • The upper chart, which displays the stock data of the company being analyzed. Several other companies can be displayed in overlay, as well as indicators such as moving averages.
  • Two lower charts, each of them displaying one technical indicator (Volume, RSI, MACD, and so on).

How to Use the Sample

Picking a Record or a Group of Records

You can click a single record or a group of records in the treemap, and the selected records will be displayed in the table and highlighted in the treemap. For example, you can look for the biggest treemap rectangle: by default this will show the record representing the largest consumption. You can also look for the countries with the largest amount of nuclear energy. You can also use the tooltips.

Drilling Down on a Group of Records

When you click a group of records (a year, or a country) in the treemap and you press the Drill-Down button the treemap shows a magnified view of only the selected record. This means that the focus of the treemap has changed.

Using the History Buttons

The Previous View and Next View buttons can be used as in a Web browser. The Up One Level button will change the focus to the group of records containing the current focus.

Changing the Partitioning Criterion

You can change the criterion by which records are grouped in the treemap. To do so use the Group By and Then By drop-down menus.

Changing the Meaning of Importance

You can change the way the treemap expresses the importance of a record. The treemap shows importance through a bigger area of the rectangle on the screen. You can decide which characteristics of a record determines the area. Only numeric table columns can be used for this purpose. The choices that make most sense are the "Consumption" and the "Production" columns.

Changing the Meaning of Colors

You can change the way the treemap highlights particular records through colors. Both numeric and symbolic table columns can be used for this purpose. For numeric table columns, the color scheme varies from green (for high values) to red (for low values). For symbolic table columns, such as Country or Region, the color scheme is chosen to give the appropriate contrast; the colors themselves do not have a particular meaning.

Get Started With JViews

Contact us today to speak with an expert about getting started with JViews Java visualization software.