title: set x axis as date for highcharts plot using python flask framework
body: <p>I am using python flask framework to generate dashboard like webpages. I use highcharts as the charting tool. In the test3.html template:</p>
  
  <pre><code>{% extends "base.html" %}
  {% block head %}
     &lt;script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"&gt;&lt;/script&gt;  
     &lt;script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/4.0.1/highcharts.js"&gt;&lt;/script&gt;  
  
  &lt;script type="text/javascript"&gt;
  $(function () {
      $('#container').highcharts({
          chart: {
              zoomType: 'xy'
          },
          title: {
              text: 'Average Monthly Temperature and Rainfall in Tokyo'
          },
          subtitle: {
              text: 'Source: WorldClimate.com'
          },
          xAxis: [{
              categories: '{{chart_x}}',
              crosshair: true
          }],
          yAxis: [{ // Primary yAxis
              labels: {
                  format: '{value}°C',
                  style: {
                      color: Highcharts.getOptions().colors[1]
                  }
              },
              title: {
                  text: 'Temperature',
                  style: {
                      color: Highcharts.getOptions().colors[1]
                  }
              }
          }, { // Secondary yAxis
              title: {
                  text: 'Rainfall',
                  style: {
                      color: Highcharts.getOptions().colors[0]
                  }
              },
              labels: {
                  format: '{value} mm',
                  style: {
                      color: Highcharts.getOptions().colors[0]
                  }
              },
              opposite: true
          }],
          tooltip: {
              shared: true
          },
          legend: {
              layout: 'vertical',
              align: 'left',
              x: 120,
              verticalAlign: 'top',
              y: 100,
              floating: true,
              backgroundColor: (Highcharts.theme &amp;&amp; Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
          },
          series: [{
              name: 'Rainfall',
              type: 'column',
              yAxis: 1,
              data: {{chart_y1}},
              tooltip: {
                  valueSuffix: ' mm'
              }
  
          }, {
              name: 'Temperature',
              type: 'spline',
              data: {{chart_y2}},
              tooltip: {
                  valueSuffix: '°C'
              }
          }]
      });
  });
  &lt;/script&gt;
  {% endblock %}
  {% block content %}
  &lt;h2&gt;first chart&lt;/h2&gt;
  &lt;div id="container" style="height: 300px"&gt;&lt;/div&gt;
  
  
  
  {% endblock %}
  </code></pre>
  
  <p>and in the view.py:</p>
  
  <pre><code>@app.route('/test3')
  def test3():
      return render_template("test3.html",
                             title='test3',
                             chart_x=['2014-04-11','2014-04-14','2014-04-15','2014-04-16','2014-04-17','2014-04-18','2014-04-21','2014-04-22','2014-04-23','2014-04-24','2014-04-25','2014-04-28'],
                             chart_y1=[49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                             chart_y2=[7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                             )
  </code></pre>
  
  <p>The plot I get is like:</p>
  
  <p><a href="https://i.stack.imgur.com/8PYkK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8PYkK.png" alt="enter image description here"></a></p>
  
  <p>As you could see, the x axis is not labeled as date, and I am not sure how to set it properly. Anyone could help?</p>