bubble-types-stack.json

{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/heatmap/bubble-types/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>\n    <div class=\"col-md-8 control-section\">\n        <div class=\"content-wrapper\">\n            <div id=\"container\" style=\"width:92%\"></div>\n            <div style=\"float: right; margin-right: 10px;\">Source:\n                <a href=\"https://data.worldbank.org\" target=\"_blank\">https://data.worldbank.org/</a>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-md-4 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tbody>\n                <tr style=\"height: 50px\">\n                    <td style=\"width: 40%\">\n                        <div>Bubble Type:</div>\n                    </td>\n                    <td style=\"width: 60%;\">\n                        <div>\n                            <select id=\"bubbleType\"> \n                                <option value=\"Size\">Size</option>\n                                <option value=\"Color\">Color</option>\n                                <option value=\"Sector\">Sector</option>\n                            </select>\n                        </div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </div>\n</div>\n\n\n","index.js":"{{ripple}}/**\n * Heatmap Inversed Axis sample\n */\n\n    var heatmap = new ej.heatmap.HeatMap({\n        titleSettings: {\n            text: 'Female Participation Rate in Labor Force for the Countries',\n            textStyle: {\n                size: '15px',\n                fontWeight: '500',\n                fontStyle: 'Normal',\n                fontFamily: 'Segoe UI'\n            }\n        },\n        xAxis: {\n            labels: ['Singapore', 'Spain', 'Australia', 'Germany', 'Belgium', 'USA', 'France', 'UK'],\n            labelRotation: 45,\n            labelIntersectAction: 'None'\n        },\n        yAxis: {\n            labels: ['1995', '2000', '2005', '2010', '2015']\n        },\n        dataSource: window.tableBubbleData,\n        cellSettings: {\n             border: {\n                width: 1\n            },\n            showLabel: false,\n            tileType: 'Bubble',\n            bubbleType: 'Size'\n        },\n        tooltipRender: function (args) {\n            args.content = [args.yLabel + ' | ' + args.xLabel + ' : ' + args.value + ' %'];\n        },\n        paletteSettings: {\n            palette: [{ value: 35, color: '#50A3B1' },\n            { value: 45, color: '#78D1BD' },\n            { value: 55, color: '#CAE8B4' },\n            { value: 65, color: '#EDF8B6' },\n            { value: 78, color: '#FFFFDA' }\n            ],\n        },\n        load: function (args) {\n            var inversedAxisTheme = location.hash.split('/')[1];\n            inversedAxisTheme = inversedAxisTheme ? inversedAxisTheme : 'Material';\n            args.heatmap.theme = (inversedAxisTheme.charAt(0).toUpperCase() +\n            inversedAxisTheme.slice(1));\n        },\n        legendSettings: {\n            visible: true\n        },\n    });\n    heatmap.appendTo('#container');\n\n    var bubbleTypeObj = new ej.dropdowns.DropDownList({\n        index: 0,\n        popupHeight: '200px',\n        change: function (){ bubbleTypeChange(); }\n    });\n    bubbleTypeObj.appendTo('#bubbleType');\n\n    function bubbleTypeChange() {\n        heatmap.cellSettings.bubbleType = bubbleTypeObj.value.toString() === 'Size' ?\n            'Size' : bubbleTypeObj.value.toString() === 'Color' ?\n                'Color' : bubbleTypeObj.value.toString() === 'Sector' ?\n                    'Sector' : null;\n    }\n"}