Repository navigation
Expand file tree
/
Copy pathcell-json-binding-stack.json
More file actions
1 lines (1 loc) · 7.24 KB
/
Copy pathcell-json-binding-stack.json
File metadata and controls
1 lines (1 loc) · 7.24 KB
1
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/heatmap/cell-json-binding/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"container\" align=\"center\"> </div>\n <div style=\"float: right; margin-right: 10px;\">Source:\n <a href=\"https://en.wikipedia.org/wiki/World_Tourism_rankings\" target=\"_blank\">https://en.wikipedia.org/</a>\n </div>\n</div>\n\n\n","index.js":"{{ripple}}/**\n * Heatmap JSON data binding sample\n */\n\n var jsonCellData = [\n { 'rowid': 'France', 'columnid': '2010', 'value': '77.6' },\n { 'rowid': 'France', 'columnid': '2011', 'value': '79.4' },\n { 'rowid': 'France', 'columnid': '2012', 'value': '80.8' },\n { 'rowid': 'France', 'columnid': '2013', 'value': '86.6' },\n { 'rowid': 'France', 'columnid': '2014', 'value': '83.7' },\n { 'rowid': 'France', 'columnid': '2015', 'value': '84.5' },\n { 'rowid': 'France', 'columnid': '2016', 'value': '82.6' },\n { 'rowid': 'USA', 'columnid': '2010', 'value': '60.6' },\n { 'rowid': 'USA', 'columnid': '2011', 'value': '65.4' },\n { 'rowid': 'USA', 'columnid': '2012', 'value': '70.8' },\n { 'rowid': 'USA', 'columnid': '2013', 'value': '73.8' },\n { 'rowid': 'USA', 'columnid': '2014', 'value': '75.3' },\n { 'rowid': 'USA', 'columnid': '2015', 'value': '77.5' },\n { 'rowid': 'USA', 'columnid': '2016', 'value': '77.6' },\n { 'rowid': 'Spain', 'columnid': '2010', 'value': '64.9' },\n { 'rowid': 'Spain', 'columnid': '2011', 'value': '52.6' },\n { 'rowid': 'Spain', 'columnid': '2012', 'value': '60.8' },\n { 'rowid': 'Spain', 'columnid': '2013', 'value': '65.6' },\n { 'rowid': 'Spain', 'columnid': '2014', 'value': '52.6' },\n { 'rowid': 'Spain', 'columnid': '2015', 'value': '68.5' },\n { 'rowid': 'Spain', 'columnid': '2016', 'value': '75.6' },\n { 'rowid': 'China', 'columnid': '2010', 'value': '55.6' },\n { 'rowid': 'China', 'columnid': '2011', 'value': '52.3' },\n { 'rowid': 'China', 'columnid': '2012', 'value': '54.8' },\n { 'rowid': 'China', 'columnid': '2013', 'value': '51.1' },\n { 'rowid': 'China', 'columnid': '2014', 'value': '55.6' },\n { 'rowid': 'China', 'columnid': '2015', 'value': '56.9' },\n { 'rowid': 'China', 'columnid': '2016', 'value': '59.3' },\n { 'rowid': 'Italy', 'columnid': '2010', 'value': '43.6' },\n { 'rowid': 'Italy', 'columnid': '2011', 'value': '43.2' },\n { 'rowid': 'Italy', 'columnid': '2012', 'value': '55.8' },\n { 'rowid': 'Italy', 'columnid': '2013', 'value': '50.1' },\n { 'rowid': 'Italy', 'columnid': '2014', 'value': '48.5' },\n { 'rowid': 'Italy', 'columnid': '2015', 'value': '50.7' },\n { 'rowid': 'Italy', 'columnid': '2016', 'value': '52.4' },\n { 'rowid': 'UK', 'columnid': '2010', 'value': '28.2' },\n { 'rowid': 'UK', 'columnid': '2011', 'value': '31.6' },\n { 'rowid': 'UK', 'columnid': '2012', 'value': '29.8' },\n { 'rowid': 'UK', 'columnid': '2013', 'value': '33.1' },\n { 'rowid': 'UK', 'columnid': '2014', 'value': '32.6' },\n { 'rowid': 'UK', 'columnid': '2015', 'value': '34.4' },\n { 'rowid': 'UK', 'columnid': '2016', 'value': '35.8' },\n { 'rowid': 'Germany', 'columnid': '2010', 'value': '26.8' },\n { 'rowid': 'Germany', 'columnid': '2011', 'value': '29' },\n { 'rowid': 'Germany', 'columnid': '2012', 'value': '26.8' },\n { 'rowid': 'Germany', 'columnid': '2013', 'value': '27.6' },\n { 'rowid': 'Germany', 'columnid': '2014', 'value': '33' },\n { 'rowid': 'Germany', 'columnid': '2015', 'value': '35' },\n { 'rowid': 'Germany', 'columnid': '2016', 'value': '35.6' },\n { 'rowid': 'Mexico', 'columnid': '2010', 'value': '23.2' },\n { 'rowid': 'Mexico', 'columnid': '2011', 'value': '24.9' },\n { 'rowid': 'Mexico', 'columnid': '2012', 'value': '30.1' },\n { 'rowid': 'Mexico', 'columnid': '2013', 'value': '22.2' },\n { 'rowid': 'Mexico', 'columnid': '2014', 'value': '29.3' },\n { 'rowid': 'Mexico', 'columnid': '2015', 'value': '32.1' },\n { 'rowid': 'Mexico', 'columnid': '2016', 'value': '35' },\n { 'rowid': 'Thailand', 'columnid': '2010', 'value': '15.9' },\n { 'rowid': 'Thailand', 'columnid': '2011', 'value': '19.8' },\n { 'rowid': 'Thailand', 'columnid': '2012', 'value': '21.8' },\n { 'rowid': 'Thailand', 'columnid': '2013', 'value': '23.5' },\n { 'rowid': 'Thailand', 'columnid': '2014', 'value': '24.8' },\n { 'rowid': 'Thailand', 'columnid': '2015', 'value': '29.9' },\n { 'rowid': 'Thailand', 'columnid': '2016', 'value': '32.6' },\n { 'rowid': 'Austria', 'columnid': '2010', 'value': '22' },\n { 'rowid': 'Austria', 'columnid': '2011', 'value': '21.3' },\n { 'rowid': 'Austria', 'columnid': '2012', 'value': '24.2' },\n { 'rowid': 'Austria', 'columnid': '2013', 'value': '23.2' },\n { 'rowid': 'Austria', 'columnid': '2014', 'value': '25' },\n { 'rowid': 'Austria', 'columnid': '2015', 'value': '26.7' },\n { 'rowid': 'Austria', 'columnid': '2016', 'value': '28.1' },\n ];\n var heatmap = new ej.heatmap.HeatMap({\n titleSettings: {\n text: 'Most Visited Destinations by International Tourist Arrivals',\n textStyle: {\n size: '15px',\n fontWeight: '500',\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n }\n },\n xAxis: {\n labels: ['Austria', 'China', 'France', 'Germany', 'Italy', 'Mexico', 'Spain', 'Thailand', 'UK', 'USA'],\n },\n yAxis: {\n labels: ['2010', '2011', '2012', '2013', '2014', '2015', '2016'],\n },\n dataSource: jsonCellData,\n dataSourceSettings: {\n isJsonData: true,\n adaptorType: 'Cell',\n xDataMapping: 'rowid',\n yDataMapping: 'columnid',\n valueMapping: 'value'\n },\n cellSettings: {\n border: {\n radius: 4,\n width: 1,\n color: 'white'\n },\n showLabel: true,\n format: '{value} M',\n }, \n load: function (args) {\n var jsonCellTheme = location.hash.split('/')[1];\n jsonCellTheme = jsonCellTheme ? jsonCellTheme : 'Material';\n args.heatmap.theme = (jsonCellTheme.charAt(0).toUpperCase() + jsonCellTheme.slice(1));\n },\n paletteSettings: {\n palette: [{ color: '#DCD57E' },\n { color: '#A6DC7E' },\n { color: '#7EDCA2' },\n { color: '#6EB5D0' }\n ],\n },\n });\n heatmap.appendTo('#container');\n\n"}