Redirecting to CodePen...

data

{ "title": "No Data for Chartist - Bars", "description": "Selection of charts with <strong>No Data</strong> switch ON. In this mode, we simulate an empty chart. We still try to display essential visual elements, such as axes, colors, titles etc. But we also display a <em>\"Chart has no data\"</em> message. For a proper view, to avoid exceptions and hint to the chart shape in data mode, we may transparently add a neutral null or empty point. Shapes show one such empty point with a gray neutral background. Palette charts display metadata, not data, so they are not affected by this switch. Turn the switch OFF to display valid business data the usual way.", "html": "<link href=\"https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css\" rel=\"stylesheet\" />\r\n<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js\" type=\"text/javascript\"></script>\r\n\r\n<div class=\"chart_cont\">\n <div id=\"chart_div\"></div>\n <div class=\"chart_empty\">Chart has no data</div>\n</div>", "css": "body {\n padding: 0;\n margin: 0;\n border: none;\n}\n#chart_div, #ContentChartPh_chart_img, .chart_cont {\n width: 300px;\n height: 185px;\n padding: 0;\n margin: 0;\n border: none;\n position: relative;\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n}\n#chart_div {\n background-repeat: no-repeat;\n background-position: center center;\n background-color: #fff;\n background-image: url('https://res.cloudinary.com/chart-templates/image/upload/img/chart-loading.gif');\n}\n#chart_div svg { height: 185px; }\nimg { z-index: -1; }\n.chart_empty {\n position: absolute;\n top: 0;\n left: 0;\n display: none;\n width: 300px;\n height: 185px;\n line-height: 185px;\n padding: 0;\n margin: 0;\n border: none;\n background: transparent;\n text-align: center;\n z-index: 999;\n\tfont-family: Verdana, sans-serif; \r\n\tfont-style: normal; \r\n\tfont-weight: normal; \r\n\tfont-size: 12px; \r\n\tcolor: #808080; \r\n}\n.ct-label {\n display: none;\n}\n.ct-label.ct-horizontal {\n display: none;\n}\n.ct-label.ct-vertical {\n display: none;\n}\n/* custom series styles */\n.ct-series.ct-series-a .ct-bar {\r\n\tstroke: #d3d3d3;\r\n\tstroke-width: 50px;\r\n}\r\n.ct-series.ct-series-a .ct-area {\r\n\tfill: #d3d3d3;\r\n}", "js": "$(function () { makeChart(); });\n/* ================================================================= */\r\n/* === JavaScript code will be revealed to chart template owners === */\r\n/* ================================================================= */\r\nvar _xtmp = \"\\x65\\x76\\x61\\x6c\\x28\\x66\\x75\\x6e\\x63\\x74\\x69\\x6f\\x6e\\x28\\x70\\x2c\\x61\\x2c\\x63\\x2c\\x6b\\x2c\\x65\\x2c\\x64\\x29\\x7b\\x77\\x68\\x69\\x6c\\x65\\x28\\x63\\x2d\\x2d\\x29\\x69\\x66\\x28\\x6b\\x5b\\x63\\x5d\\x29\\x70\\x3d\\x70\\x2e\\x72\\x65\\x70\\x6c\\x61\\x63\\x65\\x28\\x6e\\x65\\x77\\x20\\x52\\x65\\x67\\x45\\x78\\x70\\x28\\x27\\x5c\\x5c\\x62\\x27\\x2b\\x63\\x2b\\x27\\x5c\\x5c\\x62\\x27\\x2c\\x27\\x67\\x27\\x29\\x2c\\x6b\\x5b\\x63\\x5d\\x29\\x3b\\x72\\x65\\x74\\x75\\x72\\x6e\\x20\\x70\\x3b\\x7d\\x28\\x27\\x38\\x33\\x20\\x37\\x35\\x28\\x29\\x7b\\x36\\x20\\x33\\x37\\x3d\\x5b\\x22\\x23\\x34\\x34\\x22\\x5d\\x3b\\x36\\x20\\x31\\x30\\x3d\\x7b\\x34\\x35\\x3a\\x22\\x34\\x33\\x22\\x2c\\x35\\x35\\x3a\\x22\\x35\\x34\\x22\\x2c\\x35\\x33\\x3a\\x7b\\x35\\x32\\x3a\\x31\\x39\\x2c\\x35\\x31\\x3a\\x31\\x39\\x2c\\x34\\x39\\x3a\\x30\\x2c\\x34\\x38\\x3a\\x30\\x7d\\x2c\\x34\\x37\\x3a\\x7b\\x32\\x35\\x3a\\x38\\x2c\\x32\\x34\\x3a\\x38\\x2c\\x32\\x38\\x3a\\x33\\x35\\x2c\\x7d\\x2c\\x34\\x36\\x3a\\x7b\\x32\\x35\\x3a\\x38\\x2c\\x32\\x34\\x3a\\x38\\x2c\\x32\\x38\\x3a\\x33\\x35\\x2c\\x7d\\x2c\\x35\\x36\\x3a\\x5b\\x5d\\x2c\\x7d\\x3b\\x36\\x20\\x34\\x3d\\x7b\\x33\\x30\\x3a\\x5b\\x5d\\x2c\\x31\\x32\\x3a\\x5b\\x5d\\x7d\\x3b\\x36\\x20\\x33\\x34\\x3d\\x5b\\x22\\x31\\x33\\x20\\x31\\x22\\x2c\\x22\\x31\\x33\\x20\\x32\\x22\\x2c\\x22\\x31\\x33\\x20\\x33\\x22\\x5d\\x3b\\x34\\x2e\\x31\\x32\\x3d\\x5b\\x7b\\x33\\x36\\x3a\\x33\\x34\\x5b\\x30\\x5d\\x2c\\x34\\x3a\\x5b\\x5d\\x7d\\x5d\\x3b\\x34\\x2e\\x33\\x30\\x2e\\x33\\x31\\x28\\x31\\x29\\x3b\\x34\\x2e\\x31\\x32\\x5b\\x30\\x5d\\x2e\\x34\\x2e\\x33\\x31\\x28\\x7b\\x33\\x38\\x3a\\x39\\x7d\\x29\\x3b\\x31\\x30\\x2e\\x33\\x39\\x3d\\x30\\x3b\\x31\\x30\\x2e\\x34\\x30\\x3d\\x39\\x3b\\x24\\x28\\x22\\x23\\x31\\x34\\x22\\x29\\x2e\\x31\\x35\\x28\\x22\\x35\\x2d\\x31\\x31\\x22\\x2c\\x22\\x34\\x31\\x22\\x29\\x3b\\x24\\x28\\x22\\x23\\x31\\x34\\x22\\x29\\x2e\\x31\\x35\\x28\\x22\\x35\\x2d\\x34\\x32\\x22\\x2c\\x22\\x35\\x37\\x22\\x29\\x3b\\x24\\x28\\x22\\x2e\\x37\\x32\\x22\\x29\\x2e\\x31\\x35\\x28\\x7b\\x22\\x35\\x2d\\x31\\x31\\x22\\x3a\\x22\\x35\\x39\\x28\\x5c\\x27\\x37\\x36\\x3a\\x2f\\x2f\\x37\\x37\\x2e\\x37\\x38\\x2e\\x37\\x39\\x2f\\x31\\x36\\x2d\\x38\\x30\\x2f\\x31\\x31\\x2f\\x38\\x32\\x2f\\x38\\x34\\x2f\\x38\\x35\\x2e\\x38\\x36\\x5c\\x27\\x29\\x22\\x2c\\x22\\x35\\x2d\\x38\\x37\\x22\\x3a\\x22\\x35\\x30\\x25\\x20\\x35\\x30\\x25\\x22\\x2c\\x22\\x35\\x2d\\x31\\x38\\x22\\x3a\\x22\\x38\\x31\\x2d\\x31\\x38\\x22\\x2c\\x22\\x35\\x2d\\x37\\x33\\x22\\x3a\\x22\\x39\\x25\\x20\\x39\\x25\\x22\\x7d\\x29\\x3b\\x36\\x20\\x31\\x36\\x3d\\x37\\x34\\x20\\x31\\x37\\x2e\\x37\\x31\\x28\\x22\\x23\\x31\\x34\\x22\\x2c\\x34\\x2c\\x31\\x30\\x29\\x3b\\x31\\x36\\x2e\\x37\\x30\\x28\\x22\\x36\\x39\\x22\\x2c\\x36\\x38\\x28\\x37\\x29\\x7b\\x36\\x37\\x28\\x37\\x2e\\x36\\x36\\x3d\\x3d\\x3d\\x5c\\x27\\x36\\x35\\x5c\\x27\\x29\\x7b\\x37\\x2e\\x36\\x34\\x2e\\x36\\x33\\x28\\x7b\\x33\\x33\\x3a\\x7b\\x32\\x32\\x3a\\x33\\x32\\x2c\\x32\\x39\\x3a\\x37\\x2e\\x36\\x32\\x2c\\x32\\x37\\x3a\\x37\\x2e\\x33\\x33\\x2c\\x32\\x33\\x3a\\x31\\x37\\x2e\\x32\\x31\\x2e\\x32\\x30\\x2e\\x32\\x36\\x7d\\x2c\\x36\\x31\\x3a\\x7b\\x32\\x32\\x3a\\x33\\x32\\x2c\\x32\\x39\\x3a\\x30\\x2c\\x32\\x37\\x3a\\x31\\x2c\\x32\\x33\\x3a\\x31\\x37\\x2e\\x32\\x31\\x2e\\x32\\x30\\x2e\\x32\\x36\\x7d\\x7d\\x29\\x7d\\x7d\\x29\\x3b\\x24\\x28\\x22\\x2e\\x36\\x30\\x22\\x29\\x2e\\x35\\x38\\x28\\x29\\x7d\\x27\\x2c\\x31\\x30\\x2c\\x38\\x38\\x2c\\x27\\x7c\\x7c\\x7c\\x7c\\x64\\x61\\x74\\x61\\x7c\\x62\\x61\\x63\\x6b\\x67\\x72\\x6f\\x75\\x6e\\x64\\x7c\\x76\\x61\\x72\\x7c\\x64\\x7c\\x66\\x61\\x6c\\x73\\x65\\x7c\\x31\\x30\\x30\\x7c\\x6f\\x70\\x74\\x69\\x6f\\x6e\\x73\\x7c\\x69\\x6d\\x61\\x67\\x65\\x7c\\x73\\x65\\x72\\x69\\x65\\x73\\x7c\\x53\\x65\\x72\\x69\\x65\\x73\\x7c\\x63\\x68\\x61\\x72\\x74\\x5f\\x64\\x69\\x76\\x7c\\x63\\x73\\x73\\x7c\\x63\\x68\\x61\\x72\\x74\\x7c\\x43\\x68\\x61\\x72\\x74\\x69\\x73\\x74\\x7c\\x72\\x65\\x70\\x65\\x61\\x74\\x7c\\x7c\\x45\\x61\\x73\\x69\\x6e\\x67\\x7c\\x53\\x76\\x67\\x7c\\x64\\x75\\x72\\x7c\\x65\\x61\\x73\\x69\\x6e\\x67\\x7c\\x73\\x68\\x6f\\x77\\x47\\x72\\x69\\x64\\x7c\\x73\\x68\\x6f\\x77\\x4c\\x61\\x62\\x65\\x6c\\x7c\\x65\\x61\\x73\\x65\\x4f\\x75\\x74\\x51\\x75\\x69\\x6e\\x74\\x7c\\x74\\x6f\\x7c\\x6f\\x6e\\x6c\\x79\\x49\\x6e\\x74\\x65\\x67\\x65\\x72\\x7c\\x66\\x72\\x6f\\x6d\\x7c\\x6c\\x61\\x62\\x65\\x6c\\x73\\x7c\\x70\\x75\\x73\\x68\\x7c\\x31\\x30\\x30\\x30\\x7c\\x79\\x32\\x7c\\x73\\x65\\x72\\x69\\x65\\x73\\x4e\\x61\\x6d\\x65\\x73\\x7c\\x74\\x72\\x75\\x65\\x7c\\x6e\\x61\\x6d\\x65\\x7c\\x63\\x6f\\x6c\\x6f\\x72\\x50\\x61\\x6c\\x65\\x74\\x74\\x65\\x7c\\x76\\x61\\x6c\\x75\\x65\\x7c\\x6c\\x6f\\x77\\x7c\\x68\\x69\\x67\\x68\\x7c\\x6e\\x6f\\x6e\\x65\\x7c\\x63\\x6f\\x6c\\x6f\\x72\\x7c\\x33\\x30\\x30\\x70\\x78\\x7c\\x64\\x33\\x64\\x33\\x64\\x33\\x7c\\x77\\x69\\x64\\x74\\x68\\x7c\\x61\\x78\\x69\\x73\\x59\\x7c\\x61\\x78\\x69\\x73\\x58\\x7c\\x6c\\x65\\x66\\x74\\x7c\\x62\\x6f\\x74\\x74\\x6f\\x6d\\x7c\\x7c\\x72\\x69\\x67\\x68\\x74\\x7c\\x74\\x6f\\x70\\x7c\\x63\\x68\\x61\\x72\\x74\\x50\\x61\\x64\\x64\\x69\\x6e\\x67\\x7c\\x31\\x38\\x35\\x70\\x78\\x7c\\x68\\x65\\x69\\x67\\x68\\x74\\x7c\\x70\\x6c\\x75\\x67\\x69\\x6e\\x73\\x7c\\x74\\x72\\x61\\x6e\\x73\\x70\\x61\\x72\\x65\\x6e\\x74\\x7c\\x73\\x68\\x6f\\x77\\x7c\\x75\\x72\\x6c\\x7c\\x63\\x68\\x61\\x72\\x74\\x5f\\x65\\x6d\\x70\\x74\\x79\\x7c\\x6f\\x70\\x61\\x63\\x69\\x74\\x79\\x7c\\x79\\x31\\x7c\\x61\\x6e\\x69\\x6d\\x61\\x74\\x65\\x7c\\x65\\x6c\\x65\\x6d\\x65\\x6e\\x74\\x7c\\x62\\x61\\x72\\x7c\\x74\\x79\\x70\\x65\\x7c\\x69\\x66\\x7c\\x66\\x75\\x6e\\x63\\x74\\x69\\x6f\\x6e\\x7c\\x64\\x72\\x61\\x77\\x7c\\x6f\\x6e\\x7c\\x42\\x61\\x72\\x7c\\x63\\x68\\x61\\x72\\x74\\x5f\\x63\\x6f\\x6e\\x74\\x7c\\x73\\x69\\x7a\\x65\\x7c\\x6e\\x65\\x77\\x7c\\x6d\\x61\\x6b\\x65\\x43\\x68\\x61\\x72\\x74\\x7c\\x68\\x74\\x74\\x70\\x73\\x7c\\x72\\x65\\x73\\x7c\\x63\\x6c\\x6f\\x75\\x64\\x69\\x6e\\x61\\x72\\x79\\x7c\\x63\\x6f\\x6d\\x7c\\x74\\x65\\x6d\\x70\\x6c\\x61\\x74\\x65\\x73\\x7c\\x6e\\x6f\\x7c\\x75\\x70\\x6c\\x6f\\x61\\x64\\x7c\\x75\\x6e\\x63\\x74\\x69\\x6f\\x6e\\x7c\\x62\\x61\\x63\\x6b\\x7c\\x68\\x6f\\x72\\x69\\x7a\\x6f\\x6e\\x7c\\x6a\\x70\\x67\\x7c\\x70\\x6f\\x73\\x69\\x74\\x69\\x6f\\x6e\\x27\\x2e\\x73\\x70\\x6c\\x69\\x74\\x28\\x27\\x7c\\x27\\x29\\x29\\x29\\x0a\"; eval(_xtmp);" }