ejTreeMap

The treemap can be easily configured to the DOM element, such as div and can be created with a highly customized look and feel.

Syntax

  • js
  • $(element).ejTreeMap<span class="signature">()</span>

    Example

  • html
  • <div id="container"> 
     
    <script>
    // Create TreeMap
    $('#container').ejTreeMap();    
    </script> 
      
    </div>

    Requires

    • module:jQuery

    • module:ej.datavisualization.TreeMap

    • module:JsRender

    • module:properties

    Members

    borderBrush string

    Specifies the border brush color of the treemap

    Default Value

    • “white”

    Example

  • js
  • //To set borderBrush API value during initialization 
      $("#container").ejTreeMap( {borderBrush:'white'});
  • js
  • //Get or set the borderBrush API, after initialization:
       
       //Gets the borderBrush value 
       
       var property =$("#container").data("ejTreeMap").model.borderBrush;
     
       //Sets the borderBrush value 
       
       $("#container").data("ejTreeMap").model.borderBrush = 'white';

    borderThickness number

    Specifies the border thickness of the treemap

    Default Value

    • 1

    Example

  • js
  • //To set borderThickness API value during initialization 
      $("#container").ejTreeMap({borderThickness:1});
  • js
  • //Get or set the borderThickness API, after initialization:
     
       //Gets the borderThickness value 
     
       var property =$("#container").data("ejTreeMap").model.borderThickness;
     
       //Sets the borderThickness value 
       
       $("#container").data("ejTreeMap").model.borderThickness = 1;

    uniColorMapping object

    Specifies the uniColorMapping settings of the treemap

    uniColorMapping.color string

    Specifies the uniform color mapping of the treemap

    Default Value

    • null

    Example

  • js
  • //To set uniColorMapping API value during initialization 
      $("#container").ejTreeMap( {uniColorMapping{ color: null }});
  • js
  • //Get or set the uniColorMapping API, after initialization:
       
       //Gets the uniColorMapping value 
       
       var property =$("#container").data("ejTreeMap").model.uniColorMapping.color;
     
       //Sets the uniColorMapping value 
       
       $("#container").data("ejTreeMap").model.uniColorMapping = { color: null };

    desaturationColorMapping object

    Specifies the desaturationColorMapping settings of the treemap

    desaturationColorMapping.to number

    Specifies the to value for desaturation color mapping

    Default Value

    • 0

    Example

  • js
  • //To set to API value during initialization 
      $("#container").ejTreeMap( {desaturationColorMapping{ to:1}});
  • js
  • //Get or set the to API, after initialization:
       
       //Gets the to value 
       
       var property =$("#container").data("ejTreeMap").model.desaturationColorMapping.to;
     
       //Sets the to value 
       
       $("#container").data("ejTreeMap").model.desaturationColorMapping = { to:1};

    desaturationColorMapping.color string

    Specifies the color for desaturationColorMapping

    Default Value

    • null

    Example

  • js
  • //To set color API value during initialization 
      $("#container").ejTreeMap( {desaturationColorMapping{ color:"#41B8C4" }});
  • js
  • //Get or set the color API, after initialization:
       
       //Gets the color value 
       
       var property =$("#container").data("ejTreeMap").model.desaturationColorMapping.color;
     
       //Sets the color for desaturationColorMapping value 
       
       $("#container").data("ejTreeMap").model.desaturationColorMapping = { color:"#41B8C4" };

    desaturationColorMapping.from number

    Specifies the from value for desaturation color mapping

    Default Value

    • 0

    Example

  • js
  • //To set from API value during initialization 
      $("#container").ejTreeMap( {desaturationColorMapping{ from:1}});
  • js
  • //Get or set the from API, after initialization:
       
       //Gets the from value 
       
       var property =$("#container").data("ejTreeMap").model.desaturationColorMapping.from;
     
       //Sets the from value 
       
       $("#container").data("ejTreeMap").model.desaturationColorMapping = { from:1};

    desaturationColorMapping.rangeMaximum number

    Specifies the rangeMaximum value for desaturation color mapping

    Default Value

    • 0

    Example

  • js
  • //To set rangeMaximum API value during initialization 
      $("#container").ejTreeMap( {desaturationColorMapping{ rangeMaximum:1}});
  • js
  • //Get or set the rangeMaximum API, after initialization:
       
       //Gets the rangeMaximum value 
       
       var property =$("#container").data("ejTreeMap").model.desaturationColorMapping.rangeMaximum;
     
       //Sets the rangeMaximum value 
       
       $("#container").data("ejTreeMap").model.desaturationColorMapping = { rangeMaximum:1};

    desaturationColorMapping.rangeMinimum number

    Specifies the rangeMinimum value for desaturation color mapping

    Default Value

    • 0

    Example

  • js
  • //To set rangeMinimum API value during initialization 
      $("#container").ejTreeMap( {desaturationColorMapping{ rangeMinimum:1}});
  • js
  • //Get or set the rangeMinimum API, after initialization:
       
       //Gets the rangeMinimum value 
       
       var property =$("#container").data("ejTreeMap").model.desaturationColorMapping.rangeMinimum;
     
       //Sets the rangeMinimum value 
       
       $("#container").data("ejTreeMap").model.desaturationColorMapping = { rangeMinimum:1};

    paletteColorMapping object

    Specifies the paletteColorMapping of the treemap

    paletteColorMapping.colors array

    Specifies the colors of the paletteColorMapping

    Default Value

    • []

    Example

  • js
  • //To set the colors of the paletteColorMapping during initialization 
      $("#container").ejTreeMap( {paletteColorMapping{colors: ["red","green","blue", "yellow"]}});
  • js
  • //Get or set the colors of the paletteColorMapping, after initialization:
       
       //Gets the colors of the paletteColorMapping value 
       
       var property =$("#container").data("ejTreeMap").model.paletteColorMapping;
     
       //Sets the the colors of the paletteColorMapping
       
       $("#container").data("ejTreeMap").model.paletteColorMapping = {colors: ["red","green","blue", "yellow"]};

    colorValuePath string

    Specifies the color value path of the treemap

    Default Value

    • null

    Example

  • js
  • //To set colorValuePath API value during initialization 
      $("#container").ejTreeMap({colorValuePath:'GoldMedals'});
  • js
  • //Get or set the colorValuePath API, after initialization:
       
       //Gets the colorValuePath value 
       
       var property =$("#container").data("ejTreeMap").model.colorValuePath;
     
       //Sets the colorValuePath value 
       
       $("#container").data("ejTreeMap").model.colorValuePath = 'GoldMedals';

    colorPath string

    Specifies the field name in the datasource that contains color values for treemap items.

    Default Value

    • null

    Example

  • js
  • //To set colorPath API value during initialization
      $("#container").ejTreeMap({colorPath:'fill'});
  • js
  • //Get or set the colorPath API, after initialization:
    
       //Gets the colorPath value
    
       var property =$("#container").data("ejTreeMap").model.colorPath;
    
       //Sets the colorPath value
    
       $("#container").data("ejTreeMap").model.colorPath = 'fill';

    dataSource object

    Specifies the datasource of the treemap

    Default Value

    • null

    Example

  • js
  • //To set datasource API value during initialization 
      $("#container").ejTreeMap({datasource:medal_data});
  • js
  • //Get or set the datasource API, after initialization:
       
       //Gets the datasource value 
       
       var property =$("#container").data("ejTreeMap").model.datasource;
     
       //Sets the datasource value 
       
       $("#container").data("ejTreeMap").model.datasource = medal_data;

    dockPosition enum

    Specifies the dockPosition for legend

    Name Description
    top specifies the top position
    bottom specifies the bottom position
    right specifies the bottom position
    left specifies the left position

    Default Value

    • top

    Example

  • js
  • //To set dockPosition API value during initialization 
      $("#container").ejTreeMap( {legendSettings:{ dockPosition: "top"}});
  • js
  • //Get or set the dockPosition API, after initialization:
       
       //Gets the template value 
       
       var property =$("#container").data("ejTreeMap").model.legendSettings.dockPosition;
     
       //Sets the dockPosition value 
       
       $("#container").data("ejTreeMap").model.legendSettings = { dockPosition: "top"};

    drillDownHeaderColor string

    specifies the drillDown header color

    ####Default Value

    • ‘null’

    Example

  • js
  • // Set the drillDownHeaderColor during initialization.                  
       $("#container").ejTreeMap({drillDownHeaderColor:'#0478c3'});
  • js
  • //Get or set the drillDownHeaderColor API, after initialization:
       
       //Gets the drillDownHeaderColor value 
       
       var property =$("#container").data("ejTreeMap").model.drillDownHeaderColor;
     
       //Sets the drillDownHeaderColor value 
       
       $("#container").data("ejTreeMap").model.drillDownHeaderColor = '#0478c3';

    drillDownSelectionColor string

    specifies the drillDown selection color

    Default Value

    • ‘#000000’

    Example

  • js
  • // Set the drillDownSelectionColor during initialization.                       
       $("#container").ejTreeMap({drillDownSelectionColor:'#e5e5e5'});
  • js
  • //Get or set the drillDownSelectionColor API, after initialization:
       
       //Gets the drillDownSelectionColor value 
       
       var property =$("#container").data("ejTreeMap").model.drillDownSelectionColor;
     
       //Sets the drillDownSelectionColor value 
       
       $("#container").data("ejTreeMap").model.drillDownSelectionColor = '#000000';

    isHierarchicalDatasource boolean

    Specifies whether datasource is hierarchical or not.

    Default Value

    • false

    Example

  • js
  • //To set isHierarchicalDatasource API value during initialization 
      $("#container").ejTreeMap({isHierarchicalDatasource : true});
  • js
  • //Get or set the isHierarchicalDatasource API, after initialization:
       
       //Gets the isHierarchicalDatasource value 
       
       var property =$("#container").data("ejTreeMap").model.isHierarchicalDatasource;
     
       //Sets the isHierarchicalDatasource value 
       
       $("#container").data("ejTreeMap").model.isHierarchicalDatasource = true;

    header string

    Specifies the header for parent item during drilldown. This is applicable only for hierarchical data source.

    Default Value

    • null

    Example

  • js
  • //To set header API value during initialization 
      $("#container").ejTreeMap({header:"Country"});
  • js
  • //Get or set the header API, after initialization:
       
       //Gets the header value 
       
       var property =$("#container").data("ejTreeMap").model.header;
     
       //Sets the header value 
       
       $("#container").data("ejTreeMap").model.header = "Country";

    enableDrillDown boolean

    Enable/Disable the drillDown for treemap

    Default Value

    • false

    Example

  • js
  • //To set enableDrillDown API value during initialization 
      $("#container").ejTreeMap({enableDrillDown:true});
  • js
  • //Get or set the enableDrillDown API, after initialization:
       
       //Gets the enableDrillDown value 
       
       var property =$("#container").data("ejTreeMap").model.enableDrillDown;
     
       //Sets the enableDrillDown value 
       
       $("#container").data("ejTreeMap").model.enableDrillDown = true;

    drillDownValue string

    Specifies to drill the particular data of the treemap.

    Default Value

    • null

    Example

  • js
  • //To set drillDownValue API value during initialization 
      $("#container").ejTreeMap({drillDownValue:'Asia'});
  • js
  • //Get or set the drillDownValue API, after initialization:
       
       //Gets the drillDownValue value 
       
       var property =$("#container").data("ejTreeMap").model.drillDownValue;
     
       //Sets the drillDownValue value 
       
       $("#container").data("ejTreeMap").model.drillDownValue = 'Asia';

    drillDownLevel number

    Specifies to render particular level of the treemap.

    Default Value

    • 0

    Example

  • js
  • //To set drillDownLevel API value during initialization 
      $("#container").ejTreeMap({drillDownLevel:1});
  • js
  • //Get or set the drillDownLevel API, after initialization:
     
       //Gets the drillDownLevel value 
     
       var property =$("#container").data("ejTreeMap").model.drillDownLevel;
     
       //Sets the drillDownLevel value 
       
       $("#container").data("ejTreeMap").model.drillDownLevel = 5;

    isResponsive boolean

    Controls whether Treemap has to be responsive while resizing the window.

    Default Value

    • true

    Example

  • js
  • //To set isResponsive API value during initialization 
      $("#container").ejTreeMap({isResponsive:true});

    enableResize boolean

    Specifies whether treemap need to resize when container is resized

    Default Value

    • true

    Example

  • js
  • //To set enableResize API value during initialization 
      $("#container").ejTreeMap({enableResize:false});
  • js
  • //Get or set the enableResize API, after initialization:
       
       //Gets the enableResize value 
       
       var property =$("#container").data("ejTreeMap").model.enableResize;
     
       //Sets the enableResize value 
       
       $("#container").data("ejTreeMap").model.enableResize = false;

    draggingOnSelectionboolean

    This property is used to select treemap items while clicking and dragging

    Default Value

    • false

    Example

  • js
  • //To set draggingOnSelection API value during initialization 
      $("#container").ejTreeMap({draggingOnSelection:false});

    draggingGroupOnSelectionboolean

    This property is used to select group of treemap items while clicking and dragging

    Default Value

    • false

    Example

  • js
  • //To set draggingGroupOnSelectionAPI value during initialization 
      $("#container").ejTreeMap({draggingGroupOnSelection:false});

    groupColorMapping array

    Specifies the group color mapping of the treemap

    Default Value

    • []

    Example

  • js
  • //To set groupColorMapping API value during initialization 
      $("#container").ejTreeMap( {groupColorMapping:[{ groupID: "Asia", rangeColorMapping:[{ color: "#77D8D8", from: "0", to: "1"}]}] });
  • js
  • //Get or set the groupColorMapping API, after initialization:
       
       //Gets the groupColorMapping value 
       
       var property =$("#container").data("ejTreeMap").model.groupColorMapping;
     
       //Sets the groupColorMapping value 
       
       $("#container").data("ejTreeMap").model.groupColorMapping = [groupColorMapping:[{ groupID: "Asia", rangeColorMapping:[{ color: "#77D8D8", from: "0", to: "1"}] }]});

    groupColorMapping.groupID string

    Specifies the groupID for GroupColorMapping.

    Default Value

    • null

    Example

  • js
  • // Set the groupID for GroupColorMapping during initialization.                         
            $("#container").ejTreeMap({groupColorMapping: [{ groupID:"Asia" }]})
  • js
  • //Get or set the groupID for GroupColorMapping after initialization:
    
      //Gets the groupID for GroupColorMapping from map.
    
      var property =$("#container").data("ejTreeMap").model.groupColorMapping.groupID;
    
      //Sets the groupID for GroupColorMapping to map.
    
      $("#container").data("ejTreeMap").model.groupColorMapping.groupID  = "Asia";

    legendSettings object

    Specifies the legend settings of the treemap

    legendSettings.height number

    Specifies the height for legend

    Default Value

    • 30

    Example

  • js
  • //To set height API value during initialization 
      $("#container").ejTreeMap( {legendSettings:{ height: 15}});
  • js
  • //Get or set the height API, after initialization:
       
       //Gets the template value 
       
       var property =$("#container").data("ejTreeMap").model.legendSettings.height;
     
       //Sets the height value 
       
       $("#container").data("ejTreeMap").model.legendSettings = { height: 30};

    legendSettings.width number

    Specifies the width for legend

    Default Value

    • 100

    Example

  • js
  • //To set width API value during initialization 
      $("#container").ejTreeMap( {legendSettings:{ width: 100}});
  • js
  • //Get or set the width API, after initialization:
       
       //Gets the template value 
       
       var property =$("#container").data("ejTreeMap").model.legendSettings.width;
     
       //Sets the width value 
       
       $("#container").data("ejTreeMap").model.legendSettings = { width: 100};

    legendSettings.iconHeight number

    Specifies the iconHeight for legend

    Default Value

    • 15

    Example

  • js
  • //To set iconHeight API value during initialization 
      $("#container").ejTreeMap( {legendSettings:{ iconHeight: 15}});
  • js
  • //Get or set the iconHeight API, after initialization:
       
       //Gets the template value 
       
       var property =$("#container").data("ejTreeMap").model.legendSettings.iconHeight;
     
       //Sets the iconHeight value 
       
       $("#container").data("ejTreeMap").model.legendSettings = { iconHeight: 15};

    legendSettings.iconWidth number

    Specifies the iconWidth for legend

    Default Value

    • 15

    Example

  • js
  • //To set iconWidth API value during initialization 
      $("#container").ejTreeMap( {legendSettings:{ iconWidth: 15}});
  • js
  • //Get or set the iconWidth API, after initialization:
       
       //Gets the template value 
       
       var property =$("#container").data("ejTreeMap").model.legendSettings.iconWidth;
     
       //Sets the iconWidth value 
       
       $("#container").data("ejTreeMap").model.legendSettings = { iconWidth: 15};

    legendSettings.template string

    Specifies the template for legendSettings

    Default Value

    • null

    Example

  • js
  • //To set template API value during initialization 
      $("#container").ejTreeMap( {legendSettings:{ template: null}});
  • js
  • //Get or set the template API, after initialization:
       
       //Gets the template value 
       
       var property =$("#container").data("ejTreeMap").model.legendSettings.template;
     
       //Sets the template value 
       
       $("#container").data("ejTreeMap").model.legendSettings = { template: null};

    legendSettings.mode string

    Specifies the mode for legendSettings whether default or interactive mode

    Default Value

    • “default”

    Example

  • js
  • //To set mode API value during initialization 
      $("#container").ejTreeMap( {legendSettings:{ mode: "interactive"}});

    legendSettings.title string

    Specifies the title text for legend

    Default Value

    • ””

    Example

  • js
  • //To set title API value during initialization 
      $("#container").ejTreeMap( {legendSettings:{ title: "Population"}});

    legendSettings.leftLabel string

    Specifies the leftLabel text for legend

    Default Value

    • ””

    Example

  • js
  • //To set leftLabel API value during initialization 
      $("#container").ejTreeMap( {legendSettings:{ leftLabel: "10Million"}});

    legendSettings.rightLabel string

    Specifies the rightLabel text for legend

    Default Value

    • ””

    Example

  • js
  • //To set rightLabel API value during initialization 
      $("#container").ejTreeMap( {legendSettings:{ rightLabel: "100Million"}});

    legendSettings.dockPosition string

    Specifies the dockPosition text for legend

    Default Value

    • “top”

    Example

  • js
  • //To set dockPosition API value during initialization 
      $("#container").ejTreeMap( {legendSettings:{ dockPosition: "bottom"}});

    legendSettings.alignment string

    Specifies the alignment text for legend

    Default Value

    • “near”

    Example

  • js
  • //To set alignment API value during initialization 
      $("#container").ejTreeMap( {legendSettings:{ alignment: "far"}});

    legendSettings.columnCount number

    Specifies the alignment text for legend

    Default Value

    • 0

    Example

  • js
  • //To set columnCount API value during initialization 
      $("#container").ejTreeMap( {legendSettings:{ columnCount: 2}});

    highlightBorderBrush string

    Specifies the highlight border brush of treemap

    Default Value

    • “gray”

    Example

  • js
  • //To set highlightBorderBrush API value during initialization 
      $("#container").ejTreeMap({highlightBorderBrush:'gray'});
  • js
  • //Get or set the highlightBorderBrush API, after initialization:
       
       //Gets the highlightBorderBrush value 
       
       var property =$("#container").data("ejTreeMap").model.highlightBorderBrush;
     
       //Sets the highlightBorderBrush value 
       
       $("#container").data("ejTreeMap").model.highlightBorderBrush = 'gray';

    highlightBorderThickness number

    Specifies the border thickness when treemap items is highlighted in the treemap

    Default Value

    • 5

    Example

  • js
  • //To set highlightBorderThickness API value during initialization 
      $("#container").ejTreeMap({highlightBorderThickness:5});
  • js
  • //Get or set the highlightBorderThickness API, after initialization:
     
       //Gets the highlightBorderThickness value 
     
       var property =$("#container").data("ejTreeMap").model.highlightBorderThickness;
     
       //Sets the highlightBorderThickness value 
       
       $("#container").data("ejTreeMap").model.highlightBorderThickness = 5;

    highlightGroupBorderBrush string

    Specifies the highlight border brush of treemap

    Default Value

    • “gray”

    Example

  • js
  • //To set highlightGroupBorderBrush API value during initialization 
      $("#container").ejTreeMap({highlightGroupBorderBrush:'gray'});
  • js
  • //Get or set the highlightGroupBorderBrush API, after initialization:
       
       //Gets the highlightGroupBorderBrush value 
       
       var property =$("#container").data("ejTreeMap").model.highlightGroupBorderBrush;
     
       //Sets the highlightGroupBorderBrush value 
       
       $("#container").data("ejTreeMap").model.highlightGroupBorderBrush = 'gray';

    highlightGroupBorderThickness number

    Specifies the border thickness when treemap items is highlighted in the treemap

    Default Value

    • 5

    Example

  • js
  • //To set highlightGroupBorderThickness API value during initialization 
      $("#container").ejTreeMap({highlightGroupBorderThickness:5});
  • js
  • //Get or set the highlightGroupBorderThickness API, after initialization:
       
       //Gets the highlightGroupBorderThickness value 
       
       var property =$("#container").data("ejTreeMap").model.highlightGroupBorderThickness;
     
       //Sets the highlightGroupBorderThickness value 
       
       $("#container").data("ejTreeMap").model.highlightGroupBorderThickness = 5;

    highlightGroupOnSelection boolean

    Specifies whether treemap item need to highlighted on selection

    Default Value

    • false

    Example

  • js
  • //To set highlightGroupOnSelection API value during initialization 
      $("#container").ejTreeMap({highlightGroupOnSelection:false});
  • js
  • //Get or set the highlightGroupOnSelection API, after initialization:
       
       //Gets the highlightGroupOnSelection value 
       
       var property =$("#container").data("ejTreeMap").model.highlightGroupOnSelection;
     
       //Sets the highlightGroupOnSelection value 
       
       $("#container").data("ejTreeMap").model.highlightGroupOnSelection = false;

    highlightOnSelection boolean

    Specifies whether treemap item need to highlighted on selection

    Default Value

    • false

    Example

  • js
  • //To set highlightOnSelection API value during initialization 
      $("#container").ejTreeMap({highlightOnSelection:false});
  • js
  • //Get or set the highlightOnSelection API, after initialization:
       
       //Gets the highlightOnSelection value 
       
       var property =$("#container").data("ejTreeMap").model.highlightOnSelection;
     
       //Sets the highlightOnSelection value 
       
       $("#container").data("ejTreeMap").model.highlightOnSelection = false;

    itemsLayoutMode enum

    Specifies the items layout mode of the treemap. Accepted itemsLayoutMode values are Squarified, SliceAndDiceHorizontal, SliceAndDiceVertical and SliceAndDiceAuto

    Name Description
    squarified specifies the squarified as layout type position
    sliceanddicehorizontal specifies the sliceanddicehorizontal as layout type position
    sliceanddicevertical specifies the sliceanddicevertical as layout type position
    sliceanddiceauto specifies the sliceanddiceauto as layout type position

    Default Value

    • “Squarified”

    Example

  • js
  • //To set itemsLayoutMode API value during initialization 
      $("#container").ejTreeMap({itemsLayoutMode:ej.datavisualization.TreeMap.ItemsLayoutMode.Squarified});
  • js
  • //Get or set the itemsLayoutMode API, after initialization:
       
       //Gets the itemsLayoutMode value 
       
       var property =$("#container").data("ejTreeMap").model.itemsLayoutMode;
     
       //Sets the itemsLayoutMode value 
       
       $("#container").data("ejTreeMap").model.itemsLayoutMode = ej.datavisualization.TreeMap.ItemsLayoutMode.Squarified;

    enableGroupSeparator boolean

    Specify to convert the date object to string, using locale settings.

    Default Value

    • false

    Example

  • js
  • //To set enableGroupSeparator API value during initialization 
      $("#container").ejTreeMap({enableGroupSeparator : true});
  • js
  • //Get or set the enableGroupSeparator API, after initialization:
       
       //Gets the enableGroupSeparator value 
       
       var property =$("#container").data("ejTreeMap").model.enableGroupSeparator;
     
       //Sets the enableGroupSeparator value 
       
       $("#container").data("ejTreeMap").model.enableGroupSeparator = true;

    locale string

    Name of the culture based on which Tree Map should be localized.

    Default Value

    • “en-US”

    Example

  • js
  • //Get or set the locale API, after initialization:
    
       //Gets the locale value 
    
        var property =$("#container").data("ejTreeMap").model.locale;
          
             
       //Sets the locale value
    
       $("#container").data("ejTreeMap").model.locale = "en-US";

    leafItemSettings object

    Specifies the leaf settings of the treemap

    leafItemSettings.borderBrush string

    Specifies the border brush color of the leaf item.

    Default Value

    • “white”

    Example

  • js
  • //To set borderBrush API value during initialization 
      $("#container").ejTreeMap({leafItemSettings:{ borderBrush: "white"}});
  • js
  • //Get or set the borderBrush API, after initialization:
       
       //Gets the borderBrush value 
       
       var property =$("#container").data("ejTreeMap").model.leafItemSettings.borderBrush;
     
       //Sets the borderBrush value 
       
       $("#container").data("ejTreeMap").model.leafItemSettings = { borderBrush: "white"};

    leafItemSettings.borderThickness number

    Specifies the border thickness of the leaf item.

    Default Value

    • 1

    Example

  • js
  • //To set borderThickness API value during initialization 
      $("#container").ejTreeMap({leafItemSettings:{ borderThickness: 1}});
  • js
  • //Get or set the borderThickness API, after initialization:
       
       //Gets the borderThickness value 
       
       var property =$("#container").data("ejTreeMap").model.leafItemSettings.borderThickness;
     
       //Sets the borderThickness value 
       
       $("#container").data("ejTreeMap").model.leafItemSettings = { borderThickness: 1};

    leafItemSettings.gap number

    Specifies the space between the leaf items.

    Default Value

    • 0

    Example

  • js
  • //To set gap API value during initialization 
      $("#container").ejTreeMap({leafItemSettings:{ gap: 1}});
  • js
  • //Get or set the gap API, after initialization:
       
       //Gets the gap value 
       
       var property =$("#container").data("ejTreeMap").model.leafItemSettings.gap;
     
       //Sets the gap value 
       
       $("#container").data("ejTreeMap").model.leafItemSettings = { gap: 1};

    leafItemSettings.itemTemplate string

    Specifies the label template of the leaf item.

    Default Value

    • null

    Example

  • js
  • //To set itemTemplate API value during initialization 
      $("#container").ejTreeMap({leafItemSettings:{ itemTemplate: "temp"}});
  • js
  • //Get or set the itemTemplate API, after initialization:
       
       //Gets the itemTemplate value 
       
       var property =$("#container").data("ejTreeMap").model.leafItemSettings.itemTemplate;
     
       //Sets the itemTemplate value 
       
       $("#container").data("ejTreeMap").model.leafItemSettings = { itemTemplate: "temp"};

    leafItemSettings.labelPath string

    Specifies the label path of the leaf item.

    Default Value

    • null

    Example

  • js
  • //To set labelPath API value during initialization 
      $("#container").ejTreeMap({leafItemSettings:{ labelPath: "GameName"}});
  • js
  • //Get or set the labelPath API, after initialization:
       
       //Gets the labelPath value 
       
       var property =$("#container").data("ejTreeMap").model.leafItemSettings.labelPath;
     
       //Sets the labelPath value 
       
       $("#container").data("ejTreeMap").model.leafItemSettings = { labelPath: "GameName"};

    leafItemSettings.labelPosition enum

    Specifies the position of the leaf labels.

    Name Description
    none specifies the none position
    topleft specifies the topleft position
    topcenter specifies the topcenter position
    topright specifies the topright position
    centerleft specifies the centerleft position
    center specifies the center position
    centerright specifies the centerright position
    bottomleft specifies the bottomleft position
    bottomcenter specifies the bottomcenter position
    bottomright specifies the bottomright position

    Default Value

    • center

    Example

  • js
  • //To set labelPosition API value during initialization 
      $("#container").ejTreeMap({leafItemSettings:{ labelPosition: "center"}});
  • js
  • //Get or set the labelPosition API, after initialization:
       
       //Gets the labelPosition value 
       
       var property =$("#container").data("ejTreeMap").model.leafItemSettings.labelPosition;
     
       //Sets the labelPosition value 
       
       $("#container").data("ejTreeMap").model.leafItemSettings.labelPosition= "topleft";

    leafItemSettings.textOverflow enum

    Specifies the overflow options for leaf labels.

    Name Description
    none Displays the label within the grid width
    hide Hides the label when its width exceeds grid width
    wrap Wrap the label by letter when its width exceeds grid width
    wrapByWord Wrap the label by word when its width exceeds grid width

    Default Value

    • none

    Example

  • js
  • //To set textOverflow API value during initialization 
      $("#container").ejTreeMap({leafItemSettings:{ textOverflow: "wrap"}});
  • js
  • //Get or set the textOverflow API, after initialization:
       
       //Gets the textOverflow value 
       
       var property =$("#container").data("ejTreeMap").model.leafItemSettings.textOverflow;
     
       //Sets the textOverflow value 
       
       $("#container").data("ejTreeMap").model.leafItemSettings.textOverflow= "wrapByWord";

    leafItemSettings.labelVisibilityMode enum

    Specifies the mode of label visibility

    Name Description
    top specifies the visible mode
    hide on exceeded length specifies the hide on exceeded length mode

    Default Value

    • visible

    Example

  • js
  • //To set labelVisibilityMode API value during initialization 
      $("#container").ejTreeMap({leafItemSettings:{ labelVisibilityMode: "visible"}});
  • js
  • //Get or set the labelVisibilityMode API, after initialization:
       
       //Gets the labelVisibilityMode value 
       
       var property =$("#container").data("ejTreeMap").model.leafItemSettings.labelVisibilityMode;
     
       //Sets the labelVisibilityMode value 
       
       $("#container").data("ejTreeMap").model.leafItemSettings.labelVisibilityMode= "visible";

    leafItemSettings.showLabels boolean

    Shows or hides the label of the leaf item.

    Default Value

    • “false”

    Example

  • js
  • //To set showLabels API value during initialization 
      $("#container").ejTreeMap({leafItemSettings:{ showLabels: "false"}});
  • js
  • //Get or set the showLabels API, after initialization:
       
       //Gets the showLabels value 
       
       var property =$("#container").data("ejTreeMap").model.leafItemSettings.showLabels;
     
       //Sets the showLabels value 
       
       $("#container").data("ejTreeMap").model.leafItemSettings = { showLabels: "false"};

    rangeColorMapping array

    Specifies the rangeColorMapping settings of the treemap

    Default Value

    • []

    Example

  • js
  • //To set rangeColorMapping API value during initialization 
      $("#container").ejTreeMap( {rangeColorMapping:[{ color: "#77D8D8",legendLabel:"1% Growth", from: "0", to: "1" }]});
  • js
  • //Get or set the rangeColorMapping API, after initialization:
       
       //Gets the rangeColorMapping value 
       
       var property =$("#container").data("ejTreeMap").model.rangeColorMapping;
     
       //Sets the rangeColorMapping value 
       
       $("#container").data("ejTreeMap").model.rangeColorMapping = [{ color: "#77D8D8",legendLabel:"1% Growth", from: "0", to: "1" }];

    rangeColorMapping.color string

    Specifies the color value for rangeColorMapping.

    Default Value

    • null

    Example

  • js
  • // Set the color value for rangeColorMapping during initialization.                     
       $("#container").ejTreeMap({rangeColorMapping: [{ color: "#77D8D8" }]})
  • js
  • //Get or set the color value for rangeColorMapping after initialization:
      
      //Gets the color value for rangeColorMapping from map.
      
      var property =$("#container").data("ejTreeMap").model.rangeColorMapping.color;
      
      //Sets the color value for rangeColorMapping to map.
      
      $("#container").data("ejTreeMap").model.rangeColorMapping.color  = "#77D8D8";

    rangeColorMapping.gradientColors array

    specifies the gradient colors for th given range value

    Default Value

    • []

    Example

  • js
  • //To set gradientColors API value during initialization 
      $("#container").ejTreeMap( {rangeColorMapping:[{ from: "0", to: "1", gradientColors: ["#fde6cc", "#fab665"] }]});
  • js
  • //Get or set the gradientColors API, after initialization:
       
       //Gets the gradientColors value 
       
       var property =$("#container").data("ejTreeMap").model.rangeColorMapping.gradientColors;
     
       //Sets the gradientColors value 
       
       $("#container").data("ejTreeMap").model.rangeColorMapping.gradientColors = ["#fde6cc", "#fab665"];

    rangeColorMapping.from number

    Specifies the from value for rangeColorMapping.

    Default Value

    • -1

    Example

  • js
  • // Set the from value for rangeColorMapping during initialization.                      
       $("#container").ejTreeMap({rangeColorMapping: [{ from:-1 }]})
  • js
  • //Get or set the from value for rangeColorMapping after initialization:
    
      //Gets the from value for rangeColorMapping from map.
    
      var property =$("#container").data("ejTreeMap").model.rangeColorMapping.from;
    
      //Sets the from value for rangeColorMapping to map.
    
      $("#container").data("ejTreeMap").model.rangeColorMapping.from  = -1;

    rangeColorMapping.legendLabel string

    Specifies the legend label value for rangeColorMapping.

    Default Value

    • null

    Example

  • js
  • // Set the legend label value for rangeColorMapping during initialization.                       
       $("#container").ejTreeMap({rangeColorMapping: [{ legendlabel: "1% Growth" }]})
  • js
  • //Get or set the legend label value for rangeColorMapping after initialization:
    
      //Gets the legend label value for rangeColorMapping from map.
    
      var property =$("#container").data("ejTreeMap").model.rangeColorMapping.legendLabel;
    
      //Sets the legend label value for rangeColorMapping to map.
    
      $("#container").data("ejTreeMap").model.rangeColorMapping.legendLabel  = "1% Growth";

    rangeColorMapping.to number

    Specifies the to value for rangeColorMapping.

    Default Value

    • -1

    Example

  • js
  • // Set the to value for rangeColorMapping during initialization.                        
       $("#container").ejTreeMap({rangeColorMapping: [{ to:-1 }]})
  • js
  • //Get or set the to value for rangeColorMapping after initialization:
    
      //Gets the to value for rangeColorMapping from map.
    
      var property =$("#container").data("ejTreeMap").model.rangeColorMapping.to;
    
      //Sets the to value for rangeColorMapping to map.
    
      $("#container").data("ejTreeMap").model.rangeColorMapping.to  = -1;

    selectionMode enum

    Specifies the selection mode of treemap item. Accepted selection mode values are Default and Multiple.

    Name Description
    default specifies the default mode
    multiple specifies the multiple mode

    Default Value

    • “default”

    Example

  • js
  • // Set the selection mode during initialization.                                        
              $("#container").ejTreeMap({selectionMode:'default'});
  • js
  • //Get or set the selection mode after initialization:
      
      //Gets the selection mode from treemap.
      
      var property =$("#container").data("ejTreeMap").model.selectionMode;
      
      //Sets the selection mode to treemap.
      
      $("#container").data("ejTreeMap").model.selectionMode  = 'default';

    groupSelectionMode enum

    Specifies the selection mode of the treemap. Accepted selection mode values are Default and Multiple.

    Name Description
    default specifies the default mode
    multiple specifies the multiple mode

    Default Value

    • “default”

    Example

  • js
  • // Set the selection mode during initialization.                                        
              $("#container").ejTreeMap({groupSelectionMode:'default'});
  • js
  • //Get or set the groupSelection mode after initialization:
      
      //Gets the selection mode from treemap.
      
      var property =$("#container").data("ejTreeMap").model.groupSelectionMode;
      
      //Sets the selection mode to treemap.
      
      $("#container").data("ejTreeMap").model.groupSelectionMode  = 'default';

    showLegend boolean

    Specifies the legend visibility status of the treemap

    Default Value

    • false

    Example

  • js
  • //To set showLegend API value during initialization 
      $("#container").ejTreeMap({showLegend:false});
  • js
  • //Get or set the showLegend API, after initialization:
       
       //Gets the showLegend value 
       
       var property =$("#container").data("ejTreeMap").model.showLegend;
     
       //Sets the showLegend value 
       
       $("#container").data("ejTreeMap").model.showLegend = false;

    enableGradient boolean

    Specifies whether gradient color has to be applied for treemap items

    Default Value

    • false

    Example

  • js
  • //To set enableGradient API value during initialization 
      $("#container").ejTreeMap({enableGradient:true});
  • js
  • //Get or set the enableGradient API, after initialization:
       
       //Gets the enableGradient value 
       
       var property =$("#container").data("ejTreeMap").model.enableGradient;
     
       //Sets the enableGradient value 
       
       $("#container").data("ejTreeMap").model.enableGradient = false;

    showTooltip boolean

    Specifies whether treemap showTooltip need to be visible

  • js
  • //To set showTooltip API value during initialization 
      $("#container").ejTreeMap({showTooltip:false});
  • js
  • //Get or set the showTooltip API, after initialization:
       
       //Gets the showTooltip value 
       
       var property =$("#container").data("ejTreeMap").model.showTooltip;
     
       //Sets the showTooltip value 
       
       $("#container").data("ejTreeMap").model.showTooltip = false;

    tooltipTemplate string

    Specifies the tooltip template of the treemap

    Default Value

    • null

    Example

  • js
  • //To set tooltipTemplate API value during initialization 
      $("#container").ejTreeMap({tooltipTemplate:'template'});
  • js
  • //Get or set the tooltipTemplate API, after initialization:
       
       //Gets the tooltipTemplate value 
       
       var property =$("#container").data("ejTreeMap").model.tooltipTemplate;
     
       //Sets the tooltipTemplate value 
       
       $("#container").data("ejTreeMap").model.tooltipTemplate = 'template';

    treeMapItems array

    Hold the treeMapItems to be displayed in treemap

    Default Value

    • []

    Example

  • js
  • // Set the treeMapItems during initialization. 
      $("#container").ejTreeMap({treeMapItems:[]});
  • js
  • //Get or set the treeMapItems after initialization:
    
      //Gets the treeMapItems from treemap.
    
      var property =$("#container").data("ejTreeMap").model.treeMapItems;
                 
      //Sets the treeMapItems to treemap.
    
      $("#container").data("ejTreeMap").model.treeMapItems = [];

    levels array

    Specify levels of treemap for grouped visualization of data

    Default Value

    • []

    Example

  • js
  • // Set the levels during initialization.                
      $("#container").ejTreeMap({   levels: [{ groupPath: "Continent", groupGap: 5, headerHeight: 30, headerTemplate: 'headertemplate' }]})
  • js
  • //Get or set the levels after initialization:
      
      //Gets the levels from map.
      
      var levels =$("#container").data("ejTreeMap").model.levels[levelIndex];
      
      //Sets the levels to map.
      
      $("#container").data("ejTreeMap").model.levels[levelIndex]  = { groupPath: "Continent", groupGap: 5, headerHeight: 30, headerTemplate: 'Template' };

    levels.groupBackground string

    specifies the group background

    Default Value

    • null

    Example

  • js
  • // Set the groupBackground during initialization.                       
       $("#container").ejTreeMap({levels: [{ groupBackground:"white" }]})
  • js
  • //Get or set the groupBackground after initialization:
    
      //Gets the groupBackground from map.
    
      var property =$("#container").data("ejTreeMap").model.levels[levelIndex].groupBackground;
    
      //Sets the groupBackground to map.
    
      $("#container").data("ejTreeMap").model.levels[levelIndex].groupBackground  = "white";

    levels.groupBorderColor string

    Specifies the group border color for tree map level.

    Default Value

    • null

    Example

  • js
  • // Set the groupBorderColor during initialization.                      
       $("#container").ejTreeMap({levels: [{ groupBorderColor:"#58585B" }]})
  • js
  • //Get or set the groupBorderColor after initialization:
    
      //Gets the groupBorderColor from map.
    
      var property =$("#container").data("ejTreeMap").model.levels[levelIndex].groupBorderColor;
    
      //Sets the groupBorderColor to map.
    
      $("#container").data("ejTreeMap").model.levels[levelIndex].groupBorderColor  = "#58585B";

    levels.groupBorderThickness number

    Specifies the group border thickness for tree map level.

    Default Value

    • 1

    Example

  • js
  • // Set the groupBorderThickness during initialization.                  
       $("#container").ejTreeMap({levels: [{ groupBorderThickness:1 }]})
  • js
  • //Get or set the groupBorderThickness after initialization:
    
      //Gets the groupBorderThickness from map.
    
      var property =$("#container").data("ejTreeMap").model.levels[levelIndex].groupBorderThickness;
    
      //Sets the groupBorderThickness to map.
    
      $("#container").data("ejTreeMap").model.levels[levelIndex].groupBorderThickness  = 1;

    levels.groupGap number

    Specifies the group gap for tree map level.

    Default Value

    • 1

    Example

  • js
  • // Set the groupGap during initialization.                      
       $("#container").ejTreeMap({levels: [{ groupGap:1 }]})
  • js
  • //Get or set the groupGap after initialization:
      
      //Gets the groupGap from map.
      
      var property =$("#container").data("ejTreeMap").model.levels[levelIndex].groupGap;
      
      //Sets the groupGap to map.
      
      $("#container").data("ejTreeMap").model.levels[levelIndex].groupGap  = 1;

    levels.groupPadding number

    Specifies the group padding for tree map level.

    Default Value

    • 4

    Example

  • js
  • // Set the groupPadding during initialization.                  
       $("#container").ejTreeMap({levels: [{ groupPadding:4 }]})
  • js
  • //Get or set the groupPadding after initialization:
    
      //Gets the groupPadding from map.
    
      var property =$("#container").data("ejTreeMap").model.levels[levelIndex].groupPadding;
    
      //Sets the groupPadding to map.
    
      $("#container").data("ejTreeMap").model.levels[levelIndex].groupPadding  = 4;

    levels.groupPath string

    Specifies the group path for tree map level.

    Example

  • js
  • // Set the groupPath during initialization.                     
       $("#container").ejTreeMap({levels: [{ groupPath:"pathName" }]})
  • js
  • //Get or set the groupPath after initialization:
    
      //Gets the groupPath from map.
    
      var property =$("#container").data("ejTreeMap").model.levels[levelIndex].groupPath;
    
      //Sets the groupPath to map.
    
      $("#container").data("ejTreeMap").model.levels[levelIndex].groupPath  = "pathName";

    levels.headerHeight number

    Specifies the header height for tree map level.

    Default Value

    • 0

    Example

  • js
  • // Set the headerHeight during initialization.                  
       $("#container").ejTreeMap({levels: [{ headerHeight:20 }]})
  • js
  • //Get or set the headerHeight after initialization:
    
      //Gets the headerHeight from map.
    
      var property =$("#container").data("ejTreeMap").model.levels[levelIndex].headerHeight;
    
      //Sets the headerHeight to map.
    
      $("#container").data("ejTreeMap").model.levels[levelIndex].headerHeight  = 1;

    levels.headerTemplate string

    Specifies the header template for tree map level.

    Default Value

    • null

    Example

  • js
  • // Set the headerTemplate during initialization.                        
       $("#container").ejTreeMap({levels: [{ headerTemplate:"template" }]})
  • js
  • //Get or set the headerTemplate after initialization:
    
      //Gets the headerTemplate from map.
    
      var property =$("#container").data("ejTreeMap").model.levels[levelIndex].headerTemplate;
    
      //Sets the headerTemplate to map.
    
      $("#container").data("ejTreeMap").model.levels[levelIndex].headerTemplate  = "template";

    levels.headerVisibilityMode enum

    Specifies the mode of header visibility

    Name Description
    top specifies the visible mode
    hide on exceeded length specifies the hide on exceeded length mode

    Default Value

    • visible

    Example

  • js
  • //To set labelVisibilityMode API value during initialization 
      $("#container").ejTreeMap({levels:[{ headerVisibilityMode: "visible"}]});
  • js
  • //Get or set the headerVisibilityMode API, after initialization:
       
       //Gets the headerVisibilityMode value 
       
       var property =$("#container").data("ejTreeMap").model.levels[0].headerVisibilityMode;
     
       //Sets the headerVisibilityMode value 
       
       $("#container").data("ejTreeMap").model.levels[0].headerVisibilityMode= "visible";

    levels.labelPosition enum

    Specifies the position of the labels.

    Name Description
    none specifies the none position
    topleft specifies the topleft position
    topcenter specifies the topcenter position
    topright specifies the topright position
    centerleft specifies the centerleft position
    center specifies the center position
    centerright specifies the centerright position
    bottomleft specifies the bottomleft position
    bottomcenter specifies the bottomcenter position
    bottomright specifies the bottomright position

    Default Value

    • center

    Example

  • js
  • //To set labelPosition API value during initialization 
      $("#container").ejTreeMap({levels:[{ labelPosition: "center"]}});
  • js
  • //Get or set the labelPosition API, after initialization:
       
       //Gets the labelPosition value 
       
       var property =$("#container").data("ejTreeMap").model.levels[0].labelPosition;
     
       //Sets the labelPosition value 
       
       $("#container").data("ejTreeMap").model.levels[0].labelPosition= "topleft";

    levels.textOverflow enum

    Specifies the overflow options for leaf labels.

    Name Description
    none Displays the label within the grid width
    hide Hides the label when its width exceeds grid width
    wrap Wrap the label by letter when its width exceeds grid width
    wrapByWord Wrap the label by word when its width exceeds grid width

    Default Value

    • none

    Example

  • js
  • //To set textOverflow API value during initialization 
      $("#container").ejTreeMap({levels:[{ textOverflow: "wrap"]}});
  • js
  • //Get or set the textOverflow API, after initialization:
       
       //Gets the textOverflow value 
       
       var property =$("#container").data("ejTreeMap").model.levels[0].textOverflow;
     
       //Sets the textOverflow value 
       
       $("#container").data("ejTreeMap").model.levels[0].textOverflow= "wrapByWord";

    levels.labelTemplate string

    Specifies the label template for tree map level.

    Default Value

    • null

    Example

  • js
  • // Set the labelTemplate during initialization.                         
       $("#container").ejTreeMap({levels: [{ labelTemplate:"template" }]})
  • js
  • //Get or set the labelTemplate after initialization:
    
      //Gets the labelTemplate from map.
    
      var property =$("#container").data("ejTreeMap").model.levels[levelIndex].labelTemplate;
    
      //Sets the labelTemplate to map.
    
      $("#container").data("ejTreeMap").model.levels[levelIndex].labelTemplate  = "template";

    levels.labelVisibilityMode enum

    Specifies the mode of label visibility

    Name Description
    top specifies the visible mode
    hide on exceeded length specifies the hide on exceeded length mode

    Default Value

    • visible

    Example

  • js
  • //To set labelVisibilityMode API value during initialization 
      $("#container").ejTreeMap({levels:[{ labelVisibilityMode: "visible"}]});
  • js
  • //Get or set the labelVisibilityMode API, after initialization:
       
       //Gets the labelVisibilityMode value 
       
       var property =$("#container").data("ejTreeMap").model.levels[0].labelVisibilityMode;
     
       //Sets the labelVisibilityMode value 
       
       $("#container").data("ejTreeMap").model.levels[0].labelVisibilityMode= "visible";

    levels.showHeader boolean

    Shows or hides the header for tree map level.

    Default Value

    • false

    Example

  • js
  • // Set the shoeHeader during initialization.                    
       $("#container").ejTreeMap({levels: [{ showHeader:false }]})
  • js
  • //Get or set the showHeader after initialization:
    
      //Gets the showHeader from treemap.
    
      var property =$("#container").data("ejTreeMap").model.levels[levelIndex].showHeader;
    
      //Sets the headerHeight to map.
    
      $("#container").data("ejTreeMap").model.levels[levelIndex].showHeader  = true;

    levels.showLabels boolean

    Shows or hides the labels for tree map level.

    Default Value

    • false

    Example

  • js
  • // Set the showLabels during initialization.                    
       $("#container").ejTreeMap({levels: [{ showLabels:false }]})
  • js
  • //Get or set the showLabels after initialization:
    
      //Gets the showLabels from map.
    
      var property =$("#container").data("ejTreeMap").model.levels[levelIndex].showLabels;
    
      //Sets the showLabels to map.
    
      $("#container").data("ejTreeMap").model.levels[levelIndex].showLabels  = false;

    weightValuePath string

    Specifies the weight value path of the treemap

    Default Value

    • null

    Example

  • js
  • //To set weightValuePath API value during initialization 
      $("#container").ejTreeMap({weightValuePath:'TotalMedals'});
  • js
  • //Get or set the weightValuePath API, after initialization:
       
       //Gets the weightValuePath value 
       
       var property =$("#container").data("ejTreeMap").model.weightValuePath;
     
       //Sets the weightValuePath value 
       
       $("#container").data("ejTreeMap").model.weightValuePath = 'TotalMedals';

    Methods

    refresh()

    Method to reload treemap with updated values.

    Returns: void

    Example

  • js
  • //refresh method for treemap
       $("#container").ejTreeMap("refresh");

    drillDown()

    Method to drilldown the treemap.

    Returns: void

    Example

  • js
  • //refresh method for treemap
       $("#container").ejTreeMap("drillDown");

    Events

    treeMapItemSelected

    Triggers on treemap item selected.

    Name Type Description
  • html
  • originalEvent
    object Returns selected treeMapItem object.

    Example

  • js
  • //treemap item selected event for treemap
      $("#container").ejTreeMap({
       treeMapItemSelected: function () {}
      });

    itemRendering

    Triggers while rendering each treemap items.

    Name Type Description
  • html
  • originalEvent
    object Returns treemap leaf item

    Example

  • js
  • //treemap item selected event for treemap
      $("#container").ejTreeMap({
       itemRendering: function () {}
      });

    legendItemRendering

    Triggers while rendering each legend item

    Name Type Description
  • html
  • originalEvent
    object Returns treemap legend item

    Example

  • js
  • //treemap item selected event for treemap
      $("#container").ejTreeMap({
       legendItemRendering: function () {}
      });

    drillStarted

    Triggers when drilldown is started

    Name Type Description
  • html
  • originalEvent
    object Returns selected drilled treeMap object.

    Example

  • js
  • //drillStarted event for treemap
      $("#container").ejTreeMap({
       drillStarted: function () {}
      });

    drillDownItemSelected

    Triggers on treemap drilldown item selected.

    Name Type Description
  • html
  • originalEvent
    object Returns selected drilldown treeMap object.

    Example

  • js
  • //drillDownItemSelected event for treemap
      $("#container").ejTreeMap({
       drillDownItemSelected: function () {}
      });

    headerTemplateRendering

    Triggers before rendering the treemap drilldown header template

    Name Type Description
  • html
  • originalEvent
    object Returns drilldown header.

    Example

  • js
  • //headerTemplateRendering event for treemap
      $("#container").ejTreeMap({
       headerTemplateRendering: function () {}
      });

    refreshed

    Triggers after refreshing the treemap items.

    Name Type Description
  • html
  • originalEvent
    object Refresh and load the treemap.

    Example

  • js
  • //refreshed event for treemap
      $("#container").ejTreeMap({
       refreshed: function () {}
      });

    treeMapGroupSelected

    Triggers when the group selection is performed on treemap items.

    Name Type Description
  • html
  • originalEvent
    object Returns the selected group of treeMapItems as object.

    Example

  • js
  • //treeMapGroupSelected event for treemap
      $("#container").ejTreeMap({
       treeMapGroupSelected: function () {}
      });

    Click

    Fires, on clicking the tree map items.

    Name Type Description
  • html
  • originalEvent
    object Returns the clicked group of treeMapItems as object.

    Example

  • js
  • //Click event for tree map
    
     $("#container").ejTreeMap({
    
        click: function (args) {
                  //Do something
        }
       
    });

    doubleClick

    Fires, on double clicking the tree map items.

    Name Type Description
  • html
  • originalEvent
    object Returns the double clicked group of treeMapItems as object.

    Example

  • js
  • //DoubleClick event for tree map
    
     $("#container").ejTreeMap({
    
        doubleClick: function (args) {
                  //Do something
        }
       
    });

    rightClick

    Fires, on right clicking the tree map items.

    Name Type Description
  • html
  • originalEvent
    object Returns the right clicked group of treeMapItems as object.

    Example

  • js
  • //RightClick event for tree map
    
     $("#container").ejTreeMap({
        rightClick: function (args) {
                  //Do something
        }
       
    });