Clickable chart thumbnails
This demo shows how we can use a custom function to defer chart instantiation and replace them with a thumbnail, which once clicked would be automatically replaced with a real chart.
Open in:New tab
function createDeferredChart(div, callback) { var container = document.getElementById(div); container.style.position = "relative";
var note = document.createElement("div"); note.style.width = "100%"; note.style.height = "100%"; note.style.textAlign = "center"; note.style.cursor = "pointer"; note.innerHTML = "<br>Click to load chart"; note.onclick = function () { callback.call(this, div); }; container.appendChild(note);}
am4core.useTheme(am4themes_animated);
createDeferredChart("chart1", function (div) { var chart = am4core.create(div, am4charts.PieChart); chart.data = [ { country: "Lithuania", litres: 501.9 }, { country: "Czechia", litres: 301.9 }, { country: "Ireland", litres: 201.1 }, { country: "Germany", litres: 165.8 }, { country: "Australia", litres: 139.9 } ];
var pieSeries = chart.series.push(new am4charts.PieSeries()); pieSeries.dataFields.value = "litres"; pieSeries.dataFields.category = "country"; pieSeries.labels.template.disabled = true; pieSeries.ticks.template.disabled = true;});
createDeferredChart("chart2", function (div) { var chart = am4core.create(div, am4charts.XYChart); chart.data = [ { category: "Research", value: 450 }, { category: "Marketing", value: 1200 }, { category: "Distribution", value: 1850 } ];
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); categoryAxis.dataFields.category = "category"; categoryAxis.renderer.grid.template.location = 0; var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); var series = chart.series.push(new am4charts.ColumnSeries()); series.dataFields.valueY = "value"; series.dataFields.categoryX = "category";});
createDeferredChart("chart3", function (div) { var chart = am4core.create(div, am4charts.XYChart); chart.data = [ { category: "Jan", value: 500 }, { category: "Feb", value: 200 }, { category: "Mar", value: 350 }, { category: "Apr", value: 590 }, { category: "May", value: 400 } ];
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); categoryAxis.dataFields.category = "category"; categoryAxis.renderer.grid.template.location = 0; categoryAxis.renderer.minGridDistance = 50; var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); var series = chart.series.push(new am4charts.ColumnSeries()); series.dataFields.valueY = "value"; series.dataFields.categoryX = "category";});
createDeferredChart("chart4", function (div) { var chart = am4core.create(div, am4charts.PieChart); chart.data = [ { country: "Lithuania", litres: 300 }, { country: "Czechia", litres: 200 }, { country: "Ireland", litres: 500 }, { country: "Germany", litres: 325 }, { country: "Australia", litres: 200 } ];
var pieSeries = chart.series.push(new am4charts.PieSeries()); pieSeries.dataFields.value = "litres"; pieSeries.dataFields.category = "country"; pieSeries.labels.template.disabled = true; pieSeries.ticks.template.disabled = true;});<div id="chart1" class="chartdiv"></div><div id="chart2" class="chartdiv"></div><div id="chart3" class="chartdiv"></div><div id="chart4" class="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: 50%; height: 200px; float: left; border: 1px solid #eee; box-sizing: border-box;}chart-placeholders