UNPKG

jqwidgets-framework

Version:

jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.

143 lines (138 loc) 6.01 kB
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>In this demo the jqxTreeMap is built from JSON data.</title> <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxtreemap.js"></script> <script type="text/javascript" src="../../../scripts/demos.js"></script> </head> <body> <div id='content'> <script type="text/javascript"> $(document).ready(function () { var data = [ { "id": "2", "parentid": "1", "text": "Hot Chocolate", "value": "$5.2" }, { "id": "3", "parentid": "1", "text": "Peppermint Hot Chocolate", "value": "$4.0" }, { "id": "4", "parentid": "1", "text": "Salted Caramel Hot Chocolate", "value": "$2.4" }, { "id": "5", "parentid": "1", "text": "White Hot Chocolate", "value": "$2.5" }, { "text": "Chocolate Beverage", "id": "1", "parentid": "-1", "value": "$1.1" }, { "id": "6", "text": "Espresso Beverage", "parentid": "-1", "value": "$0.9" }, { "id": "7", "parentid": "6", "text": "Caffe Americano", "value": "$1.2" }, { "id": "8", "text": "Caffe Latte", "parentid": "6", "value": "$3.3" }, { "id": "9", "text": "Caffe Mocha", "parentid": "6", "value": "$2.5" }, { "id": "10", "text": "Cappuccino", "parentid": "6", "value": "$1.5" }, { "id": "11", "text": "Pumpkin Spice Latte", "parentid": "6", "value": "$1.6" }, { "id": "12", "text": "Frappuccino", "parentid": "-1" }, { "id": "13", "text": "Caffe Vanilla Frappuccino", "parentid": "12", "value": "$1.2" }]; // prepare the data var source = { datatype: "json", datafields: [ { name: 'id' }, { name: 'parentid' }, { name: 'text' }, { name: 'value' } ], id: 'id', localdata: data }; // create data adapter. var dataAdapter = new $.jqx.dataAdapter(source); // perform Data Binding. dataAdapter.dataBind(); // get the treemap sectors. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents // the sub items collection name. Each jqxTreeMap item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter // specifies the mapping between the 'text' and 'label' fields. var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]); $('#treemap').jqxTreeMap({ width: getWidth("TreeMap"), height: 600, source: records, baseColor: '#0afaaa', renderCallbacks: { '*': function (element, data) { if (!data.parent) { element.css({ backgroundColor: '#fff', border: '1px solid #aaa' }); } else { var nThreshold = 105; var bgDelta = (data.rgb.r * 0.299) + (data.rgb.g * 0.587) + (data.rgb.b * 0.114); var foreColor = (255 - bgDelta < nThreshold) ? 'Black' : 'White'; element.css({ color: foreColor }); } } } }); }); </script> <div id='treemap'> </div> </div> <div style="position: absolute; bottom: 5px; right: 5px;"> <a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a> </div> </body> </html>