Adding XY series dynamically
This demo shows how series can be added on an XY chart dynamically.
/** * --------------------------------------- * 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 element// https://www.amcharts.com/docs/v5/getting-started/#Root_elementvar root = am5.Root.new("chartdiv");
// Set themes// https://www.amcharts.com/docs/v5/concepts/themes/root.setThemes([am5themes_Animated.new(root)]);
var data = [ { date: new Date(2012, 1, 1).getTime(), value: 8 }, { date: new Date(2012, 1, 2).getTime(), value: 10 }, { date: new Date(2012, 1, 3).getTime(), value: 12 }, { date: new Date(2012, 1, 4).getTime(), value: 14 }, { date: new Date(2012, 1, 5).getTime(), value: 11 }, { date: new Date(2012, 1, 6).getTime(), value: 6 }, { date: new Date(2012, 1, 7).getTime(), value: 7 }, { date: new Date(2012, 1, 8).getTime(), value: 9 }, { date: new Date(2012, 1, 9).getTime(), value: 13 }, { date: new Date(2012, 1, 10).getTime(), value: 15 }, { date: new Date(2012, 1, 11).getTime(), value: 19 }, { date: new Date(2012, 1, 12).getTime(), value: 21 }, { date: new Date(2012, 1, 13).getTime(), value: 22 }, { date: new Date(2012, 1, 14).getTime(), value: 20 }, { date: new Date(2012, 1, 15).getTime(), value: 18 }, { date: new Date(2012, 1, 16).getTime(), value: 14 }, { date: new Date(2012, 1, 17).getTime(), value: 16 }, { date: new Date(2012, 1, 18).getTime(), value: 18 }, { date: new Date(2012, 1, 19).getTime(), value: 17 }, { date: new Date(2012, 1, 20).getTime(), value: 15 }, { date: new Date(2012, 1, 21).getTime(), value: 12 }, { date: new Date(2012, 1, 22).getTime(), value: 10 }, { date: new Date(2012, 1, 23).getTime(), value: 8 }];
var data2 = [ { date: new Date(2012, 1, 1).getTime(), value: 18 }, { date: new Date(2012, 1, 2).getTime(), value: 11 }, { date: new Date(2012, 1, 3).getTime(), value: 9 }, { date: new Date(2012, 1, 4).getTime(), value: 9 }, { date: new Date(2012, 1, 5).getTime(), value: 10 }, { date: new Date(2012, 1, 6).getTime(), value: 16 }, { date: new Date(2012, 1, 7).getTime(), value: 9 }, { date: new Date(2012, 1, 8).getTime(), value: 11 }, { date: new Date(2012, 1, 9).getTime(), value: 10 }, { date: new Date(2012, 1, 10).getTime(), value: 5 }, { date: new Date(2012, 1, 11).getTime(), value: 9 }, { date: new Date(2012, 1, 12).getTime(), value: 16 }, { date: new Date(2012, 1, 13).getTime(), value: 15 }, { date: new Date(2012, 1, 14).getTime(), value: 8 }, { date: new Date(2012, 1, 15).getTime(), value: 8 }, { date: new Date(2012, 1, 16).getTime(), value: 12 }, { date: new Date(2012, 1, 17).getTime(), value: 10 }, { date: new Date(2012, 1, 18).getTime(), value: 21 }, { date: new Date(2012, 1, 19).getTime(), value: 7 }, { date: new Date(2012, 1, 20).getTime(), value: 5 }, { date: new Date(2012, 1, 21).getTime(), value: 19 }, { date: new Date(2012, 1, 22).getTime(), value: 19 }, { date: new Date(2012, 1, 23).getTime(), value: 18 }];
// Create chart// https://www.amcharts.com/docs/v5/charts/xy-chart/var chart = root.container.children.push( am5xy.XYChart.new(root, { panX: true, panY: true, wheelX: "panX", wheelY: "zoomX", layout: root.verticalLayout }));
var easing = am5.ease.linear;
// Create axes// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/var xAxis = chart.xAxes.push( am5xy.DateAxis.new(root, { maxDeviation: 0.1, groupData: false, baseInterval: { timeUnit: "day", count: 1 },
renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 50 }),
tooltip: am5.Tooltip.new(root, {}) }));
var yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { maxDeviation: 0.1, renderer: am5xy.AxisRendererY.new(root, {}) }));
// Add series// https://www.amcharts.com/docs/v5/charts/xy-chart/series/var series = chart.series.push( am5xy.LineSeries.new(root, { name: "Series #1", minBulletDistance: 10, xAxis: xAxis, yAxis: yAxis, valueYField: "value", valueXField: "date", tooltip: am5.Tooltip.new(root, { pointerOrientation: "horizontal", labelText: "{valueY}" }) }));
series.data.setAll(data);
// Add cursor// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/var cursor = chart.set( "cursor", am5xy.XYCursor.new(root, { xAxis: xAxis }));
cursor.lineY.set("visible", false);
// add scrollbarchart.set( "scrollbarX", am5.Scrollbar.new(root, { orientation: "horizontal" }));
// Add legend// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/var legend = chart.children.push( am5.Legend.new(root, { centerX: am5.p50, x: am5.p50, layout: root.horizontalLayout }));
legend.data.push(series);
// Make stuff animate on load// https://www.amcharts.com/docs/v5/concepts/animations/series.appear(1000, 100);chart.appear(1000, 100);
function addSeries() { var series = chart.series.push( am5xy.LineSeries.new(root, { name: "Series #2", minBulletDistance: 10, xAxis: xAxis, yAxis: yAxis, valueYField: "value", valueXField: "date", tooltip: am5.Tooltip.new(root, { pointerOrientation: "horizontal", labelText: "{valueY}" }) }) );
series.data.setAll(data2);
legend.data.push(series);}<input type="button" value="add series" onclick="addSeries()" /><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: 90vh;}{ "type": "XYChart", "settings": { "panX": true, "panY": true, "wheelX": "panX", "wheelY": "zoomX", "layout": { "type": "VerticalLayout" }, "cursor": { "type": "XYCursor", "settings": { "xAxis": "#axis-0" }, "properties": { "lineY": { "settings": { "visible": false } } } }, "scrollbarX": { "type": "Scrollbar", "settings": { "orientation": "horizontal" } } }, "properties": { "series": [ "#series-0" ], "xAxes": [ "#axis-0" ], "yAxes": [ "#axis-1" ] }, "children": [ { "type": "Legend", "settings": { "centerX": { "type": "Percent", "value": 50 }, "x": { "type": "Percent", "value": 50 }, "layout": { "type": "HorizontalLayout" } }, "properties": { "data": [ "#series-0" ] } } ], "refs": [ { "data-0": [ { "date": 1328047200000, "value": 8 }, { "date": 1328133600000, "value": 10 }, { "date": 1328220000000, "value": 12 }, { "date": 1328306400000, "value": 14 }, { "date": 1328392800000, "value": 11 }, { "date": 1328479200000, "value": 6 }, { "date": 1328565600000, "value": 7 }, { "date": 1328652000000, "value": 9 }, { "date": 1328738400000, "value": 13 }, { "date": 1328824800000, "value": 15 }, { "date": 1328911200000, "value": 19 }, { "date": 1328997600000, "value": 21 }, { "date": 1329084000000, "value": 22 }, { "date": 1329170400000, "value": 20 }, { "date": 1329256800000, "value": 18 }, { "date": 1329343200000, "value": 14 }, { "date": 1329429600000, "value": 16 }, { "date": 1329516000000, "value": 18 }, { "date": 1329602400000, "value": 17 }, { "date": 1329688800000, "value": 15 }, { "date": 1329775200000, "value": 12 }, { "date": 1329861600000, "value": 10 }, { "date": 1329948000000, "value": 8 } ] }, { "axis-0": { "type": "DateAxis", "settings": { "maxDeviation": 0.1, "groupData": false, "baseInterval": { "timeUnit": "day", "count": 1 }, "renderer": { "type": "AxisRendererX", "settings": { "minGridDistance": 50 } }, "tooltip": { "type": "Tooltip" } } } }, { "axis-1": { "type": "ValueAxis", "settings": { "maxDeviation": 0.1, "renderer": { "type": "AxisRendererY" } } } }, { "series-0": { "type": "LineSeries", "settings": { "name": "Series #1", "minBulletDistance": 10, "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "value", "valueXField": "date", "tooltip": { "type": "Tooltip", "settings": { "pointerOrientation": "horizontal", "labelText": "{valueY}" } } }, "properties": { "data": "#data-0" } } } ]}adding-series-dynamically