Combining local data from multiple series for export
In amCharts 4 each series can have its own data (set via own data property). Such data will not be exported using exporting functionality. This demo shows how we can use export’s data adapter to combine local data from multiple series in export.
Open in:New tab
/** * --------------------------------------- * This demo was created using amCharts 4. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v4/ * --------------------------------------- */
am4core.useTheme(am4themes_animated);
// Create chart instancevar chart = am4core.create("chartdiv", am4charts.XYChart);
// Create axesvar dateAxis = chart.xAxes.push(new am4charts.DateAxis());dateAxis.renderer.grid.template.location = 0;dateAxis.renderer.minGridDistance = 30;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create seriesfunction createSeries(field, name, data) { var series = chart.series.push(new am4charts.LineSeries()); series.dataFields.valueY = field; series.dataFields.dateX = "date"; series.name = name; series.tooltipText = "{dateX}: [b]{valueY}[/]"; series.strokeWidth = 2; series.data = data;
var bullet = series.bullets.push(new am4charts.CircleBullet()); bullet.circle.stroke = am4core.color("#fff"); bullet.circle.strokeWidth = 2;
return series;}
createSeries("value", "Series #1", [ { date: new Date(2018, 0, 1), value: 450 }, { date: new Date(2018, 0, 2), value: 269 }, { date: new Date(2018, 0, 3), value: 700 }, { date: new Date(2018, 0, 4), value: 490 }, { date: new Date(2018, 0, 5), value: 500 }, { date: new Date(2018, 0, 6), value: 550 }, { date: new Date(2018, 0, 7), value: 420 }]);
createSeries("value", "Series #2", [ { date: new Date(2018, 0, 1), value: 362 }, { date: new Date(2018, 0, 2), value: 450 }, { date: new Date(2018, 0, 3), value: 358 }, { date: new Date(2018, 0, 4), value: 367 }, { date: new Date(2018, 0, 5), value: 485 }, { date: new Date(2018, 0, 6), value: 354 }, { date: new Date(2018, 0, 7), value: 350 }]);
createSeries("value", "Series #3", [ { date: new Date(2018, 0, 1), value: 699 }, { date: new Date(2018, 0, 2), value: 841 }, { date: new Date(2018, 0, 3), value: 699 }, { date: new Date(2018, 0, 4), value: 500 }, { date: new Date(2018, 0, 5), value: 369 }, { date: new Date(2018, 0, 6), value: 250 }, { date: new Date(2018, 0, 7), value: 600 }]);
chart.legend = new am4charts.Legend();chart.cursor = new am4charts.XYCursor();
// Set up exportchart.exporting.menu = new am4core.ExportMenu();chart.exporting.adapter.add("data", function (data, target) { // Assemble data from series var data = []; chart.series.each(function (series) { for (var i = 0; i < series.data.length; i++) { series.data[i].name = series.name; data.push(series.data[i]); } }); console.log(data); return { data: data };});<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: 250px;}combining-local-data-from-multiple-series-for-export