AmChart x axis data date formatting to display per day values with hours minutes and seconds

Question

I am trying to create a chart which the data is time related. I would like to give to each bullet the year, month, day, hours, minutes and seconds. But I would like the X axis to not show the minutes and seconds if the users zooms in.

My question: what is the date format that I have to specify to chart.dataDateFormat and to the "date" parameter of my data?

Here is my code so far. Please let me know what I should change. Thank you.

<script type="text/javascript">
            var chart;

            var chartData = [
                {
                    "date": "2012-01-01",
                    "value": 0.24
                },
                {
                    "date": "2012-01-02",
                    "value": 0.28
                },
                {
                    "date": "2012-01-03",
                    "value": 0.34
                },
                {
                    "date": "2012-01-04",
                    "value": 0.30
                },
                {
                    "date": "2012-01-05",
                    "value": 0.27
                }
            ];


            AmCharts.ready(function () {
                // SERIAL CHART        
                chart = new AmCharts.AmSerialChart();
                chart.pathToImages = "/images/";
                chart.dataProvider = chartData;
                chart.dataDateFormat = "YYYY-MM-DD";
                chart.categoryField = "date";


                // AXES
                // category
                var categoryAxis = chart.categoryAxis;
                categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
                categoryAxis.minPeriod = "hh"; // our data is daily, so we set minPeriod to DD               
                categoryAxis.gridAlpha = 0.1;
                categoryAxis.minorGridAlpha = 0.1;
                categoryAxis.axisAlpha = 0;
                categoryAxis.minorGridEnabled = true;
                categoryAxis.inside = true;

                // value
                var valueAxis = new AmCharts.ValueAxis();
                valueAxis.tickLength = 0;
                valueAxis.axisAlpha = 0;
                valueAxis.showFirstLabel = false;
                valueAxis.showLastLabel = false;
                chart.addValueAxis(valueAxis);

                // GRAPH
                var graph = new AmCharts.AmGraph();
                graph.dashLength = 3;
                graph.lineColor = "gray";
                graph.valueField = "value";

                graph.dashLength = 3;
                graph.bullet = "round";
                graph.lineThickness = 0;
                graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>value:[[value]]</span></b>";
                chart.addGraph(graph);

                // CURSOR
                var chartCursor = new AmCharts.ChartCursor();
                chart.addChartCursor(chartCursor);

                // SCROLLBAR
                var chartScrollbar = new AmCharts.ChartScrollbar();
                chart.addChartScrollbar(chartScrollbar);

                // HORIZONTAL GREEN RANGE
                var guide = new AmCharts.Guide();
                guide.value = 0.26;
                guide.toValue = 0.32;
                guide.fillColor = "#00CC00";
                guide.inside = true;
                guide.fillAlpha = 0.2;
                guide.lineAlpha = 0;
                valueAxis.addGuide(guide);

                // TREND LINES
                // first trend line
                var trendLine = new AmCharts.TrendLine();
                // note,when creating date objects 0 month is January, as months are zero based in JavaScript.
                trendLine.initialDate = new Date(2012, 0, 1, 0,59); // 12 is hour - to start trend line in the middle of the day
                trendLine.finalDate = new Date(2012, 0, 23, 24);
                trendLine.initialValue = 0.28;
                trendLine.finalValue = 0.28;
                trendLine.lineColor = "#CC0000";
                chart.addTrendLine(trendLine);

                // WRITE
                chart.write("chartdiv");
            });
    </script>

Answer 1

I finally figured it out myself overnight. I put the solution for the people who would look for it.

The chartData must be:

{ "date": "2014-03-01, 08:05:05", "value": 0.25 }

The chart.dataDateFormat must be:

chart.dataDateFormat = "YYYY-MM-DD, JJ:NN:SS";

Hope it helps someone.