Redirecting to jsFiddle...
description
Selection of charts with
No Data
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
"Chart has no data"
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
Chart has no data
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