Dynamically switching data set for an XYChart
This demo shows how we can dynamically set data on a series and related category axis.
/** * --------------------------------------- * 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/ * --------------------------------------- */
var xAxis;var series;
function selectDataset(d) { xAxis.data.setAll(getData(d)); series.data.setAll(getData(d));}
function getData(index) { var data = [ // Data set #1 [ { country: "Czech Republic", value: 156.9 }, { country: "Ireland", value: 131.1 }, { country: "Germany", value: 115.8 }, { country: "Australia", value: 109.9 }, { country: "Austria", value: 108.3 }, { country: "UK", value: 99.0 } ],
// Data set #2 [ { country: "Czech Republic", value: 101.2 }, { country: "Ireland", value: 141.2 }, { country: "Germany", value: 91.8 }, { country: "Australia", value: 101.9 }, { country: "Austria", value: 125.3 }, { country: "UK", value: 101.5 } ] ];
return data[index];}
am5.ready(function () { // Create root element // https://www.amcharts.com/docs/v5/getting-started/#Root_element var root = am5.Root.new("chartdiv");
// Set themes // https://www.amcharts.com/docs/v5/concepts/themes/ root.setThemes([am5themes_Animated.new(root)]);
// Create chart // https://www.amcharts.com/docs/v5/charts/xy-chart/ var chart = root.container.children.push( am5xy.XYChart.new(root, { panX: false, panY: false, wheelX: "panX", wheelY: "zoomX", layout: root.verticalLayout }) );
// Create axes // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/ xAxis = chart.xAxes.push( am5xy.CategoryAxis.new(root, { categoryField: "country", renderer: am5xy.AxisRendererX.new(root, { cellStartLocation: 0.1, cellEndLocation: 0.9 }),
tooltip: am5.Tooltip.new(root, {}) }) );
xAxis.data.setAll(getData(0));
var yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}) }) );
// Add series // https://www.amcharts.com/docs/v5/charts/xy-chart/series/ series = chart.series.push( am5xy.ColumnSeries.new(root, { xAxis: xAxis, yAxis: yAxis, valueYField: "value", categoryXField: "country" }) );
series.columns.template.setAll({ tooltipText: "{name}, {categoryX}:{valueY}", width: am5.percent(90), tooltipY: 0 });
series.bullets.push(function () { return am5.Bullet.new(root, { locationY: 0.5, sprite: am5.Label.new(root, { text: "{valueY}", fill: root.interfaceColors.get("alternativeText"), centerY: am5.p50, centerX: am5.p50, populateText: true }) }); });
series.data.setAll(getData(0)); series.appear();
// Make stuff animate on load // https://www.amcharts.com/docs/v5/concepts/animations/ chart.appear(1000, 100);});<div id="selector"> Select a dataset: <label ><input type="radio" value="0" name="dataset" checked="checked" onclick="selectDataset(0)" /> Data set #1</label > <label ><input type="radio" value="1" name="dataset" onclick="selectDataset(1)" /> Data set #2</label ></div><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: 85vh;}
#selector { font-family: Verdana; background-color: #efefef; padding: 10px; margin-bottom: 10px; border-bottom: 1px solid #ccc;}{ "type": "XYChart", "settings": { "panX": false, "panY": false, "wheelX": "panX", "wheelY": "zoomX", "layout": { "type": "VerticalLayout" } }, "properties": { "series": [ "#series-0" ], "xAxes": [ "#axis-0" ], "yAxes": [ "#axis-1" ] }, "refs": [ { "data-0": [ { "country": "Czech Republic", "value": 156.9 }, { "country": "Ireland", "value": 131.1 }, { "country": "Germany", "value": 115.8 }, { "country": "Australia", "value": 109.9 }, { "country": "Austria", "value": 108.3 }, { "country": "UK", "value": 99 } ] }, { "axis-0": { "type": "CategoryAxis", "settings": { "categoryField": "country", "renderer": { "type": "AxisRendererX", "settings": { "cellStartLocation": 0.1, "cellEndLocation": 0.9 } }, "tooltip": { "type": "Tooltip" } }, "properties": { "data": "#data-0" } } }, { "axis-1": { "type": "ValueAxis", "settings": { "renderer": { "type": "AxisRendererY" } } } }, { "series-0": { "type": "ColumnSeries", "settings": { "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "value", "categoryXField": "country" }, "properties": { "data": "#data-0", "columns": { "properties": { "template": { "settings": { "tooltipText": "{name}, {categoryX}:{valueY}", "width": { "type": "Percent", "value": 90 }, "tooltipY": 0 } } } }, "bullets": [ { "type": "Bullet", "settings": { "locationY": 0.5, "sprite": { "type": "Label", "settings": { "text": "{valueY}", "fill": "@root.interfaceColors.get('alternativeText')", "centerY": { "type": "Percent", "value": 50 }, "centerX": { "type": "Percent", "value": 50 }, "populateText": true } } } } ] } } } ]}dynamically-switching-data-set-for-an-xychart