title: AmChart x axis data date formatting to display per day values with hours minutes and seconds
body: <p>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.</p>
  
  <p>My question: what is the date format that I have to specify to chart.dataDateFormat and to the "date" parameter of my data?</p>
  
  <p>Here is my code so far. Please let me know what I should change.
  Thank you.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
              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]]&lt;br&gt;&lt;b&gt;&lt;span style='font-size:14px;'&gt;value:[[value]]&lt;/span&gt;&lt;/b&gt;";
                  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");
              });
      &lt;/script&gt;
  </code></pre>