Tree Map chart

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

Basic structure

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

Common elements

NameDescriptionExample
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.

NameDescriptionExample
mouse
Mouse sensitivity2
shadow
[true, false]true
stroke
[0, 1]1
colour
Default font color for tooltips
#202020
background
Default background for tooltips.
"#ffffff"
 

Example

{
	"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.

NameDescriptionExample
type
Type of the chart. For tree map chart, the value is "treeMap"treeMap
font-size

Size of the used font

12
values
NameDescriptionExample
primary
Numerical size of rectangle12345.4567
tip
Tooltip text to display on mouse hoverThis is tooltip
label
Value label displayed inside a rectangleThis 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
 
 "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

  File Modified
File TREE_MAP_allIndicators_drilldownOnXAxis.json Apr 22, 2016 by Lubomir Elko
File TREE_MAP_allIndicators.json Apr 22, 2016 by Lubomir Elko
File TREE_MAP_dateInterval_allIndicators_drilldownOnXAxis.json Apr 22, 2016 by Lubomir Elko
File TREE_MAP_dateInterval_allIndicators.json Apr 22, 2016 by Lubomir Elko
File TREE_MAP_dateInterval_drilldown_allIndicators_drilldownOnXAxis.json Apr 22, 2016 by Lubomir Elko
File TREE_MAP_dateInterval_drilldown_allIndicators.json Apr 22, 2016 by Lubomir Elko
File TREE_MAP_dateInterval_drilldown_drilldownOnXAxis.json Apr 22, 2016 by Lubomir Elko
File TREE_MAP_dateInterval_drilldown.json Apr 22, 2016 by Lubomir Elko
File TREE_MAP_dateInterval_drilldownOnXAxis.json Apr 22, 2016 by Lubomir Elko
File TREE_MAP_dateInterval.json Apr 22, 2016 by Lubomir Elko
File TREE_MAP_drilldown_allIndicators_drilldownOnXAxis.json Apr 22, 2016 by Lubomir Elko
File TREE_MAP_drilldown_allIndicators.json Apr 22, 2016 by Lubomir Elko
File TREE_MAP_drilldown_drilldownOnXAxis.json Apr 22, 2016 by Lubomir Elko
File TREE_MAP_drilldown.json Apr 22, 2016 by Lubomir Elko
File TREE_MAP_drilldownOnXAxis.json Apr 22, 2016 by Lubomir Elko
File TREE_MAP.json Apr 22, 2016 by Lubomir Elko

 

  • No labels