jqwidgets-framework

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../../../Styles/jqx.apireference.css" type="text/css" /> <script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../../../scripts/documentation.js"></script> <meta name="keywords" content="jQuery, Tree, jQuery TreeMap, TreeMap, TreeMap Widget, jqxTreeMap" /> <meta name="description" content="This page represents the help documentation of the jqxTreeMap widget." /> <title>jqxTreeMap API Reference</title> <script type="text/javascript"> $(document).ready(function () { $(".documentation-option-type-click").click(function (event) { $(event.target).parents('tr').next().find(".property-content").toggle(); }); }); </script> </head> <body> <div id="properties"> <h2 class="documentation-top-header">Properties</h2> <table class="documentation-table"> <tr> <th>Name </th> <th>Type </th> <th>Default </th> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span47'>baseColor</span> </td> <td> <span>String</span> </td> <td>'#C2EEFF' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the default color used when the <code>colorMode</code> property is set to <code>"autoColors"</code>. </p> <h4>Code example</h4> <p> Set the <code>baseColor</code> property. </p> <pre><code>$("#jqxTreeMap").jqxTreeMap({baseColor: '#ff0000'}); </code></pre> <p> Get the <code>baseColor</code> property. </p> <pre><code>var baseColor = $('#jqxTreeMap').jqxTreeMap('baseColor'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/s2gQU/">baseColor is set to '#52CBFF'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span12'>colorRanges</span> </td> <td> <span>Array</span> </td> <td>[ { color: '#aa9988', min: 0, max: 10 }, { color: '#ccbbcc', min: 11, max: 50 }, { color: '#000', min: 50, max: 100 } ]; </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the color ranges used when the <code>colorMode</code> property is set to <code>"rangeColors"</code> </p> <h4>Code examples</h4> <p> Set the <code>colorRanges</code> property. </p> <pre><code> $('#jqxTreeMap').jqxTreeMap({ colorRanges: [ { color: '#aa9988', min: 0, max: 10 }, { color: '#ccbbcc', min: 11, max: 50 }, { color: '#000', min: 50, max: 100 } ] }); </code></pre> <p> Get the <code>colorRanges</code> property. </p> <pre><code>var colorRanges = $('#jqxTreeMap').jqxTreeMap('colorRanges'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9GLUb/">colorRanges is set to {x: 5, y: 0}</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span42'>colorRange</span> </td> <td> <span>Number</span> </td> <td>100 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the range in which the base colors can vary. The value is expected to be from 0 to 255. </p> <h4>Code example</h4> <p> Set the <code>colorRange</code> property. </p> <pre><code>$("#jqxTreeMap").jqxTreeMap({colorRange: 120}); </code></pre> <p> Get the <code>colorRange</code> property. </p> <pre><code>var colorRange = $('#jqxTreeMap').jqxTreeMap('colorRange'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/sCVj7/">colorRange is set to 100</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span43'>colorMode</span> </td> <td> <span>String</span> </td> <td>'parent' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the sectors rendering behavior. </p> There are three different types of color mode: <ul> <li>parent - a child sector inherits the color from its parent sector. Depending on the child value and the colorRange property the color varies. </li> <li>autoColors - automatic color generation based on the baseColor/colorRange and the value.</li> <li>rangeColors - the user can sets array of color ranges. Each color range has the properties min, max and color.</li> </ul> <h4>Code example</h4> <p> Set the <code>colorMode</code> property. </p> <pre><code>$("#jqxTreeMap").jqxTreeMap({colorMode: 'rangeColors'}); </code></pre> <p> Get the <code>colorMode</code> property. </p> <pre><code>var colorMode = $('#jqxTreeMap').jqxTreeMap('colorMode'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/meV3S/">colorMode is set to 'autoColors'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span2'>displayMember</span> </td> <td> <span>String</span> </td> <td>"" </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the <code>displayMember</code> property. The <code>displayMember</code> determines the name of an object property to display. The name is contained in the collection specified by the <code>source</code> property and the name is stored in the <code>label</code> field of each sector. The property is taken into account when the jqxTreeMap's <code>source</code> property points to jqxDataAdapter instance. </p> <h4>Code example</h4> <p> Set the <code>displayMember</code> property. </p> <pre><code>$("#jqxTreeMap").jqxTreeMap({displayMember: 'firstName'});</code></pre> <p> Get the <code>displayMember</code> property. </p> <pre><code>var displayMember = $('#jqxTreeMap').jqxTreeMap('displayMember'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tqyTv/">displayMember is set to label</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span1'>height</span> </td> <td> <span>Number/String</span> </td> <td>600 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the jqxTreeMap's height. </p> <h4>Code examples</h4> <p> Set the <code>height</code> property. </p> <pre><code>$('#jqxTreeMap').jqxTreeMap({height:"400px"});</code></pre> <p> Get the <code>height</code> property. </p> <pre><code>var height = $('#jqxTreeMap').jqxTreeMap('height');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/cT6ct/">height is set to 300</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span4'>hoverEnabled</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets whether a sector will be outlined when the mouse cursor is over it. </p> <h4>Code examples</h4> <p> Set the <code>hoverEnabled</code> property. </p> <pre><code>$('#jqxTreeMap').jqxTreeMap({ hoverEnabled: true }); </code></pre> <p> Get the <code>hoverEnabled</code> property. </p> <pre><code>var hoverEnabled = $('#jqxTreeMap').jqxTreeMap('hoverEnabled'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ytcps/">hoverEnabled is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span8'>headerHeight</span> </td> <td> <span>Number</span> </td> <td>25 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the height of the parent sector's header. </p> <h4>Code examples</h4> <p> Set the <code>headerHeight</code> property. </p> <pre><code>$('#jqxTreeMap').jqxTreeMap({ headerHeight: 30 }); </code></pre> <p> Get the <code>headerHeight</code> property. </p> <pre><code>var headerHeight = $('#jqxTreeMap').jqxTreeMap('headerHeight'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ru9f6/">headerHeight is set to 30</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span7'>legendLabel</span> </td> <td> <span>String</span> </td> <td>"Legend" </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the Legend's label. </p> <h4>Code examples</h4> <p> Set the <code>legendLabel</code> property. </p> <pre><code>$('#jqxTreeMap').jqxTreeMap({ legendLabel: "New Label" }); </code></pre> <p> Get the <code>legendLabel</code> property. </p> <pre><code>var legendLabel = $('#jqxTreeMap').jqxTreeMap('legendLabel'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/vPcGX/">legendLabel is set to 'Olympic medal count - London 2012'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span48'>legendPosition</span> </td> <td> <span>Object</span> </td> <td>{ x: 0, y: -5 } </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the Legend's position. The <code>x</code> determines the X offset of the Legend from the left side of the jqxTreeMap. The <code>y</code> determines the Y offset of the Legend from the bottom side of jqxTreeMap. </p> <h4>Code example</h4> <p> Set the <code>legendPosition</code> property. </p> <pre><code>$("#jqxTreeMap").jqxTreeMap({legendPosition: {x: 50, y: -50}}); </code></pre> <p> Get the <code>legendPosition</code> property. </p> <pre><code>var baseColor = $('#jqxTreeMap').jqxTreeMap('legendPosition'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3tq3c/">legendPosition is set to {x: 5, y: 0}</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span3'>legendScaleCallback</span> </td> <td> <span>Object</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets a callback function which formats the values displayed in the jqxTreeMap's Legend. </p> <h4>Code examples</h4> <p> Set the <code>legendScaleCallback</code> property . </p> <pre><code> $('#jqxTreeMap').jqxTreeMap({ width: '600', height: '500', source: data, colorRange: 100, colorMode: 'autocolors', baseColor: '#52CBFF', legendScaleCallback: function (v) { v = v.toFixed(1); return v; }, legendLabel: 'Olympic medal count - London 2012' }); </code></pre> <p> Get the <code>legendScaleCallback</code> property. </p> <pre><code>var legendScaleCallback = $('#jqxTreeMap').jqxTreeMap('legendScaleCallback '); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zeLgR/">legendScaleCallback is set to a custom function</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span68'>renderCallbacks</span> </td> <td> <span>Object</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p>Sets or gets callback function(s) which enable you to customize the rendering of any sector in the jqxTreeMap. To define a callback function for all sectors, use the "*" : function(sectorHtmlElement, sectorData) syntax. To define a callback function for a specific element, use its <code>label</code> value instead of "*".</p> <h4>Code example</h4> <p> Set the <code>renderCallbacks</code> property. </p> <pre><code> $('#jqxTreeMap').jqxTreeMap({ renderCallbacks: { '*': function (sectorHtmlElement, sectorData) { if (sectorData.data) { sectorHtmlElement.jqxTooltip({ content: "content", position: 'mouse', autoHideDelay: 6000, theme: theme }); } else if (sectorData.data === undefined) { sectorHtmlElement.css({ backgroundColor: '#fff', border: '1px solid #aaa' }); } } } }); </code></pre> <p> Get the <code>renderCallbacks</code> property. </p> <pre><code>var renderCallbacks = $('#jqxTreeMap').jqxTreeMap('renderCallbacks'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/67C6N/">renderCallbacks is set to a custom function</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span5'>selectionEnabled</span> </td> <td> <span>Boolean</span> </td> <td>true </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets whether a sector will be outlined when it is clicked.. </p> <h4>Code examples</h4> <p> Set the <code>selectionEnabled</code> property. </p> <pre><code>$('#jqxTreeMap').jqxTreeMap({ selectionEnabled: false }); </code></pre> <p> Get the <code>selectionEnabled</code> property. </p> <pre><code>var selectionEnabled = $('#jqxTreeMap').jqxTreeMap('selectionEnabled'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/BeCqr/">selectionEnabled is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span6'>showLegend</span> </td> <td> <span>Boolean</span> </td> <td>true </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Determines whether the jqxTreeMap's Legend is displayed. Legend is possible to be displayed when the <code>colorMode</code> property is set to <code>"autoColors"</code> or <code>"rangeColors"</code>. </p> <h4>Code examples</h4> <p> Set the <code>showLegend</code> property. </p> <pre><code>$('#jqxTreeMap').jqxTreeMap({ showLegend: false }); </code></pre> <p> Get the <code>enableHover</code> property. </p> <pre><code>var showLegend = $('#jqxTreeMap').jqxTreeMap('showLegend'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/UBYD8/">showLegend is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span9'>source</span> </td> <td> <span>Object</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Specifies the jqxTreeMap's data source. Use this property to populate the jqxTreeMap. </p> <h4>Code examples</h4> <p> Initialize a jqxTreeMap with the <code>source</code> property specified. </p> <pre><code> var data = [ { label: 'Drama', value: null, color: '#B3FAFF' }, { label: 'Crime', value: null, color: '#95FF7A' }, { label: 'Action', value: null, color: '#FFA3CE' }, { label: 'Comedy', value: null, color: '#F1A3FF' }, { label: 'The Shawshank Redemption', value: 15.4, parent: 'Drama', data: { description: "Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.", title: "The Shawshank Redemption (1994)" } }, { label: 'Top Gun', value: 4, parent: 'Drama', data: { description: "As students at the Navy's elite fighter weapons school compete to be best in the class, one daring young flyer learns a few things from a civilian instructor that are not taught in the classroom.", title: "Top Gun (1986)" } }, { label: 'The Master', value: 4.5, parent: 'Drama', data: { description: "A Naval veteran arrives home from war unsettled and uncertain of his future - until he is tantalized by The Cause and its charismatic leader.", title: "The Master (2012)" } }, { label: 'Argo', value: 6.8, parent: 'Drama', data: { description: "A dramatization of the 1980 joint CIA-Canadian secret operation to extract six fugitive American diplomatic personnel out of revolutionary Iran.", title: "Argo (2012)" } }, { label: 'Fight Club', value: 8.8, parent: 'Crime', data: { description: "An insomniac office worker looking for a way to change his life crosses paths with a devil-may-care soap maker and they form an underground fight club that evolves into something much, much more.", title: "Fight Club (1999)" } }, { label: 'The Godfather', value: 11, parent: 'Crime', data: { description: "The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.", title: "The Godfather (1972)" } }, { label: 'The Dark Knight', value: 8.9, parent: 'Action', data: { description: "When Batman, Gordon and Harvey Dent launch an assault on the mob, they let the clown out of the box, the Joker, bent on turning Gotham on itself and bringing any heroes down to his level.", title: "The Dark Knight (2008)" } }, { label: 'Pulp Fiction', value: 6.0, parent: 'Crime', data: { description: "The lives of two mob hit men, a boxer, a gangster's wife, and a pair of diner bandits intertwine in four tales of violence and redemption.", title: "Pulp Fiction (1994)" } }, { label: 'Forrest Gump', value: 8.7, parent: 'Drama', data: { description: "Forrest Gump, while not intelligent, has accidentally been present at many historic moments, but his true love, Jenny Curran, eludes him.", title: "Forrest Gump (1994)" } }, { label: 'The Matrix', value: 8.7, parent: 'Action', data: { description: "A computer hacker learns from mysterious rebels about the true nature of his reality and his role in the war against its controllers.", title: "The Matrix (1999)" } }, { label: '12 Angry Men', value: 7.9, parent: 'Drama', data: { description: "Twelve men must decide the fate of one when one juror objects to the jury's decision.", title: "12 Angry Men (TV 1997)" } }, { label: 'Star Wars', value: 10.8, parent: 'Action', data: { description: "Luke Skywalker, a spirited farm boy, joins rebel forces to save Princess Leia from the evil Darth Vader, and the galaxy from the Empire's planet-destroying Death Star..", title: "Star Wars: Episode IV - A New Hope (1977)" } }, { label: 'Inception', value: 9.8, parent: 'Action', data: { description: "A skilled extractor is offered a chance to regain his old life as payment for a task considered to be impossible.", title: "Inception (2010)" } }, { label: 'Snatch.', value: 4.3, parent: 'Crime', data: { description: "Unscrupulous boxing promoters, violent bookmakers, a Russian gangster, incompetent amateur robbers, and supposedly Jewish jewelers fight to track down a priceless stolen diamond.", title: "Snatch (2000)" } }, { label: 'Toy Story', value: 9.3, parent: 'Comedy', data: { description: "A cowboy doll is profoundly threatened and jealous when a new spaceman figure supplants him as top toy in a boy's room.", title: "Toy Story(2005)" } }, { label: 'Skyfall', value: 7, parent: 'Crime', data: { description: "Bond's loyalty to M is tested when her past comes back to haunt her. Whilst MI6 comes under attack, 007 must track down and destroy the threat, no matter how personal the cost.", title: "Skyfall (2012)" } }, { label: 'Parker', value: 5.6, parent: 'Crime', data: { description: "A thief with a unique code of professional ethics is double-crossed by his crew and left for dead. Assuming a new disguise and forming an unlikely alliance with a woman on the inside, he looks to hijack the score of the crew's latest heist.", title: "Parker (1994)" } }, { label: 'District 9', value: 6.0, parent: 'Action', data: { description: "An extraterrestrial race forced to live in slum-like conditions on Earth suddenly finds a kindred spirit in a government agent who is exposed to their biotechnology.", title: "District 9 (2009)" } }, { label: 'Stalag 17', value: 6.1, parent: 'Comedy', data: { description: "When two escaping American World War II prisoners are killed, the German POW camp barracks black marketeer, J.J. Sefton, is suspected of being an informer.", title: "Stalag 17 (1953)"} } ]; var theme = ""; $('#jqxTreeMap').jqxTreeMap({ width: 600, height: 600, source: data, colorRange: 50, renderCallbacks: { '*': function (element, value) { if (value.data) { element.jqxTooltip({ <pre style='width: 700px; max-width: 700px; margin: 10px;' class='code'> content: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"font-weight: bold; max-width: 200px; font-family: verdana; font-size: 13px;"></span>' + value.data.title + '<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div style="width: 200px; font-family: verdana; font-size: 12px;"</span>></span>' + value.data.description + '<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span>'</span>,<div/><div/></pre> position: 'mouse', autoHideDelay: 6000, theme: theme }); } else if (value.data === undefined) { element.css({ backgroundColor: '#fff', border: '1px solid #aaa' }); } } } }); }); </code></pre> Each item in the data source is required to have <code>label</code> and <code>value</code> fields. To create nested elements, you need to set the <code>parent</code> field to point to the <code>label</code> of another item. The <code>data</code> field enables you to store additional data associated to each treemap sector. By setting the <code>color</code> field you can determine the sector's background color. <br /> In order to populate the jqxTreeMap through jqxDataAdapter, you need to set the "source" property of jqxTreeMap to point to an instance of jqxDataAdapter. The <code>label</code> and <code>value</code> fields of each treemap sector are determined by the <code>displayMember</code> and <code>valueMember</code> properties. <p>Initialize jqxTreeMap through jqxDataAdapter</p> <pre> <code> var source = { datatype: "tab", datafields: [ { name: 'Year' }, { name: 'HPI' }, { name: 'BuildCost' }, { name: 'Population' }, { name: 'Rate' } ], url: '../sampledata/homeprices.txt' }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); $('#jqxTreeMap').jqxTreeMap({ width: '600', height: '500', source: dataAdapter, displayMember: 'Year', valueMember: 'Rate', colorMode: 'rangeColors', colorRanges: [ { min: 0.02, max: 0.03, color: '#ff0300' }, { min: 0.03, max: 0.04, color: '#fe2e00' }, { min: 0.04, max: 0.05, color: '#fe3900' }, { min: 0.05, max: 0.06, color: '#ff5400' }, { min: 0.06, max: 0.07, color: '#fe7500' }, { min: 0.07, max: 0.08, color: '#fe8200' }, { min: 0.08, max: 0.09, color: '#ffed00' }, { min: 0.09, max: 0.1, color: '#b8db00' }, { min: 0.1, max: 0.11, color: '#7fbf00' }, { min: 0.11, max: 0.12, color: '#50a600' }, { min: 0.12, max: 0.15, color: '#008000' } ], legendScaleCallback: function (v) { return v; }, renderCallbacks: { '*': function (element, data) { <pre style='width: 700px; max-width: 700px; margin: 10px;' class='code'> var content = <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"font-weight: bold; font-family: verdana; font-size: 13px;"</span>></span>Year: ' + data.record.Year + '<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span>'</span>;<div/> content += <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">" font-family: verdana; font-size: 12px;"</span>></span>HPI: ' + data.record.HPI + '<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span>'</span>;<div/> content += <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">" font-family: verdana; font-size: 12px;"</span>></span>Build Cost: ' + data.record.BuildCost + '<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span>'</span>;<div/> content += <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">" font-family: verdana; font-size: 12px;"</span>></span>Population: ' + data.record.Population + '<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span>'</span>;<div/> content += <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">" font-family: verdana; font-size: 12px;"</span>></span>Interest Rate: ' + data.record.Rate + '<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span>'</span>;<div/> content += <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span>'</span>;<div/></pre> element.jqxTooltip({ content: content, position: 'mouse', autoHideDelay: 6000 }); } }, legendLabel: 'Interest Rate' }); </code> </pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Axh7c/">source is set to data</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span63'>theme</span> </td> <td> <span>String</span> </td> <td>'' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets the widget's theme. </p> jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following: <ul> <li>Include the theme's CSS file after jqx.base.css.<br /> The following code example adds the 'energyblue' theme. <pre><code> <pre><code><link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.energyblue.css" type="text/css" /> </code></pre> </code></pre> </li> <li>Set the widget's theme property to 'energyblue' when you initialize it. </li> </ul> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/vDecH/">theme is set to 'energyblue'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span10'>valueMember</span> </td> <td> <span>String</span> </td> <td>"" </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the <code>valueMember</code> property. The <code>valueMember</code> determines the name of an object property to set as a <code>value</code> of the treemap sectors. The name is contained in the collection specified by the <code>source</code> property. The property is taken into account when the jqxTreeMap's <code>source</code> property points to jqxDataAdapter instance. </p> <h4>Code example</h4> <p> Set the <code>valueMember</code> property. </p> <pre><code>$("#jqxTreeMap").jqxTreeMap({valueMember: 'population'});</code></pre> <p> Get the <code>valueMember</code> property. </p> <pre><code>var valueMember = $('#jqxTreeMap').jqxTreeMap('valueMember'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/BAefX/">valueMember is set to value</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='property-name-disabled'>width</span> </td> <td> <span>Number/String</span> </td> <td>600 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the jqxTreeMap's width. </p> <h4>Code examples</h4> <p> Set the <code>width</code> property. </p> <pre><code>$('#jqxTreeMap').jqxTreeMap({width:"200px"});</code></pre> <p> Get the <code>width</code> property. </p> <pre><code>var width = $('#jqxTreeMap').jqxTreeMap('width');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/S8Stm/">width is set to 400</a> </div> </div> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <h2 class="documentation-top-header">Events</h2> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span27'>bindingComplete</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> This event is triggered when the jqxTreeMap's <code>source</code> property is set to point to jqxDataAdapter instance and the jqxDataAdapter's binding is finished. </p> <h4>Code examples</h4> <p> Bind to the <code>bindingComplete</code> event by type: jqxTreeMap. Note: Bind to that event before the widget's initialization. Otherwise, it is possible that the binding is already completed before you bind to it. </p> <pre><code>$('#jqxTreeMap').on('bindingComplete', function (event) { });</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/BrfEL/">Bind to the bindingComplete event by type: jqxTreeMap.</a> </div> </div> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <h2 class="documentation-top-header">Methods</h2> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span52'>destroy</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p>Destroy the jqxTreeMap widget. The destroy method removes the jqxTreeMap widget from the web page.</p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>None</em></td> <td></td> <td></td> </tr> </tbody> </table> <strong>Return Value</strong><br /> <em>None</em> </div> <h4>Code example</h4> <p> Invoke the <code>destroy</code> method.