legend-stack.json

{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/heatmap/legend/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>\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: 60%\">\n                        <div>Legend Position:</div>\n                    </td>\n                    <td style=\"width: 40%;\">\n                        <div>\n                            <select id=\"LegendPosition\">\n                                <option value=\"Left\">Left</option>\n                                <option value=\"Right\">Right</option>\n                                <option value=\"Top\">Top</option>\n                                <option value=\"Bottom\">Bottom</option>\n                            </select>\n                        </div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </div>\n</div>\n\n\n","index.js":"{{ripple}}\n    var heatmap = new ej.heatmap.HeatMap({\n        titleSettings: {\n            text: 'Hourly Weather Forecast (in Celsius)',\n            textStyle: {\n                size: '15px',\n                fontWeight: '500',\n                fontStyle: 'Normal',\n                fontFamily: 'Segoe UI'\n            }\n        },\n        xAxis: {\n            labels: ['London', 'Berlin', 'Madrid', 'Paris', 'Rome', 'Lisbon', 'Dublin']\n        },\n        yAxis: {\n            labels: ['12AM', '2AM', '4AM', '6AM', '8AM', '10AM', '12PM',\n                '2PM', '4PM', '6PM', '8PM', '10PM']\n        },\n        cellSettings: {\n            showLabel: false,\n             format: '{value} C'\n        },\n        dataSource: window.legentSampleData,\n        paletteSettings: {\n            palette: [{ value: 0, color: '#6EB5D0' },\n            { value: 10, color: '#7EDCA2' },\n            { value: 19, color: '#DCD57E' },\n            { value: 22, color: '#DCD57E' },   \n        ]\n        },\n        tooltipRender: function (args)  {\n            args.content = [args.xLabel + ' | ' + args.yLabel + ' : ' + args.value + '\\xB0 C'];\n        },\n        load: function (args) {\n            var legendTheme = location.hash.split('/')[1];\n            legendTheme = legendTheme ? legendTheme : 'Material';\n            args.heatmap.theme = (legendTheme.charAt(0).toUpperCase() + legendTheme.slice(1));\n        },\n        legendSettings: {\n            position: 'Left',\n            labelFormat: '{value}\\xB0 C',\n        },\n    });\n    heatmap.appendTo('#container');\n\n    var legentListObj = new ej.dropdowns.DropDownList({\n        index: 0,\n        popupHeight: '200px',\n        change: function () { valueXChange(); }\n    });\n    legentListObj.appendTo('#LegendPosition');\n\n    function valueXChange() {\n        heatmap.legendSettings.position = legentListObj.value.toString() === 'Right' ?\n            'Right' : legentListObj.value.toString() === 'Bottom' ?\n                'Bottom' : legentListObj.value.toString() === 'Left' ?\n                    'Left' : legentListObj.value.toString() === 'Top' ? 'Top' : null;\n    }\n"}