title: HighChart with datetime on a-axis
body: <p>I don't know where I am making an error in this code.<br />What I need to do is to have a HighCharts drawing with the values from the data base. The values could change at anytime.<br />
  - The x-axis should be labeled like " Nov 30 " as the last point down to " Oct 30 " as the first point, that means 30 days ( I want to display the chart on 30 days only ). This is an example , the date can vary in time.
  - The JS is sending the request via ajax and the result is returned in json format. This is one of the row : <code>{"time":"2012-08-07 21:15:05","value_1":"1.241110","value_2":"1.241103"}</code>
  The graph has two lines ( value_1 and value_2 ) and all correspond to the same Time on the x-axis.<br />I read somewhere that I have to convert the format of the date to UTC. This is the function <br /></p>
  
  <pre><code>function get_and_display_data(symbol_1,price_1,period_1,bars_1,constraints_1){
  
  var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
  
  var options = {
      chart: {
          renderTo: 'graph',
          type: 'line',
          marginRight: 130,
          marginBottom: 25,
          reflow: false,
          borderWidth: 0
      },
      title: {
          text: 'Data',
          x: -20 //center
      },
      xAxis: {
          type:'datetime',
          dateTimeLabelFormats: {
              year: '%b \'%y'
          }
      },
      yAxis: {
          title: {
              text: 'This is a text !'
          },
          plotLines: [{
              value: 0,
              width: 1,
              color: '#808080'
          }]
      },
      tooltip: {
          formatter: function() {
              return '&lt;b&gt;'+ this.series.name +'&lt;/b&gt;&lt;br/&gt;'+
              Highcharts.dateFormat ('%A, %b %e, %Y', this.point.x) +': '+ this.y;
          }
      },
      legend: {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'top',
          x: -10,
          y: 100,
          borderWidth: 0
      },
      plotOptions: {
          series: {
              marker: {
                  enabled: false,
                  states: {
                      hover: {
                          enabled: true,
                          radius: 3
                      }
                  }
              }
          }
      },
      series: [{
          name: ''
          }, {
          name: ''
      }]
  }
  $.ajax({
      url: url_base+"show_page/graph_data.do",
      type: 'POST',
      data: 'symbol='+symbol_1+"&amp;price="+price_1+"&amp;period="+period_1+"&amp;bars="+bars_1+"&amp;constraints="+constraints_1,
      cache: false,
      dataType: "json",
      success: function(html) {
          var data_array = [];
          var data_1 = [];
          var data_2 = [];
          var i = 0;
          var time_x_axis = [];
          var sLegend = [];
          try{
              data_array = html;
              sLegend = price_1.split(',');
              if(html == null){
                  alert('No data was found. Try it again ');
              }else{
                  for(i=0;i&lt;data_array.length;i++)
                  {
                      time_x_axis[i] = data_array[i]['time'];
                      data_1[i] = '['+Date.UTC(time_x_axis[i].substr(0, 4), time_x_axis[i].substr(5,2), time_x_axis[i].substr(8,2), time_x_axis[i].substr(11,2), time_x_axis[i].substr(14,2), time_x_axis[i].substr(17,2))+','+parseFloat(data_array[i]['value_1'])+']';
                      data_2[i] = '['+Date.UTC(time_x_axis[i].substr(0, 4), time_x_axis[i].substr(5,2), time_x_axis[i].substr(8,2), time_x_axis[i].substr(11,2), time_x_axis[i].substr(14,2), time_x_axis[i].substr(17,2))+','+parseFloat(data_array[i]['value_2'])+']';                        
                  }
              }
          }catch(e){ }
          options.series[0].data = '['+data_1+']';
          options.series[0].name = sLegend[1];
          options.series[1].data = data_2;
          options.series[1].name = sLegend[2];
          chart = new Highcharts.Chart(options);
      }
  });}
  </code></pre>
  
  <p>Here I get result in html variable and affect them to Data_array[] . 
  Because the series data should be in the format <em>Data:[[],[],[]..[]]</em> , that is why I put *options.series[0].data = '['+data_1+']';* .<br />For *data_1[i]*, I have to substr the time to get the Year, Month, Day, Hour, Min and Sec.<br />
  What am I missing inside the code ?</p>