Show "no data" warning on a chart
This demo shows how we can use chart series’ davalidated event to display a “no data” message in a modal if data contains no items.
/** * --------------------------------------- * This demo was created using amCharts 5. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v5/ * --------------------------------------- */
// Create root and chartvar root = am5.Root.new("chartdiv");
root.setThemes([am5themes_Animated.new(root)]);
var chart = root.container.children.push( am5percent.PieChart.new(root, { layout: root.verticalLayout }));
// Create seriesvar series = chart.series.push( am5percent.PieSeries.new(root, { name: "Series", valueField: "sales", categoryField: "country" }));
// Create modal for a "no data" notevar modal = am5.Modal.new(root, { content: "The chart has no data"});
series.events.on("datavalidated", function (ev) { var series = ev.target; if (ev.target.data.length < 1) { // Generate placeholder data var categoryField = series.get("categoryField"); var valueField = series.get("valueField"); var placeholder = []; for (i = 0; i < 3; i++) { var item = {}; item[categoryField] = ""; item[valueField] = 1; placeholder.push(item); } series.data.setAll(placeholder);
// Disable ticks/labels series.labels.template.set("forceHidden", true); series.ticks.template.set("forceHidden", true);
// Show modal modal.open(); } else { // Re-enable ticks/labels series.labels.template.set("forceHidden", false); series.ticks.template.set("forceHidden", false);
// Hide modal modal.close(); }});
setEmpty();
// Add legendvar legend = chart.children.push( am5.Legend.new(root, { centerX: am5.percent(50), x: am5.percent(50), layout: root.horizontalLayout }));
legend.data.setAll(series.dataItems);
function setEmpty() { series.data.setAll([]);}
function setRegular() { series.data.setAll([ { country: "France", sales: 100000 }, { country: "Spain", sales: 160000 }, { country: "United Kingdom", sales: 80000 } ]);}<input type="button" value="Set empty data" onclick="setEmpty()" /><input type="button" value="Set regular data" onclick="setRegular()" /><div id="chartdiv"></div>body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
#chartdiv { width: 100%; height: 500px;}{ "type": "PieChart", "settings": { "layout": { "type": "VerticalLayout" } }, "properties": { "series": [ "#series-0" ] }, "children": [ { "type": "Legend", "settings": { "centerX": { "type": "Percent", "value": 50 }, "x": { "type": "Percent", "value": 50 }, "layout": { "type": "HorizontalLayout" } }, "properties": { "data": [] } } ], "refs": [ { "data-0": [ { "country": "", "sales": 1 }, { "country": "", "sales": 1 }, { "country": "", "sales": 1 } ] }, { "series-0": { "type": "PieSeries", "settings": { "name": "Series", "valueField": "sales", "categoryField": "country" }, "properties": { "data": "#data-0", "labels": { "properties": { "template": { "settings": { "forceHidden": true } } } }, "ticks": { "properties": { "template": { "settings": { "forceHidden": true } } } } } } } ]}show-no-data-warning-on-a-piechart