axis-types-stack.json

{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/sparkline/axis-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 class=\"control-section\">\n        <div id=\"spark-container\" class=\"row\">\n            <div class=\"cols-sample-area\" align=\"center\">\n                <table style=\"width:80%;\">\n                    <tbody><tr>\n                        <td align=\"center\">\n                            <div>Mean working hours for a month</div>\n                            <div><i>(DateTime axis)</i></div>\n                        </td>\n                        <td style=\"padding: 10px;\" align=\"center\">\n                            <div id=\"datetime\" style=\"width:170px; height:100px\"></div>\n                        </td>\n                    </tr>\n                    <tr>\n                        <td align=\"center\">\n                            <div>Percentage of the students in a class</div>\n                            <div><i>(Category axis)</i></div>\n                        </td>\n                        <td style=\"padding: 10px;\" align=\"center\">\n                            <div id=\"category\" style=\"width:170px; height:100px\"></div>\n                        </td>\n                    </tr>\n                    <tr>\n                        <td align=\"center\">\n                            <div>Expenditure details of various trips</div>\n                            <div><i>(Numeric axis)</i></div>\n                            </td>\n                        <td style=\"padding: 10px;\" align=\"center\">\n                            <div id=\"numeric\" style=\"width:170px; height:100px\"></div>\n                        </td>\n                    </tr>\n                </tbody></table>\n            </div>\n        </div>\n    </div>\n\n    \n    <style>\n        td{\n            font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\n            font-size: 14px;\n            font-weight: 500;\n        }\n    </style></div></body></html>","index.js":"{{ripple}}\n\n    var model = {\n        load: sparkload,\n        height: '100px',\n        width: '170px',\n        lineWidth: 1,\n        type: 'Column',\n        fill: '#3C78EF',\n        tooltipSettings: {\n            visible: true\n        },\n        yName: 'yval'\n    };\n    var datetime = new ej.charts.Sparkline(model);\n    datetime.valueType = 'DateTime';\n    datetime.dataSource = [\n        { xDate: new Date(2018, 0, 1), x: 0, yval: 4 },\n        { xDate: new Date(2018, 0, 2), x: 1, yval: 4.5 },\n        { xDate: new Date(2018, 0, 3), x: 2, yval: 8 },\n        { xDate: new Date(2018, 0, 4), x: 3, yval: 7 },\n        { xDate: new Date(2018, 0, 5), x: 4, yval: 6 },\n        { xDate: new Date(2018, 0, 8), x: 5, yval: 8 },\n        { xDate: new Date(2018, 0, 9), x: 6, yval: 8 },\n        { xDate: new Date(2018, 0, 10), x: 7, yval: 6.5 },\n        { xDate: new Date(2018, 0, 11), x: 8, yval: 4 },\n        { xDate: new Date(2018, 0, 12), x: 9, yval: 5.5 },\n        { xDate: new Date(2018, 0, 15), x: 10, yval: 8 },\n        { xDate: new Date(2018, 0, 16), x: 11, yval: 6 },\n        { xDate: new Date(2018, 0, 17), x: 12, yval: 6.5 },\n        { xDate: new Date(2018, 0, 18), x: 13, yval: 7.5 },\n        { xDate: new Date(2018, 0, 19), x: 14, yval: 7.5 },\n        { xDate: new Date(2018, 0, 22), x: 15, yval: 4 },\n        { xDate: new Date(2018, 0, 23), x: 16, yval: 8 },\n        { xDate: new Date(2018, 0, 24), x: 17, yval: 6 },\n        { xDate: new Date(2018, 0, 25), x: 18, yval: 7.5 },\n        { xDate: new Date(2018, 0, 26), x: 19, yval: 4.5 },\n        { xDate: new Date(2018, 0, 29), x: 20, yval: 6 },\n        { xDate: new Date(2018, 0, 30), x: 21, yval: 5 },\n        { xDate: new Date(2018, 0, 31), x: 22, yval: 7 }\n    ];\n    datetime.tooltipSettings.format = '${xDate} : ${yval}hrs';\n    datetime.xName = 'xDate';\n    datetime.appendTo('#datetime');\n    var category = new ej.charts.Sparkline(model);\n    category.valueType = 'Category';\n    category.dataSource = [\n        { x: 0, xval: 'Robert', yval: 60 },\n        { x: 1, xval: 'Andrew', yval: 65 },\n        { x: 2, xval: 'Suyama', yval: 70 },\n        { x: 3, xval: 'Michael', yval: 80 },\n        { x: 4, xval: 'Janet', yval: 55 },\n        { x: 5, xval: 'Davolio', yval: 90 },\n        { x: 6, xval: 'Fuller', yval: 75 },\n        { x: 7, xval: 'Nancy', yval: 85 },\n        { x: 8, xval: 'Margaret', yval: 77 },\n        { x: 9, xval: 'Steven', yval: 68 },\n        { x: 10, xval: 'Laura', yval: 96 },\n        { x: 11, xval: 'Elizabeth', yval: 57 }\n    ];\n    category.tooltipSettings.format = '${xval} : ${yval}%';\n    category.xName = 'xval';\n    category.appendTo('#category');\n    var numeric = new ej.charts.Sparkline(model);\n    numeric.dataSource = [\n        { x: 1, xval: 2010, yval: 190 },\n        { x: 2, xval: 2011, yval: 165 },\n        { x: 3, xval: 2012, yval: 158 },\n        { x: 4, xval: 2013, yval: 175 },\n        { x: 5, xval: 2014, yval: 200 },\n        { x: 6, xval: 2015, yval: 180 },\n        { x: 7, xval: 2016, yval: 210 }\n    ];\n    numeric.valueType = 'Numeric';\n    numeric.tooltipSettings.format = '${x} : $${yval}';\n    numeric.xName = 'x';\n    numeric.appendTo('#numeric');\n"}