title: Setting Highcharts Series and Category data dynamically
body: <p>Im trying to update a chart via an AJAX call using the following code</p>
  
  <pre><code>$j(document).ready(function () {
      $j("#filter").click(function () {
          BuildReport();
      });
  
      $j("#container").highcharts({
          chart: {
              type: 'column',
              marginRight: 130,
              marginBottom: 100
          },
          title: {
              text: 'SEs open by Group',
              x: -20 //center
          },
          yAxis: {
              title: {
                  text: ''
              },
              min: 0,
              allowDecimals: false
          },
          xAxis: {},
          tooltip: {
              formatter: function () {
                  return '&lt;b&gt;' + this.x + '&lt;/b&gt;&lt;br/&gt;' +
                              this.series.name + ': ' + this.y + '&lt;br/&gt;' +
                              'Total: ' + this.point.stackTotal;
              }
          },
          plotOptions: {
              column: {
                  stacking: 'normal',
                  cursor: 'pointer',
                  }
              }
          },
          legend: {
              layout: 'vertical',
              align: 'right',
              verticalAlign: 'top',
              x: -10,
              y: 100,
              borderWidth: 0
          },
          series: {}
      });
  
      BuildReport();
  });
  
  function SetChartSeries(series) {
      debugger;
      chart = $j("#container").highcharts();
      chart.xAxis[0].setCategories(getReportCategories(series));
      chart.series = $j.map(series, function (item) {
          return {
              name: item.Name,
              color: item.Colour,
              data: $j.map(item.Items, function (list) {
                  return {
                      name: list.Category,
                      y: list.Value,
                      id: list.ID
                  };
              })
          };
      });
  }
  
  function getReportCategories(data) {
      var catArray = [];
      $j.each(data, function (index, value) {
          $j.each(value.Items, function (index, value) {
              if ($j.inArray(value.Category, catArray)) {
                  catArray.push(value.Category);
              }
          });
      });
  
      return catArray;
  }
  
  function BuildReport() {
      $j.ajax({
          url: "ChartDataHandler.ashx",
          dataType: "json",
          cache: false,
          success: function (data) {
              SetChartSeries(data.Series);
          }
      });
  }
  </code></pre>
  
  <p>When the page loads or the filter button is clicked BuildReport calls the handler and passes the series data to SetChartSeries. From here I can see that the chart properties are set, but the chart is never drawn. Am I doing something obviously wrong?</p>