Not able to zoom on amcharts

Question

i'm trying to make my AMChart zoom correctly, as i'm having data with 2 min. interval and want to be able to look into the data by the minute.

but when i try and 'mark' to zoom or use the buttons to use a defined periode of time. it is just not looking correctly at all. The buttons are giving wrong interval and the zoom will give me vertical lines when zooming into a specific date.

also i have tried to make my Y axis always start from 0, it just do not want to happen.

http://jsfiddle.net/5868z7xw/

anyone who can see what i have done wrong here?

this.chart = this.AmCharts.makeChart("m_amcharts_1", {
            "type": "stock",
            "theme": "light",
            "dataDateFormat": "YYYY-MM-DD HH:NN",

            categoryAxis: [{
                gridPosition: "start",
                axisColor: "#DADADA",
                axisAlpha: 0,
                minHorizontalGap: 75,
                startOnAxis: true,
                parseDates: true,
                equalSpacing: true,
                markPeriodChange: false,
                firstDayOfWeek: 0,
                dateFormats: [{
                    period: 'ss',
                    format: 'JJ:NN:SS'
                }, {
                    period: 'mm',
                    format: 'JJ:NN'
                }, {
                    period: 'hh',
                    format: 'JJ:NN'
                }, {
                    period: 'DD',
                    format: 'MM/DD/YYYY'
                }]
            }],
            "guides": [],
            "valueAxes": [{
              "id": "ValueAxis-1",
              "capMaximum": 10,
              "capMinimum": 0,
              "minimum": 0,
              "title": ""
            }],
            "dataSets": [],

            "panels": [ {
              "showCategoryAxis": true,
              "title": "Value",

              "percentHeight": 70,
              "stockGraphs": [ {
                "id": "g1",

                "valueField": "value",
                "comparable": true,
                "compareField": "value",
                "balloonText": "[[title]]:<b>[[value]]</b>",
                "compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
              } ],
              "stockLegend": {
                "periodValueTextComparing": "[[percents.value.close]]%",
                "periodValueTextRegular": "[[value.close]]"
              }
            }, 
            {
                "title": "Volume",
                "percentHeight": 30,
                "stockGraphs": [ {
                  "valueField": "volume",
                  "type": "column",
                  "showBalloon": false,
                  "fillAlphas": 1
                } ],

                "stockLegend": {
                  "periodValueTextRegular": "[[value.close]]"
                }
              }
        ],

            "categoryAxesSettings": {
                "maxSeries": 1,
                "groupToPeriods": ["30mm"]
              },

            "chartScrollbarSettings": {
              "graph": "g1"
            },

            "chartCursorSettings": {
              "valueBalloonsEnabled": true,
              "fullWidth": true,
              "cursorAlpha": 0.1,
              "valueLineBalloonEnabled": true,
              "valueLineEnabled": true,
              "valueLineAlpha": 0.5
            },


            "periodSelector": {
                "position": "left",
                "dateFormat": "YYYY-MM-DD JJ:NN",
                "inputFieldWidth": 150,
                "periods": [ {
                  "period": "hh",
                  "count": 1,
                  "label": "1 hour"
                }, {
                  "period": "hh",
                  "count": 2,
                  "label": "2 hours"
                }, {
                  "period": "hh",
                  "count": 5,
                  "selected": true,
                  "label": "5 hour"
                }, {
                  "period": "hh",
                  "count": 12,
                  "label": "12 hours"
                }, {
                  "period": "MAX",
                  "label": "MAX"
                } ]
              },

            "dataSetSelector": {
              "position": "left"
            },
            "panelsSettings": {
                "recalculateToPercents": "never"
              },

            "export": {
              "enabled": true,
              "position": "bottom-right"
            }
          });

Answer 1

You have to adjust the minPeriod in your categoryAxesSettings to correspond with the smallest interval between the points in your data. By default it is set to days ( "DD" ), so you'll want to change it to minutes ( "mm" ) since that is the smallest interval between your points:

categoryAxesSettings: {
  // ...
  minPeriod: "mm",
  // ...
}

Also note that your categoryAxis setting is incorrect - you can set categoryAxis properties inside categoryAxesSettings . Note that dateFormats must contain the complete array for all periods, not just the ones you care about. Not including the complete array will cause issues with zooming when you have a lot of data.

As for your valueAxis, you can set it either in the panel or in valueAxesSettings if you want the settings to apply to both panels:

valueAxesSettings: {
  // ...
  minimum: 0,
  // ...
}

Updated fiddle

Answer 2

I think you should be able to add this proprety to yours:

"zoomControl": { "zoomControlEnabled": true }

ZoomControl