opposed-stack.json

{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/heatmap/opposed/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: 40%;\">\n                        <div>\n                            <input id=\"XOpposedPosition\" type=\"checkbox\">\n                        </div>\n                    </td>\n                </tr>\n                <tr style=\"height: 50px\">\n                    <td style=\"width: 40%;\">\n                        <div>\n                            <input id=\"YOpposedPosition\" type=\"checkbox\">\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: 'Monthly Flight Traffic at JFK Airport',\n            textStyle: {\n                size: '15px',\n                fontWeight: '500',\n                fontStyle: 'Normal',\n                fontFamily: 'Segoe UI'\n            }\n        },\n        xAxis: {\n            labels: ['2007', '2008', '2009', '2010', '2011',\n                '2012', '2013', '2014', '2015', '2016', '2017'],\n            opposedPosition: true,\n            labelRotation: 45,\n            labelIntersectAction: 'None',\n        },\n        yAxis: {\n            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May',\n                'Jun', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],\n            opposedPosition: true\n        },\n        legendSettings: {\n            visible: false,\n        },\n        cellSettings: {\n            showLabel: false,\n            border: {\n                width: 0,\n            },\n            format: '{value} flights'\n        },\n        dataSource: window.opposedAxisData,\n        load: function (args) {\n            var opposedAxisTheme = location.hash.split('/')[1];\n            opposedAxisTheme = opposedAxisTheme ? opposedAxisTheme : 'Material';\n            args.heatmap.theme = (opposedAxisTheme.charAt(0).toUpperCase() + opposedAxisTheme.slice(1));\n        },\n    });\n    heatmap.appendTo('#container');\n\n    var xlistObj = new ej.buttons.CheckBox({ label: 'Change X-Axis Position', checked: true, change: valueXChange });\n    xlistObj.appendTo('#XOpposedPosition');\n\n    function valueXChange() {\n        heatmap.xAxis.opposedPosition = xlistObj.checked;\n    }\n\n    var ylistObj = new ej.buttons.CheckBox({ label: 'Change Y-Axis Position', checked: true, change: valueYChange });\n    ylistObj.appendTo('#YOpposedPosition');\n\n    function valueYChange() {\n        heatmap.yAxis.opposedPosition = ylistObj.checked;\n    }\n"}