I have been trying to get AMCharts to plot about 50 data points, but for some reason it’s only plotting the very last data point with an incorrect date of the epoch (Jan 20, 1970).
I have a jsfiddle setup with a basic example – https://jsfiddle.net/wmL3s8b1/
The data is in a date / value format like the documentation states it should be and the documentation also states that the date should be in a timestamp format, so that is what I’m providing, but it seems to be ignoring the timestamp and using Jan 20, 1970. It’s also only displaying the very last value.
Each data point is 1 day apart and I have set the interval to 1 day.
var data = [{date: 1732233600, value: 133},{date: 1732320000, value: 124},{date: 1732406400, value: 184},{date: 1732492800, value: 189},{date: 1732579200, value: 192},{date: 1732665600, value: 0},{date: 1732752000, value: 193},{date: 1732838400, value: 197},{date: 1732924800, value: 156},{date: 1733011200, value: 134},{date: 1733097600, value: 139},{date: 1733184000, value: 143},{date: 1733270400, value: 143},{date: 1733356800, value: 190},{date: 1733443200, value: 211},{date: 1733529600, value: 189},{date: 1733616000, value: 189},{date: 1733702400, value: 192},{date: 1733788800, value: 137},{date: 1733875200, value: 192},{date: 1733961600, value: 209},{date: 1734048000, value: 191},{date: 1734134400, value: 191},{date: 1734220800, value: 191},{date: 1734307200, value: 182},{date: 1734393600, value: 201},{date: 1734480000, value: 192},{date: 1734566400, value: 188},{date: 1734652800, value: 184},{date: 1734739200, value: 179},{date: 1734825600, value: 180},{date: 1734912000, value: 173},{date: 1734998400, value: 214},{date: 1735084800, value: 283},{date: 1735171200, value: 287},{date: 1735257600, value: 296},{date: 1735344000, value: 288},{date: 1735430400, value: 213},{date: 1735516800, value: 456},{date: 1735603200, value: 374},{date: 1735689600, value: 233},{date: 1735776000, value: 264},{date: 1735862400, value: 185},{date: 1735948800, value: 209},{date: 1736035200, value: 209},{date: 1736121600, value: 202},{date: 1736208000, value: 210},{date: 1736294400, value: 218},{date: 1736380800, value: 209},{date: 1736467200, value: 209},{date: 1736553600, value: 155}];
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: true,
panY: true,
wheelX: "panX",
wheelY: "zoomX",
pinchZoomX:true,
paddingLeft: 0
}));
// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
behavior: "none"
}));
cursor.lineY.set("visible", false);
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
maxDeviation: 0.2,
baseInterval: {
timeUnit: "day",
count: 1
},
renderer: am5xy.AxisRendererX.new(root, {
minorGridEnabled:true
}),
tooltip: am5.Tooltip.new(root, {})
}));
var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {
pan:"zoom"
})
}));
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.LineSeries.new(root, {
name: "Series",
xAxis: xAxis,
yAxis: yAxis,
valueYField: "value",
valueXField: "date",
tooltip: am5.Tooltip.new(root, {
labelText: "{valueY}"
})
}));
// Add scrollbar
// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
chart.set("scrollbarX", am5.Scrollbar.new(root, {
orientation: "horizontal"
}));
// Set data
//var data = generateDatas(1200);
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear(1000);
chart.appear(1000, 100);
}); // end am5.ready()