default-stack.json

{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/sparkline/default/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 class=\"cols-sample-area\" align=\"center\">\n        <div style=\"width: 400px; text-align: center; font-size: 17px\">\n            Population comparision between various countries\n        </div>\n        <div style=\"width: 380px; text-align: center; font-size: 12.5px;\">\n            (From 2005 to 2014)\n        </div>\n        <br>\n        <br>\n        <table class=\"cols-sample-area row\" style=\"width: 100%;\">\n            <tbody><tr>\n                <td align=\"center\"></td>\n                <td>\n                    <div id=\"population\" style=\"height: 50px;text-align: center\">\n                        <b>Population</b>\n                    </div>\n                </td>\n                <td>\n                    <div id=\"density\" style=\"height: 50px;text-align: center\">\n                        <b>Population Density</b>\n                    </div>\n                </td>\n                <td>\n                    <div id=\"growth\" style=\"height: 50px;text-align: center\">\n                        <b>Population Growth Rate</b>\n                    </div>\n                </td>\n                <td>\n                    <div id=\"birth\" style=\"height: 50px;text-align: center\">\n                        <b>Birth Rate</b>\n                    </div>\n                </td>\n            </tr>\n            <tr style=\"height: 80px\">\n                <td align=\"center\">\n                    <b>Australia</b>\n                </td>\n                <td>\n                    <div id=\"p-australia\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"d-australia\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"g-australia\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"b-australia\" style=\"height: 50px\"></div>\n                </td>\n            </tr>\n            <tr style=\"height: 80px\">\n                <td align=\"center\">\n                    <b>Canada</b>\n                </td>\n                <td>\n                    <div id=\"p-canada\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"d-canada\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"g-canada\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"b-canada\" style=\"height: 50px\"></div>\n                </td>\n            </tr>\n            <tr style=\"height: 80px\">\n                <td align=\"center\">\n                    <b>China</b>\n                </td>\n                <td>\n                    <div id=\"p-china\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"d-china\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"g-china\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"b-china\" style=\"height: 50px\"></div>\n                </td>\n            </tr>\n            <tr style=\"height: 80px\">\n                <td align=\"center\">\n                    <b>France</b>\n                </td>\n                <td>\n                    <div id=\"p-france\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"d-france\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"g-france\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"b-france\" style=\"height: 50px\"></div>\n                </td>\n            </tr>\n            <tr style=\"height: 80px\">\n                <td align=\"center\">\n                    <b>Germany</b>\n                </td>\n                <td>\n                    <div id=\"p-germany\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"d-germany\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"g-germany\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"b-germany\" style=\"height: 50px\"></div>\n                </td>\n            </tr>\n            <tr style=\"height: 80px\">\n                <td align=\"center\">\n                    <b>India</b>\n                </td>\n                <td>\n                    <div id=\"p-india\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"d-india\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"g-india\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"b-india\" style=\"height: 50px\"></div>\n                </td>\n            </tr>\n            <tr style=\"height: 80px\">\n                <td align=\"center\">\n                    <b>Russia</b>\n                </td>\n                <td>\n                    <div id=\"p-russia\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"d-russia\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"g-russia\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"b-russia\" style=\"height: 50px\"></div>\n                </td>\n            </tr>\n            <tr style=\"height: 80px\">\n                <td align=\"center\">\n                    <b>Sweden</b>\n                </td>\n                <td>\n                    <div id=\"p-sweden\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"d-sweden\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"g-sweden\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"b-sweden\" style=\"height: 50px\"></div>\n                </td>\n            </tr>\n            <tr style=\"height: 80px\">\n                <td align=\"center\">\n                    <b>United Kingdom</b>\n                </td>\n                <td>\n                    <div id=\"p-uk\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"d-uk\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"g-uk\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"b-uk\" style=\"height: 50px\"></div>\n                </td>\n            </tr>\n            <tr style=\"height: 80px\">\n                <td align=\"center\">\n                    <b>United Sates</b>\n                </td>\n                <td>\n                    <div id=\"p-us\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"d-us\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"g-us\" style=\"height: 50px\"></div>\n                </td>\n                <td>\n                    <div id=\"b-us\" style=\"height: 50px\"></div>\n                </td>\n            </tr>\n        </tbody></table>\n    </div>\n    <div style=\"float: right; margin-right: 10px;\">Source:\n        <a href=\"https://www.indexmundi.com/g/g.aspx?v=21&amp;v=21000&amp;v=24&amp;v=25&amp;v=27&amp;c=as&amp;c=ch&amp;c=fr&amp;c=gm&amp;c=in&amp;c=rs&amp;c=sn&amp;c=sz&amp;c=uk&amp;c=us&amp;l=en/\" target=\"_blank\"> www.indexmundi.com</a>\n    </div>\n</div>\n    \n    \n    <style>\n        td {\n            width: 20%;\n        }\n    </style></div></body></html>","index.js":"{{ripple}}\n    var sparkmodel1 = {\n        height: '50px',\n        width: '90%', \n        lineWidth: 2,\n        type: 'Line',\n        valueType: 'Category',\n        fill: '#3C78EF',\n        negativePointColor: '#fc5070',\n        format: 'n',\n        useGroupingSeparator: true,\n        tooltipSettings: {\n            visible: true,\n            trackLineSettings: {\n                visible: true,\n                color: '#fc5070',\n                width: 2\n            }\n        },\n        xName: 'xval'\n    };\n    var sparkmodel2 = {       \n        valueType: 'Category',\n        fill: '#3C78EF',\n        opacity: 1,\n        height: '50px',\n        width: '90%', \n        lineWidth: 2,\n        type: 'Area',\n        border: {\n            color: '#fc5070',\n            width: 2\n        },\n        negativePointColor: '#fc5070',\n        tooltipSettings: {\n            visible: true,\n        },\n        xName: 'xval'\n    };\n    var sparkmodel3 = {\n        negativePointColor: '#fc5070',\n        tooltipSettings: {\n            visible: true,\n        },\n        height: '50px',\n        width: '90%', \n        lineWidth: 2,\n        type: 'WinLoss',\n        valueType: 'Category',\n        fill: '#3C78EF',        \n        xName: 'xval'\n    };\n    var sparkmodel4 = {\n        valueType: 'Category',\n        fill: '#3C78EF',\n        negativePointColor: '#fc5070',  \n        height: '50px',\n        width: '90%', \n        lineWidth: 2,\n        type: 'Column',              \n        tooltipSettings: {\n            visible: true,\n        },\n        xName: 'xval'\n    };\n    var australia1 = new ej.charts.Sparkline(sparkmodel1);\n    australia1.dataSource = window.defaultSparkData;\n    australia1.yName = 'yval';\n    australia1.tooltipSettings.format = '${xval} : ${yval}';\n    australia1.appendTo('#p-australia');\n    var canada1 = new ej.charts.Sparkline(sparkmodel1);\n    canada1.dataSource = window.defaultSparkData;\n    canada1.yName = 'yval1';\n    canada1.tooltipSettings.format = '${xval} : ${yval1}';\n    canada1.appendTo('#p-canada');\n    var china1 = new ej.charts.Sparkline(sparkmodel1);\n    china1.dataSource = window.defaultSparkData;\n    china1.yName = 'yval2';\n    china1.tooltipSettings.format = '${xval} : ${yval2}';\n    china1.appendTo('#p-china');\n    var france1 = new ej.charts.Sparkline(sparkmodel1);\n    france1.dataSource = window.defaultSparkData;\n    france1.yName = 'yval3';\n    france1.tooltipSettings.format = '${xval} : ${yval3}';\n    france1.appendTo('#p-france');\n    var germany1 = new ej.charts.Sparkline(sparkmodel1);\n    germany1.dataSource = window.defaultSparkData;\n    germany1.tooltipSettings.format = '${xval} : ${yval4}';\n    germany1.yName = 'yval4';\n    germany1.appendTo('#p-germany');\n    var india1 = new ej.charts.Sparkline(sparkmodel1);\n    india1.dataSource = window.defaultSparkData;\n    india1.tooltipSettings.format = '${xval} : ${yval5}';\n    india1.yName = 'yval5';\n    india1.appendTo('#p-india');\n    var russia1 = new ej.charts.Sparkline(sparkmodel1);\n    russia1.dataSource = window.defaultSparkData;\n    russia1.tooltipSettings.format = '${xval} : ${yval6}';\n    russia1.yName = 'yval6';\n    russia1.appendTo('#p-russia');\n    var sweden1 = new ej.charts.Sparkline(sparkmodel1);\n    sweden1.dataSource =  window.defaultSparkData;\n    sweden1.tooltipSettings.format = '${xval} : ${yval7}';\n    sweden1.yName = 'yval7';\n    sweden1.appendTo('#p-sweden');\n    var uk1 = new ej.charts.Sparkline(sparkmodel1);\n    uk1.dataSource = window.defaultSparkData;\n    uk1.tooltipSettings.format = '${xval} : ${yval8}';\n    uk1.yName = 'yval8';\n    uk1.appendTo('#p-uk');\n    var us1 = new ej.charts.Sparkline(sparkmodel1);\n    us1.dataSource = window.defaultSparkData;\n    us1.tooltipSettings.format = '${xval} : ${yval9}';\n    us1.yName = 'yval9';\n    us1.appendTo('#p-us');\n    var australia2 = new ej.charts.Sparkline(sparkmodel2);\n    australia2.dataSource = window.defaultSparkData;\n    australia2.yName = 'yval10';\n    australia2.tooltipSettings.format = '${xval} : ${yval10}';\n    australia2.appendTo('#d-australia');\n    var canada2 = new ej.charts.Sparkline(sparkmodel2);\n    canada2.dataSource = window.defaultSparkData;\n    canada2.tooltipSettings.format = '${xval} : ${yval11}';\n    canada2.yName = 'yval11';\n    canada2.appendTo('#d-canada');\n    var china2 = new ej.charts.Sparkline(sparkmodel2);\n    china2.yName = 'yval12';\n    china2.tooltipSettings.format = '${xval} : ${yval12}';\n    china2.dataSource = window.defaultSparkData;\n    china2.appendTo('#d-china');\n    var france2 = new ej.charts.Sparkline(sparkmodel2);\n    france2.dataSource = window.defaultSparkData;\n    france2.tooltipSettings.format = '${xval} : ${yval13}';\n    france2.yName = 'yval13';\n    france2.appendTo('#d-france');\n    var germany2 = new ej.charts.Sparkline(sparkmodel2);\n    germany2.dataSource = window.defaultSparkData;\n    germany2.tooltipSettings.format = '${xval} : ${yval14}';\n    germany2.yName = 'yval14';\n    germany2.appendTo('#d-germany');\n    var india2 = new ej.charts.Sparkline(sparkmodel2);\n    india2.dataSource = window.defaultSparkData;\n    india2.tooltipSettings.format = '${xval} : ${yval15}';\n    india2.yName = 'yval15';\n    india2.appendTo('#d-india');\n    var russia2 = new ej.charts.Sparkline(sparkmodel2);\n    russia2.dataSource = window.defaultSparkData;\n    russia2.tooltipSettings.format = '${xval} : ${yval16}';\n    russia2.yName = 'yval16';\n    russia2.appendTo('#d-russia');\n    var sweden2 = new ej.charts.Sparkline(sparkmodel2);\n    sweden2.dataSource = window.defaultSparkData;\n    sweden2.tooltipSettings.format = '${xval} : ${yval17}';\n    sweden2.yName = 'yval17';\n    sweden2.appendTo('#d-sweden');\n    var uk2 = new ej.charts.Sparkline(sparkmodel2);\n    uk2.yName = 'yval18';\n    uk2.tooltipSettings.format = '${xval} : ${yval18}';\n    uk2.dataSource = window.defaultSparkData;\n    uk2.appendTo('#d-uk');\n    var us2 = new ej.charts.Sparkline(sparkmodel2);\n    us2.yName = 'yval19';\n    us2.dataSource = window.defaultSparkData;\n    us2.tooltipSettings.format = '${xval} : ${yval19}';\n    us2.appendTo('#d-us');\n    var australia3 = new ej.charts.Sparkline(sparkmodel3);\n    australia3.yName = 'yval20';\n    australia3.tooltipSettings.format = '${xval} : ${yval20}';\n    australia3.dataSource = window.defaultSparkData;\n    australia3.appendTo('#g-australia');\n    var canada3 = new ej.charts.Sparkline(sparkmodel3);\n    canada3.yName = 'yval21';\n    canada3.tooltipSettings.format = '${xval} : ${yval21}';\n    canada3.dataSource = window.defaultSparkData;\n    canada3.appendTo('#g-canada');\n    var china3 = new ej.charts.Sparkline(sparkmodel3);\n    china3.yName = 'yval22';\n    china3.tooltipSettings.format = '${xval} : ${yval22}';\n    china3.dataSource = window.defaultSparkData;\n    china3.appendTo('#g-china');\n    var france3 = new ej.charts.Sparkline(sparkmodel3);\n    france3.yName = 'yval23';\n    france3.tooltipSettings.format = '${xval} : ${yval23}';\n    france3.dataSource = window.defaultSparkData;\n    france3.appendTo('#g-france');\n    var germany3 = new ej.charts.Sparkline(sparkmodel3);\n    germany3.yName = 'yval24';\n    germany3.tooltipSettings.format = '${xval} : ${yval24}';\n    germany3.dataSource = window.defaultSparkData;\n    germany3.appendTo('#g-germany');\n    var india3 = new ej.charts.Sparkline(sparkmodel3);\n    india3.yName = 'yval25';\n    india3.tooltipSettings.format = '${xval} : ${yval25}';\n    india3.dataSource = window.defaultSparkData;\n    india3.appendTo('#g-india');\n    var russia3 = new ej.charts.Sparkline(sparkmodel3);\n    russia3.yName = 'yval26';\n    russia3.tooltipSettings.format = '${xval} : ${yval26}';\n    russia3.dataSource = window.defaultSparkData;\n    russia3.appendTo('#g-russia');\n    var sweden3 = new ej.charts.Sparkline(sparkmodel3);\n    sweden3.yName = 'yval27';\n    sweden3.tooltipSettings.format = '${xval} : ${yval27}';\n    sweden3.dataSource = window.defaultSparkData;\n    sweden3.appendTo('#g-sweden');\n    var uk3 = new ej.charts.Sparkline(sparkmodel3);\n    uk3.yName = 'yval28';\n    uk3.tooltipSettings.format = '${xval} : ${yval28}';\n    uk3.dataSource = window.defaultSparkData;\n    uk3.appendTo('#g-uk');\n    var us3 = new ej.charts.Sparkline(sparkmodel3);\n    us3.tooltipSettings.format = '${xval} : ${yval29}';\n    us3.yName = 'yval29';\n    us3.dataSource = window.defaultSparkData;\n    us3.appendTo('#g-us');\n    var australia4 = new ej.charts.Sparkline(sparkmodel4);\n    australia4.dataSource = window.defaultSparkData;\n    australia4.yName = 'yval30';\n    australia4.tooltipSettings.format = '${xval} : ${yval30}';\n    australia4.axisSettings.minY = 12;\n    australia4.appendTo('#b-australia');\n    var canada4 = new ej.charts.Sparkline(sparkmodel4);\n    canada4.dataSource = window.defaultSparkData;\n    canada4.axisSettings.minY = 10.20;\n    canada4.tooltipSettings.format = '${xval} : ${yval31}';\n    canada4.yName = 'yval31';\n    canada4.appendTo('#b-canada');\n    var china4 = new ej.charts.Sparkline(sparkmodel4);\n    china4.dataSource = window.defaultSparkData;\n    china4.tooltipSettings.format = '${xval} : ${yval32}';\n    china4.yName = 'yval32';\n    china4.axisSettings.minY = 12;\n    china4.appendTo('#b-china');\n    var france4 = new ej.charts.Sparkline(sparkmodel4);\n    france4.dataSource = window.defaultSparkData;\n    france4.tooltipSettings.format = '${xval} : ${yval33}';\n    france4.yName = 'yval33';\n    france4.axisSettings.minY = 11.5;\n    france4.appendTo('#b-france');\n    var germany4 = new ej.charts.Sparkline(sparkmodel4);\n    germany4.dataSource = window.defaultSparkData;\n    germany4.axisSettings.minY = 8;\n    germany4.tooltipSettings.format = '${xval} : ${yval34}';\n    germany4.yName = 'yval34';\n    germany4.appendTo('#b-germany');\n    var india4 = new ej.charts.Sparkline(sparkmodel4);\n    india4.dataSource = window.defaultSparkData;\n    india4.axisSettings.minY = 19;\n    india4.tooltipSettings.format = '${xval} : ${yval35}';\n    india4.yName = 'yval35';\n    india4.appendTo('#b-india');\n    var russia4 = new ej.charts.Sparkline(sparkmodel4);\n    russia4.dataSource = window.defaultSparkData;\n    russia4.axisSettings.minY = 9.5;\n    russia4.yName = 'yval36';\n    russia4.tooltipSettings.format = '${xval} : ${yval36}';\n    russia4.appendTo('#b-russia');\n    var sweden4 = new ej.charts.Sparkline(sparkmodel4);\n    sweden4.dataSource = window.defaultSparkData;\n    sweden4.axisSettings.minY = 10;\n    sweden4.tooltipSettings.format = '${xval} : ${yval37}';\n    sweden4.yName = 'yval37';\n    sweden4.appendTo('#b-sweden');\n    var uk4 = new ej.charts.Sparkline(sparkmodel4);\n    uk4.dataSource = window.defaultSparkData;\n    uk4.axisSettings.minY = 10;\n    uk4.tooltipSettings.format = '${xval} : ${yval38}';\n    uk4.yName = 'yval38';\n    uk4.appendTo('#b-uk');\n    var us4 = new ej.charts.Sparkline(sparkmodel4);\n    us4.dataSource = window.defaultSparkData;\n    us4.axisSettings.minY = 13;\n    us4.tooltipSettings.format = '${xval} : ${yval39}';\n    us4.yName = 'yval39';\n    us4.appendTo('#b-us');\n"}