DHTMLX Docs & Samples Explorer

Index
dhtmlxDataView

## DataMap

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.

### Initialization

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");