dhtmlXDataMap is a component that visualizes a data set depending on some property of items. Items are displayed as rectangles with different sizes: the bigger area corresponds to the bigger property size.

To initialize datamap, you need to

1. include related js and css files
2. place container for the dataselect on a page
3. run dataselect initialiation

There are four files that need to be included

<script src="../../codebase/dhtmlxdataview.js" type="text/javascript"></script>
<script src="../../codebase/ext/dhtmlxdatamap.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxdataview.css"> 
<link rel="STYLESHEET" type="text/css" href="../../codebase/ext/dhtmlxdatamap.css">

DataMap initialized in HTML container:

    <<div id="map_container" style="width:600px;height:400px"></div>

To initilize DataMap you need to pass “type”, “container” and “size” elements:

   var map =  new dhtmlXDataMap({
	type:{
	    template: "<span class='dhx_strong'>#author#</span>#title#<p >Price: <b>#price#</b></p>",
	    template_edit:"<textarea class='dhx_item_editor' bind='obj.title'>"
	},
   	container:"map_container",
  	size:"price"
    });

Elements of the dhtmlXDataMap constructor:

• container - the id of HTML container for the component;
• type - object that contains templates for items and editor;
• size - an item property that is used for items visualization

DataMap supports the same methods for data loading as DataView:

   map.load("books.xml","xml");