row-json-binding-stack.json

{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/heatmap/row-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/2016_Summer_Olympics_medal_table\" target=\"_blank\">https://en.wikipedia.org/</a>\n     </div>\n</div>\n\n\n","index.js":"{{ripple}}\n    var jsonTableData = [\n        { 'Region': 'USA', '2000': 93, '2004': 101, '2008': 112, '2012': 103, '2016': 121 },\n        { 'Region': 'GBR', '2000': 28, '2004': 30, '2008': 49, '2012': 65, '2016': 67 },\n        { 'Region': 'China', '2000': 58, '2004': 63, '2008': 100, '2012': 91, '2016': 70 },\n        { 'Region': 'Russia', '2000': 89, '2004': 90, '2008': 60, '2012': 69, '2016': 55 },\n        { 'Region': 'Germany', '2000': 56, '2004': 49, '2008': 41, '2012': 44, '2016': 42 },\n        { 'Region': 'Japan', '2000': 18, '2004': 37, '2008': 25, '2012': 38, '2016': 41 },\n        { 'Region': 'France', '2000': 38, '2004': 33, '2008': 43, '2012': 35, '2016': 42 },\n        { 'Region': 'KOR', '2000': 28, '2004': 30, '2008': 32, '2012': 30, '2016': 21 },\n        { 'Region': 'Italy', '2000': 34, '2004': 32, '2008': 27, '2012': 28, '2016': 28 }];\n    var heatmap = new ej.heatmap.HeatMap({\n        titleSettings: {\n            text: 'Olympic Medal Achievements of most Successful Countries',\n            textStyle: {\n                size: '15px',\n                fontWeight: '500',\n                fontStyle: 'Normal',\n                fontFamily: 'Segoe UI'\n            }\n        },\n        xAxis: {\n            labels: ['China', 'France', 'GBR', 'Germany', 'Italy', 'Japan', 'KOR', 'Russia', 'USA'],\n            labelRotation: 45,\n            labelIntersectAction: 'None',\n        },\n        yAxis: {\n            title : {text: 'Olympic Year'},\n            labels: ['2000', '2004', '2008', '2012', '2016'],\n        },\n        dataSource: jsonTableData,\n        dataSourceSettings: {\n            isJsonData: true,\n            adaptorType: 'Table',\n            xDataMapping: 'Region',\n        },\n        paletteSettings: {\n            palette: [{ color: '#F0C27B' },\n            { color: '#4B1248' }\n            ],\n        },\n        cellSettings: {\n            border: {\n                width: 1,\n                radius: 4,\n                color: 'white'\n            }\n        },\n        tooltipRender: function (args) {\n            args.content = [args.yLabel + ' | ' + args.xLabel + ' : ' + args.value + ' medals'];\n        },\n        load: function (args) {\n            var jsonRowTheme = location.hash.split('/')[1];\n            jsonRowTheme = jsonRowTheme ? jsonRowTheme : 'Material';\n            args.heatmap.theme = (jsonRowTheme.charAt(0).toUpperCase() + jsonRowTheme.slice(1));\n        },\n    });\n    heatmap.appendTo('#container');\n\n"}