range-band-stack.json

{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/sparkline/range-band/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=\"col-lg-8 control-section\">\n        <div id=\"spark-container\" class=\"row\">\n            <div class=\"cols-sample-area\" align=\"center\">\n                    <p>\n                        <font size=\"4px\"> Sales Growth Comparison with various Products</font>\n                    </p>\n                <script type=\"text/x-template\" id=\"columnTemplate1\">\n                    <div id=\"sparkline2010${id}\" />\n                </script>\n                <script type=\"text/x-template\" id=\"columnTemplate2\">\n                    <div id=\"sparkline2011${id}\" />\n                </script>\n                <div id=\"Grid\"></div>\n            </div>\n        </div>\n    </div>\n    \n    \n    \n    \n    \n\n    <!-- Property Panel -->\n    <div class=\"col-lg-4 property-section\">\n        &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0;\n        <br>\n        <table id=\"property\" style=\"width:100%\" title=\"Properties\">\n            <tbody>\n                <tr style=\"height: 30px \">\n                    <td style=\"width: 50% \">\n                        Range Band Min 1\n                    </td>\n                    <td style=\"width: 50% \">\n                        <div id=\"range-min\"></div>\n                    </td>\n                </tr>\n                <tr style=\"height: 30px \">\n                    <td style=\"width: 50% \">\n                        Range Band Max 3\n                    </td>\n                    <td style=\"width: 50% \">\n                        <div id=\"range-max\"></div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </div></div></body></html>","index.js":"{{ripple}}\n\n    var grid = new ej.grids.Grid({\n        dataSource: new ej.data.DataManager(window.products).executeLocal(new ej.data.Query()),\n        allowSelection: false,\n        enableColumnVirtualization: false,\n        enableHover: true,\n        height: 400,\n        columns: [\n            { field: 'name', headerText: 'Name', textAlign: 'Right', width: 50 },\n            { headerText: '2010', template: '#columnTemplate1', textAlign: 'Center', width: 100 },\n            { headerText: '2011', template: '#columnTemplate2', textAlign: 'Center', width: 100 },\n        ],\n    });\n    grid.appendTo('#Grid');\n    var sparkline = {\n        height: '50px',\n        width: '150px',\n\n        lineWidth: 2,\n        fill: '#0d3c9b',\n        dataSource: window.lineData[0],\n        rangeBandSettings: [\n            {\n                startRange: 1, endRange: 3, color: '#bfd4fc'\n            }\n        ]\n    };\n    setTimeout(function () {\n        for (var i = 1; i < 6; i++) {\n            var first = new ej.charts.Sparkline(sparkline);\n            first.dataSource = window.lineData[i];\n            first.appendTo('#sparkline2010' + i);\n            var second = new ej.charts.Sparkline(sparkline);\n            second.dataSource = window.lineData[i + 5];\n            second.appendTo('#sparkline2011' + i);\n        }\n    }, 500);\n    var sliderChange1;\n        var sliderChange2;\n        var slider1 = new ej.inputs.Slider({\n            value: 1,\n            change: sliderChange1,\n            max: 6, min: 0, type: 'MinRange',\n        }, '#range-min');\n        var slider2 = new ej.inputs.Slider({\n            value: 3,\n            change: sliderChange2,\n            max: 6, min: 0, type: 'MinRange',\n        }, '#range-max');\n        slider1.change = sliderChange1 = function (e) {\n            changeRangeMin(e.value);\n        };\n        slider2.change = sliderChange2 = function (e) {\n            changeRangeMax(e.value);\n        };\n        var changeRangeMin = function (min) {\n            for (var i = 1; i < 6; i++) {\n                var first = ej.base.getInstance('#sparkline2010' + i, ej.charts.Sparkline);\n                var second = ej.base.getInstance('#sparkline2011' + i, ej.charts.Sparkline);\n                first.rangeBandSettings[0].startRange = min;\n                second.rangeBandSettings[0].startRange = min;\n                first.refresh();\n                second.refresh();\n            }\n        };\n        var changeRangeMax = function (max) {\n            for (var i = 1; i < 6; i++) {\n                var first = ej.base.getInstance('#sparkline2010' + i, ej.charts.Sparkline);\n                var second = ej.base.getInstance('#sparkline2011' + i, ej.charts.Sparkline);\n                first.rangeBandSettings[0].endRange = max;\n                second.rangeBandSettings[0].endRange = max;\n                first.refresh();\n                second.refresh();\n            }\n        };\n"}