Skip to main content Skip to complementary content
Qlik Resources

Creating treemaps

This section describes how to create treemaps with the Visualization API and qlik-visual.

Creating a basic treemap

In this example we create a basic treemap, containing one dimension and one measure, and with a custom title.

  1. Create the chart

    Create the container for the chart. The visualization type is treemap.

    Visualization API

    app.visualization.create(
  'treemap',
  [],
  {}
)

    qlik-visual

    <qlik-visual appid="Tutorial-Golf.qvf"
  type="treemap"
  cols='[]'
  options='{}' >
</qlik-visual>
  2. Define dimension

    Define the dimension as a column. Note that null values have been suppressed on the dimension.

    { "qDef": { "qFieldDefs": [ "NetScoreName" ] }, "qNullSuppression": true }
  3. Define measure

    Define the measure as a column.

    { "qDef": { "qFieldDefs": [ "NetScoreName" ] }, "qNullSuppression": true }, { "qDef": { "qLabel": "Frequency", "qDef": "Count(NetScoreName)" } }
  4. Define title

    Then define the title in the options.

    { "showTitles": true, "title": "Net score outcome" }

Result

Example treemap object

Code examples

Applying additional dimensions

To make full use of the treemap it is preferable to have two or three dimensions. Using more than two or three dimensions is not recommended because the treemap may become unmanageable.

In this example we add a second dimension (Year).

  1. Define second dimension

    Define the new dimension (Year) as a column and place it above the existing one (NetScoreName). Note that null values have been suppressed on both dimensions.

    { "qDef": { "qFieldDefs": [ "Date.autoCalendar.Year" ], "qFieldLabels": [ "Year" ] }, "qNullSuppression": true }, { "qDef": { "qFieldDefs": [ "NetScoreName" ] }, "qNullSuppression": true }

Result

Example treemap object with additional dimensions and color modifiers

Code examples

Coloring by dimension

In this example we color the treemap by one of the dimensions. When you color a visualization by a dimension, all values in the visualization are colored by the corresponding values in the dimension field selected.

  1. Set the color mode

    Color by dimension is turned on in the color object in the options. Disable auto coloring by setting "auto": false. Then set "mode": "byDimension" to color by dimension.

    { "showTitles": true, "title": "Net score outcome", "color": { "auto": false, "mode": "byDimension" } }
  2. Define dimension and set color palette

    Define the dimension to color by: "byDimDef": { "key": "NetScoreName" }. Then select the color palette to apply to the visualization: "dimensionScheme": "12".

    { "showTitles": true, "title": "Net score outcome", "color": { "auto": false, "mode": "byDimension", "dimensionScheme": "12", "byDimDef": { "key": "NetScoreName" } } }
  3. Additional color settings

    Set "persistent": true to use persistent colors on data points between selections.

    If you color by a master dimension, that is a dimension that is stored in the library, you may want to use the colors defined for the master dimension. If so, you set "useDimColVal": true.

    { "showTitles": true, "title": "Net score outcome", "color": { "auto": false, "mode": "byDimension", "useDimColVal": true, "persistent": true, "dimensionScheme": "12", "byDimDef": { "key": "NetScoreName" } } }
  4. Define qAttributeDimensions

    When coloring by dimension, you must define qAttributeDimensions for the dimension to color by: "qAttributeDimensions": [ { "qDef": "NetScoreName", "id": "colorByAlternative", "label": "Year" } ].

    { "qDef": { "qFieldDefs": [ "NetScoreName" ] }, "qNullSuppression": true, "qAttributeDimensions": [ { "qDef": "NetScoreName", "id": "colorByAlternative", "label": "Year" } ] }

Result

Example treemap object with more detailed color modifiers by dimension and measure

Code examples

Coloring by expression

Coloring by expression applies colors to a visualization based on a user-defined expression. This enables you to use expressions to define both the colors used and the values upon which the colors are applied in a visualization. Supported formats for color expressions are: RGB, ARGB, and HSL.

  1. Set the color mode

    Color by expression is then turned on in the color object in the options. Disable auto coloring by setting "auto": false. Then set "mode": "byExpression" to color by expression.

    { "showTitles": true, "title": "Net score outcome", "color": { "auto": false, "mode": "byExpression" }
  2. Define color expression

    Define that the expression is a color code: "expressionIsColor": true. Then define the color expression used: "colorExpression": "If(NetScoreDiff<0,RGB(82, 162, 204),If(NetScoreDiff>0,RGB(248, 152, 29),RGB(145, 194, 106)))".

    { "showTitles": true, "title": "Net score outcome", "color": { "auto": false, "mode": "byExpression", "expressionIsColor": true, "colorExpression": "If(NetScoreDiff<0,RGB(82, 162, 204),If(NetScoreDiff>0,RGB(248, 152, 29),RGB(145, 194, 106)))" }, "legend": { "show": false } }
  3. Define qAttributeExpressions

    When coloring by expression you must define qAttributeExpressions for the first measure: "qAttributeExpressions": [ { "qExpression": "If(NetScoreDiff<0,RGB(82, 162, 204),If(NetScoreDiff>0,RGB(248, 152, 29),RGB(145, 194, 106)))", "id": "colorByExpression" } ].

    { "qDef": { "qLabel": "Frequency", "qDef": "Count(NetScoreName)" }, "qAttributeExpressions": [ { "qExpression": "If(NetScoreDiff<0,RGB(82, 162, 204),If(NetScoreDiff>0,RGB(248, 152, 29),RGB(145, 194, 106)))", "id": "colorByExpression" } ] }

Result

Example treemap object colored by expression

Code examples

Did this page help you?

If you find any issues with this page or its content – a typo, a missing step, or a technical error – let us know how we can improve!

Leave your feedback here