amcharts (v3.x) date formatting issue on graph

Question

I am trying to plot chart using Amchart and Angular js. My Data array object contains date in form of a string. Problem is the amchart's dataDateFormat is not working as required.

For example - in my data object

{
"date": "2012-07-27 11:33",
 "value": 18
}

In amchart code

"dataDateFormat": "JJ:NN" or     "dataDateFormat": "YYYY-MM-DD JJ:NN"

shows a single line as graph.

Below is the js code

angular.module("ctrl", ['ui.bootstrap']).controller("mindCtrl", 
function($scope) {
$scope.makaDaCharto = function(index) {
$scope.chart = AmCharts.makeChart("chartdiv" + index, {
  "type": "serial",
  "theme": "light",
  "marginRight": 40,
  "marginLeft": 40,
  "autoMarginOffset": 20,
  "mouseWheelZoomEnabled": true,
  "dataDateFormat": "JJ:NN",
  "valueAxes": [{
    "id": "v1",
    "axisAlpha": 0,
    "position": "left",
    "ignoreAxisWidth": true
  }],
  "balloon": {
    "borderThickness": 1,
    "shadowAlpha": 0
  },
  "graphs": [{
    "id": "g1",
    "balloon": {
      "drop": true,
      "adjustBorderColor": false,
      "color": "#ffffff"
    },
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "value",
    "balloonText": "<span style='font-size:18px;'>[[value]]</span>"
  }],
  "chartScrollbar": {
    "graph": "g1",
    "oppositeAxis": false,
    "offset": 30,
    "scrollbarHeight": 80,
    "backgroundAlpha": 0,
    "selectedBackgroundAlpha": 0.1,
    "selectedBackgroundColor": "#888888",
    "graphFillAlpha": 0,
    "graphLineAlpha": 0.5,
    "selectedGraphFillAlpha": 0,
    "selectedGraphLineAlpha": 1,
    "autoGridCount": true,
    "color": "#AAAAAA"
  },
  "chartCursor": {
    "pan": true,
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "cursorAlpha": 1,
    "cursorColor": "#258cbb",
    "limitToGraph": "g1",
    "valueLineAlpha": 0.2,
    "valueZoomable": true
  },
  "valueScrollbar": {
    "oppositeAxis": false,
    "offset": 50,
    "scrollbarHeight": 10
  },
  "categoryField": "date",
  "categoryAxis": {
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true
  },
  "export": {
    "enabled": true
  },
  "dataProvider": [{
    "date": "2012-07-27 11:22",
    "value": 13
  }, {
    "date": "2012-07-27 11:23",
    "value": 11
  }, {
    "date": "2012-07-27 11:24",
    "value": 15
  }, {
    "date": "2012-07-27 11:25",
    "value": 16
  }, {
    "date": "2012-07-27 11:26",
    "value": 18
  }, {
    "date": "2012-07-27 11:27",
    "value": 13
  }, {
    "date": "2012-07-27 11:28",
    "value": 22
  }, {
    "date": "2012-07-27 11:29",
    "value": 23
  }, {
    "date": "2012-07-27 11:30",
    "value": 20
  }, {
    "date": "2012-07-27 11:31",
    "value": 17
  }, {
    "date": "2012-07-27 11:32",
    "value": 16
  }, {
    "date": "2012-07-27 11:33",
    "value": 18
  }, {
    "date": "2012-07-27 11:34",
    "value": 21
  }, {
    "date": "2012-07-27 11:35",
    "value": 26
  }, {
    "date": "2012-07-27 11:36",
    "value": 24
  }, {
    "date": "2012-07-27 11:37",
    "value": 29
  }, {
    "date": "2012-07-27 11:38",
    "value": 32
  }, {
    "date": "2012-07-27 11:39",
    "value": 18
  }, {
    "date": "2012-07-27 11:40",
    "value": 24
  }, {
    "date": "2012-07-27 11:41",
    "value": 22
  }, {
    "date": "2012-07-27 11:42",
    "value": 18
  }, {
    "date": "2012-07-27 11:43",
    "value": 19
  }, {
    "date": "2012-07-27 11:44",
    "value": 14
  }, {
    "date": "2012-07-27 11:45",
    "value": 15
  }, {
    "date": "2012-07-27 11:46",
    "value": 12
  }, {
    "date": "2012-07-27 11:47",
    "value": 8
  }, {
    "date": "2012-07-27 11:48",
    "value": 9
  }, {
    "date": "2012-07-27 11:49",
    "value": 8
  }, {
    "date": "2012-07-27 11:50",
    "value": 7
  }, {
    "date": "2012-07-27 11:51",
    "value": 5
  }, {
    "date": "2012-07-27 11:52",
    "value": 11
  }, {
    "date": "2012-07-27 11:53",
    "value": 13
  }, {
    "date": "2012-07-27 11:54",
    "value": 18
  }]
});

$scope.chart.addListener("rendered", zoomChart);

zoomChart();

function zoomChart() {
  $scope.chart.zoomToIndexes($scope.chart.dataProvider.length - 40, 
$scope.chart.dataProvider.length - 1);
}
};

});

Amchart Curve by editing fiddle

Existing Example fiddle at http://jsfiddle.net/v917yya3/68/

Fiddle I Created to depict the issue http://jsfiddle.net/phex4qg5/

PS - I already tried

1. amCharts with AngularJS

2. JSON with parsed time or timestamp to amCharts

3. Almost all formats explained here http://www.amcharts.com/kbase/formatting-dates/

Answer 1

AmCharts assumes your data is in daily intervals by default. Since your data is in minute intervals, you need to adjust the category axis' minPeriod to accommodate this. In your case, set minPeriod: "mm", along with setting dataDateFormat: "YYYY-MM-DD JJ:NN" will fix your chart.

Updated fiddle: http://jsfiddle.net/phex4qg5/10/