title: How to draw HighChart XAxis dynamically
body: <p>I am drawing a highchart as-</p>
  
  <pre><code>options.series.push({ name: this.SubCity, data: this.Data });
  </code></pre>
  
  <p>where data is an array for series data.</p>
  
  <p>I also have an array for xAxis Categeries as-</p>
  
  <pre><code> Categ['Jan-Mar', 'Apr-Jun', 'Jul-Sep', 'Oct-Dec']
  </code></pre>
  
  <p>my chart is drawing correctly but problem with the xAxis categories
  is I don't know how to set categories dynamically .</p>
  
  <p>for more clarity i am adding some code-</p>
  
  <pre><code> var PriceTrend = JSON.parse(Data);
   var AvgRate = new Array();
   var Categories = new Array();
  
   $(PriceTrend).each(function (index)
          {
              MaxRate.push(this.Max);
              MinRate.push(this.Min);
              AvgRate.push((this.Max + this.Min) / 2);
              Categories.push(this.Quarter);
          });
  
  
          TrendData.push({ SeriesID: SeriesID, Data: AvgRate, Visible: true, SubCity: SubCity, Categ: Categories });
  
          DisplayTrend();
  
  
  function DisplayTrend()
  {
  options.series = [];
  
  $(TrendData).each(function (Index)
  {
      if (this.Visible)
      {
          options.series.push({ name: this.SubCity, data: this.Data });
      }
  });
  chart = new Highcharts.Chart(options);
  </code></pre>
  
  <p>}</p>