amCharts with intra-day data not showing properly

Question

The problem is what you see in the chart: http://www.fanta-trade.eu/chart.php?tipo=f&code=1450018272

The chart is not showing correctly the data according with the date.

The code probably might be here:

var categoryAxesSettings = new AmCharts.CategoryAxesSettings();

Full code:

AmCharts.ready( function() {
  createStockChart();
} );

var chartData = [];
    chartData.push({ date: new Date(2015, 11, 15, 13, 59, 0, 0), value: 203.84, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 15, 13, 36, 0, 0), value: 203.86, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 15, 12, 59, 0, 0), value: 203.86, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 15, 12, 37, 0, 0), value: 203.81, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 15, 12, 11, 0, 0), value: 203.8, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 15, 11, 34, 0, 0), value: 203.79, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 15, 4, 47, 0, 0), value: 203.68, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 14, 21, 41, 0, 0), value: 202.64, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 14, 18, 16, 0, 0), value: 199.73, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 14, 17, 52, 0, 0), value: 197.94, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 14, 17, 22, 0, 0), value: 199.83, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 14, 13, 11, 0, 0), value: 198.56, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 14, 8, 54, 0, 0), value: 198.56, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 14, 8, 0, 0, 0), value: 198.56, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 14, 2, 11, 0, 0), value: 198.56, volume: 1 });
    chartData.push({ date: new Date(2015, 11, 14, 1, 13, 0, 0), value: 198.56, volume: 1 });

var chart;

function createStockChart() {
  chart = new AmCharts.AmStockChart();

  // DATASETS //////////////////////////////////////////
  var dataSet = new AmCharts.DataSet();
  dataSet.color = "#000000";
  dataSet.fieldMappings = [{
    fromField: "value",
    toField: "value"
  }, {
    fromField: "volume",
    toField: "volume"
  }];

  dataSet.dataProvider = chartData;
  dataSet.categoryField = "date";

  // set data sets to the chart
  chart.dataSets = [dataSet];

  // PANELS ///////////////////////////////////////////
  // first stock panel
  var stockPanel1 = new AmCharts.StockPanel();
  stockPanel1.showCategoryAxis = false;
  stockPanel1.title = "Price";
  stockPanel1.percentHeight = 70;

  // graph of first stock panel
  var graph1 = new AmCharts.StockGraph();
  graph1.valueField = "value";
  graph1.type = "smoothedLine";
  graph1.bullet = "round";
  graph1.lineThickness = 2;
  graph1.bulletBorderColor = "#FFFFFF";
  graph1.bulletBorderAlpha = 1;
  graph1.bulletBorderThickness = 3;
  stockPanel1.addStockGraph(graph1);

  // create stock legend
  var stockLegend1 = new AmCharts.StockLegend();
  stockLegend1.valueTextRegular = " ";
  stockLegend1.markerType = "none";
  stockPanel1.stockLegend = stockLegend1;

  // second stock panel
  var stockPanel2 = new AmCharts.StockPanel();
  stockPanel2.title = "Volume";
  stockPanel2.percentHeight = 30;
  var graph2 = new AmCharts.StockGraph();
  graph2.valueField = "volume";
  graph2.type = "column";
  graph2.fillAlphas = 1;
  stockPanel2.addStockGraph(graph2);

  // set panels to the chart
  chart.panels = [stockPanel1];

  // OTHER SETTINGS ////////////////////////////////////
  var scrollbarSettings = new AmCharts.ChartScrollbarSettings();
  scrollbarSettings.graph = graph1;
  chart.chartScrollbarSettings = scrollbarSettings;

  var cursorSettings = new AmCharts.ChartCursorSettings();
  cursorSettings.valueBalloonsEnabled = true;
  cursorSettings.graphBulletSize = 1;
  chart.chartCursorSettings = cursorSettings;

  var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
  categoryAxesSettings.minPeriod="mm";
  chart.categoryAxesSettings = categoryAxesSettings;

  // PERIOD SELECTOR ///////////////////////////////////
  var periodSelector = new AmCharts.PeriodSelector();
  periodSelector.periods = [{
    period: "DD",
    count: 10,
    label: "10 days"
  }, {
    period: "MM",
    count: 1,
    selected: true,
    label: "1 month"
  }, {
    period: "YYYY",
    count: 1,
    label: "1 year"
  }, {
    period: "YTD",
    label: "YTD"
  }, {
    period: "MAX",
    label: "MAX"
  }];
  chart.periodSelector = periodSelector;

  var panelsSettings = new AmCharts.PanelsSettings();
  panelsSettings.marginRight = 16;
  panelsSettings.marginLeft = 16;
  panelsSettings.usePrefixes = true;
  chart.panelsSettings = panelsSettings;

  dataSet.stockEvents = [];

  chart.write('chartdiv');
}

Answer 1

The issue is very simple, actually.

Data in amCharts must come in ascending order. While you have it in descending, which creates all kinds of anomalies.

To fix simply add your data points in ascending order. For example use unshift() instead of push().

Or simply reverse() the result array:

chartData.reverse();

Here's the same chart with reversed data: http://codepen.io/team/amcharts/pen/5d2891ce1710ce06dae34bebc2db8644