Page History

Sv translation

language	en

Tree Map chart

JSON used as input for Tree Map chart rendering consists of multiple elements.

Table of Contents

minLevel	3

Basic structure

Code Block
{ "elements": [ { "type": "treeMap", "values": [ ... ] ] }

Common elements

Name

Description

Example

chartId

Chart view identifier. Refer to REST API.

chart_159-NUeNe2yaRv_uO7ao2Bkig

bg_color

Defines the color of the background for the entire chart

#e5e5e5

is_decimal_separator_comma

Determines whether to use comma as decimal separator. [0, 1]

1

is_thousand_separator_disabled

Determines whether to use the thousands separator or not. [0, 1]

1

tooltip

Defines the basic tooltip settings for the entire chart.

Name	Description	Example
mouse	Mouse sensitivity	2
shadow	[true, false]	true
stroke	[0, 1]	1
colour	Default font color for tooltips	#202020
background	Default background for tooltips.	"#ffffff"

Example

Code Block

{
	"chartId": "chart_159-NUeNe2yaRv_uO7ao2Bkig",
	"bg_colour": "#e5e5e5",
	"is_decimal_separator_comma": 1,
	"is_thousand_separator_disabled": 1,
	"tooltip": {
	    "mouse": "2",
    	"shadow": true,
	    "stroke": 1,
	    "colour": "#202020",
	    "background": "#ffffff"
	},
	"options": {}
}

"elements" content

Each object in array elements describe one chart element. In example below we have only one chart element with type treeMap and contains array with 4 values. Each value object consists of label, tool tip, context, foreground, background and primary.

Name

Description

Example

type

Type of the chart. For tree map chart, the value is "treeMap"

treeMap

font-size

Size of the used font

12

values

Name	Description	Example
primary	Numerical size of rectangle	12345.4567
tip	Tooltip text to display on mouse hover	This is tooltip
label	Value label displayed inside a rectangle	This is label
context	If defined, context will be send to the client as event parameter
background	Colour of a rectangle	#4379bd
foreground	Colour of a text in rectangle	#ffffff

Code Block

 "elements": [
    {
      "type": "treeMap",
      "font-size": 12,
      "values": [
        {
          "label": "Praha",
          "tip": "Praha\n173,935.32584",
          "context": "{\"dataLink\":\"159_-1246808118\",\"identifierQuery\":\"[L_CITY={Praha}]\"}",
          "foreground": "#ffffff",
          "background": "#4379bd",
          "primary": 173935.32
        },
        {
          "label": "Ostrava",
          "tip": "Ostrava\n129,206.78054",
          "context": "{\"dataLink\":\"159_-1285321828\",\"identifierQuery\":\"[L_CITY={Ostrava}]\"}",
          "foreground": "#ffffff",
          "background": "#4379bd",
          "primary": 129206.78
        },
        {
          "label": "Poprad",
          "tip": "Poprad\n49,255.9769",
          "context": "{\"dataLink\":\"159_1174322742\",\"identifierQuery\":\"[L_CITY={Poprad}]\"}",
          "foreground": "#ffffff",
          "background": "#4379bd",
          "primary": 49255.97
        },
        {
          "label": "Brno",
          "tip": "Brno\n74,466.29905",
          "context": "{\"dataLink\":\"159_452775651\",\"identifierQuery\":\"[L_CITY={Brno}]\"}",
          "foreground": "#ffffff",
          "background": "#4379bd",
          "primary": 74466.29
        }
      ]
    }
  ]

Examples

Attachments

upload	false
old	false
sortBy	name

Sv translation

language	ja

ツリーマップチャート

ツリーマップチャートレンダリング入力として使用されるJSONは、複数の要素で構成されています。

Table of Contents

minLevel	3

基本的な構造

Code Block
{ "elements": [ { "type": "treeMap", "values": [ ... ] ] }

共通の要素

名

説明

例

chartId

チャートビュー識別子。 RESTAPIをご参照してください。

chart_159-NUeNe2yaRv_uO7ao2Bkig

bg_color

チャートの全体に背景の色を定義します

#e5e5e5

is_decimal_separator_comma

小数点記号としてカンマを使用/非使用を決定します　[0, 1]

1

is_thousand_separator_disabled

桁区切りを使用/非使用を決定します[0, 1]

1

tooltip

チャートの全体に基本的なツールチップの設定を定義します

名	説明	例
mouse	マウス感度	2
shadow	[true, false]	true
stroke	[0, 1]	1
colour	ツールチップのの色フォントデフォルト	#202020
background	ツールチップの背景デフォルト	"#ffffff"

例

Code Block

{
	"chartId": "chart_159-NUeNe2yaRv_uO7ao2Bkig",
	"bg_colour": "#e5e5e5",
	"is_decimal_separator_comma": 1,
	"is_thousand_separator_disabled": 1,
	"tooltip": {
	    "mouse": "2",
    	"shadow": true,
	    "stroke": 1,
	    "colour": "#202020",
	    "background": "#ffffff"
	},
	"options": {}
}

「要素」コンテンツ

要素配列内の各オブジェクトは、1つのチャート要素を記述します。以下の例では、treeMapタイプを持つ要素が1つしかなく、4つの値を持つ配列を含まれています。各値オブジェクトは、ラベル、ツールチップ、コンテキスト、前景、背景とプライマリーが構成されています。

名

説明

例

type

チャートタイプ。ツリーマップチャートの場合、値は「treeMap」とします

treeMap

font-size

使用するフォントのサイズ

12

values

名	説明	例
primary	四角形の数値サイズ	12345.4567
tip	マウスホバーで表示するツールチップのテキスト	これはツールチップです
label	矩形内に表示される値ラベル	これはラベルです
context	定義されている場合、コンテキストがイベントパラメータとしてクライアントに送信されます
background	四角形の色	#4379bd
foreground	四角形内のテキストの色	#ffffff

Code Block

 "elements": [
    {
      "type": "treeMap",
      "font-size": 12,
      "values": [
        {
          "label": "Praha",
          "tip": "Praha\n173,935.32584",
          "context": "{\"dataLink\":\"159_-1246808118\",\"identifierQuery\":\"[L_CITY={Praha}]\"}",
          "foreground": "#ffffff",
          "background": "#4379bd",
          "primary": 173935.32
        },
        {
          "label": "Ostrava",
          "tip": "Ostrava\n129,206.78054",
          "context": "{\"dataLink\":\"159_-1285321828\",\"identifierQuery\":\"[L_CITY={Ostrava}]\"}",
          "foreground": "#ffffff",
          "background": "#4379bd",
          "primary": 129206.78
        },
        {
          "label": "Poprad",
          "tip": "Poprad\n49,255.9769",
          "context": "{\"dataLink\":\"159_1174322742\",\"identifierQuery\":\"[L_CITY={Poprad}]\"}",
          "foreground": "#ffffff",
          "background": "#4379bd",
          "primary": 49255.97
        },
        {
          "label": "Brno",
          "tip": "Brno\n74,466.29905",
          "context": "{\"dataLink\":\"159_452775651\",\"identifierQuery\":\"[L_CITY={Brno}]\"}",
          "foreground": "#ffffff",
          "background": "#4379bd",
          "primary": 74466.29
        }
      ]
    }
  ]

例

Attachments

upload	false
old	false
sortBy	name

Page tree

Versions Compared

Old Version 3

New Version Current

Key

Tree Map chart

Basic structure

Common elements

"elements" content

Examples

ツリーマップチャート

基本的な構造

共通の要素

「要素」コンテンツ

例