Redirecting to jsFiddle...

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.
wrap	b
title	No Data for Chartist - Bars
html	<link href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script> <script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js" type="text/javascript"></script> <div class="chart_cont"> <div id="chart_div"></div> <div class="chart_empty">Chart has no data</div> </div>
js	$(function () { makeChart(); }); /* ================================================================= */ /* === JavaScript code will be revealed to chart template owners === */ /* ================================================================= */ var _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\x34\x20\x37\x36\x28\x29\x7b\x38\x20\x35\x36\x3d\x5b\x22\x23\x35\x35\x22\x5d\x3b\x38\x20\x36\x3d\x7b\x35\x34\x3a\x22\x35\x33\x22\x2c\x35\x32\x3a\x22\x35\x31\x22\x2c\x34\x39\x3a\x7b\x34\x38\x3a\x31\x39\x2c\x34\x37\x3a\x31\x39\x2c\x34\x36\x3a\x30\x2c\x34\x35\x3a\x30\x7d\x2c\x34\x34\x3a\x7b\x32\x32\x3a\x39\x2c\x32\x30\x3a\x39\x2c\x33\x35\x3a\x31\x31\x2c\x7d\x2c\x34\x33\x3a\x7b\x32\x32\x3a\x39\x2c\x32\x30\x3a\x39\x2c\x33\x35\x3a\x31\x31\x2c\x7d\x2c\x34\x31\x3a\x5b\x5d\x2c\x7d\x3b\x38\x20\x34\x3d\x7b\x32\x33\x3a\x5b\x5d\x2c\x31\x34\x3a\x5b\x5d\x7d\x3b\x38\x20\x32\x31\x3d\x5b\x22\x31\x32\x20\x31\x22\x2c\x22\x31\x32\x20\x32\x22\x2c\x22\x31\x32\x20\x33\x22\x5d\x3b\x36\x2e\x33\x38\x3d\x31\x31\x3b\x34\x2e\x31\x34\x3d\x5b\x7b\x34\x30\x3a\x32\x31\x5b\x30\x5d\x2c\x34\x3a\x5b\x5d\x7d\x5d\x3b\x34\x2e\x32\x33\x2e\x32\x34\x28\x31\x29\x3b\x34\x2e\x31\x34\x5b\x30\x5d\x2e\x34\x2e\x32\x34\x28\x7b\x33\x39\x3a\x31\x30\x7d\x29\x3b\x36\x2e\x33\x36\x3d\x30\x3b\x36\x2e\x33\x37\x3d\x31\x30\x3b\x24\x28\x22\x23\x31\x38\x22\x29\x2e\x31\x37\x28\x22\x35\x2d\x31\x35\x22\x2c\x22\x35\x37\x22\x29\x3b\x24\x28\x22\x23\x31\x38\x22\x29\x2e\x31\x37\x28\x22\x35\x2d\x35\x38\x22\x2c\x22\x37\x33\x22\x29\x3b\x24\x28\x22\x2e\x36\x30\x22\x29\x2e\x31\x37\x28\x7b\x22\x35\x2d\x31\x35\x22\x3a\x22\x37\x37\x28\x5c\x27\x37\x38\x3a\x2f\x2f\x37\x39\x2e\x38\x30\x2e\x38\x31\x2f\x31\x33\x2d\x35\x39\x2f\x31\x35\x2f\x38\x33\x2f\x38\x35\x2f\x38\x36\x2e\x38\x37\x5c\x27\x29\x22\x2c\x22\x35\x2d\x38\x38\x22\x3a\x22\x35\x30\x25\x20\x35\x30\x25\x22\x2c\x22\x35\x2d\x33\x30\x22\x3a\x22\x38\x32\x2d\x33\x30\x22\x2c\x22\x35\x2d\x37\x34\x22\x3a\x22\x31\x30\x25\x20\x31\x30\x25\x22\x7d\x29\x3b\x38\x20\x31\x33\x3d\x37\x35\x20\x31\x36\x2e\x37\x32\x28\x22\x23\x31\x38\x22\x2c\x34\x2c\x36\x29\x3b\x31\x33\x2e\x37\x31\x28\x22\x37\x30\x22\x2c\x36\x39\x28\x37\x29\x7b\x36\x38\x28\x37\x2e\x36\x37\x3d\x3d\x3d\x5c\x27\x36\x36\x5c\x27\x29\x7b\x37\x2e\x36\x35\x2e\x36\x34\x28\x7b\x33\x34\x3a\x7b\x33\x33\x3a\x33\x32\x2c\x33\x31\x3a\x37\x2e\x36\x33\x2c\x32\x39\x3a\x37\x2e\x33\x34\x2c\x32\x38\x3a\x31\x36\x2e\x32\x37\x2e\x32\x36\x2e\x32\x35\x7d\x2c\x36\x32\x3a\x7b\x33\x33\x3a\x33\x32\x2c\x33\x31\x3a\x30\x2c\x32\x39\x3a\x31\x2c\x32\x38\x3a\x31\x36\x2e\x32\x37\x2e\x32\x36\x2e\x32\x35\x7d\x7d\x29\x7d\x7d\x29\x3b\x24\x28\x22\x2e\x36\x31\x22\x29\x2e\x34\x32\x28\x29\x7d\x27\x2c\x31\x30\x2c\x38\x39\x2c\x27\x7c\x7c\x7c\x7c\x64\x61\x74\x61\x7c\x62\x61\x63\x6b\x67\x72\x6f\x75\x6e\x64\x7c\x6f\x70\x74\x69\x6f\x6e\x73\x7c\x64\x7c\x76\x61\x72\x7c\x66\x61\x6c\x73\x65\x7c\x31\x30\x30\x7c\x74\x72\x75\x65\x7c\x53\x65\x72\x69\x65\x73\x7c\x63\x68\x61\x72\x74\x7c\x73\x65\x72\x69\x65\x73\x7c\x69\x6d\x61\x67\x65\x7c\x43\x68\x61\x72\x74\x69\x73\x74\x7c\x63\x73\x73\x7c\x63\x68\x61\x72\x74\x5f\x64\x69\x76\x7c\x7c\x73\x68\x6f\x77\x47\x72\x69\x64\x7c\x73\x65\x72\x69\x65\x73\x4e\x61\x6d\x65\x73\x7c\x73\x68\x6f\x77\x4c\x61\x62\x65\x6c\x7c\x6c\x61\x62\x65\x6c\x73\x7c\x70\x75\x73\x68\x7c\x65\x61\x73\x65\x4f\x75\x74\x51\x75\x69\x6e\x74\x7c\x45\x61\x73\x69\x6e\x67\x7c\x53\x76\x67\x7c\x65\x61\x73\x69\x6e\x67\x7c\x74\x6f\x7c\x72\x65\x70\x65\x61\x74\x7c\x66\x72\x6f\x6d\x7c\x31\x30\x30\x30\x7c\x64\x75\x72\x7c\x78\x32\x7c\x6f\x6e\x6c\x79\x49\x6e\x74\x65\x67\x65\x72\x7c\x6c\x6f\x77\x7c\x68\x69\x67\x68\x7c\x68\x6f\x72\x69\x7a\x6f\x6e\x74\x61\x6c\x42\x61\x72\x73\x7c\x76\x61\x6c\x75\x65\x7c\x6e\x61\x6d\x65\x7c\x70\x6c\x75\x67\x69\x6e\x73\x7c\x73\x68\x6f\x77\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\x72\x69\x67\x68\x74\x7c\x74\x6f\x70\x7c\x63\x68\x61\x72\x74\x50\x61\x64\x64\x69\x6e\x67\x7c\x7c\x31\x38\x35\x70\x78\x7c\x68\x65\x69\x67\x68\x74\x7c\x33\x30\x30\x70\x78\x7c\x77\x69\x64\x74\x68\x7c\x64\x33\x64\x33\x64\x33\x7c\x63\x6f\x6c\x6f\x72\x50\x61\x6c\x65\x74\x74\x65\x7c\x6e\x6f\x6e\x65\x7c\x63\x6f\x6c\x6f\x72\x7c\x74\x65\x6d\x70\x6c\x61\x74\x65\x73\x7c\x63\x68\x61\x72\x74\x5f\x63\x6f\x6e\x74\x7c\x63\x68\x61\x72\x74\x5f\x65\x6d\x70\x74\x79\x7c\x6f\x70\x61\x63\x69\x74\x79\x7c\x78\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\x74\x72\x61\x6e\x73\x70\x61\x72\x65\x6e\x74\x7c\x73\x69\x7a\x65\x7c\x6e\x65\x77\x7c\x6d\x61\x6b\x65\x43\x68\x61\x72\x74\x7c\x75\x72\x6c\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\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);
css	body { padding: 0; margin: 0; border: none; } #chart_div, #ContentChartPh_chart_img, .chart_cont { width: 300px; height: 185px; padding: 0; margin: 0; border: none; position: relative; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } #chart_div { background-repeat: no-repeat; background-position: center center; background-color: #fff; background-image: url('https://res.cloudinary.com/chart-templates/image/upload/img/chart-loading.gif'); } #chart_div svg { height: 185px; } img { z-index: -1; } .chart_empty { position: absolute; top: 0; left: 0; display: none; width: 300px; height: 185px; line-height: 185px; padding: 0; margin: 0; border: none; background: transparent; text-align: center; z-index: 999; font-family: Verdana, sans-serif; font-style: normal; font-weight: normal; font-size: 12px; color: #808080; } .ct-label { display: none; } .ct-label.ct-horizontal { display: none; } .ct-label.ct-vertical { display: none; } /* custom series styles */ .ct-series.ct-series-a .ct-bar { stroke: #d3d3d3; stroke-width: 25px; } .ct-series.ct-series-a .ct-area { fill: #d3d3d3; }
dtd	html 4