title: flot x axis tick labels not aligned to stack bar chart on Change Data
body: <p>I am working on stacked bar chart that is redrawn on click of a button.</p>
  
  <p>I use the categories plugin to display textual values on the x axis</p>
  
  <p>However when the bar chart is redrawn the labels are not sorted in order.</p>
  
  <p><a href="http://jsfiddle.net/mxvhp9uo/5/" rel="nofollow">http://jsfiddle.net/mxvhp9uo/5/</a></p>
  
  <pre><code>var App = angular.module('App', []);
  
  App.controller('Ctrl', function ($scope) {
      var data2 = [{
          "label": "Passed",
              "color": "#27c24c",
              "data": [
              ["Apr 01 2015", 21],
              ["Apr 02 2015", 20],
              ["Apr 06 2015", 23],
              ["Apr 07 2015", 55]
          ]
      }, {
          "label": "Failed",
              "color": "#FFA500",
              "data": [
              ["Apr 01 2015", 21],
              ["Apr 02 2015", 2],
              ["Apr 06 2015", 10],
              ["Apr 07 2015", 27]
          ]
      }]
  
      var data1 = [{
          "label": "Passed",
              "color": "#27c24c",
              "data": [
              ["Apr 06 2015", 23],
              ["Apr 07 2015", 55],
              ]
      }, {
          "label": "Failed",
              "color": "#FFA500",
              "data": [
              ["Apr 06 2015", 10],
              ["Apr 07 2015", 27],
              ]
      }];
  
      var arr1 = {
          "passdetails": [{
              "test_id": 6,
                  "product": "Magento",
                  "suite_id": "3",
                  "suite_name": "Feature Tests",
                  "start_date": "Apr 06 2015",
                  "test_name": "Check Calculate and Compare Deal Percentage",
                  "totalpasses": 3,
                  "time_taken": 32767,
                  "browser_used": "chrome"
          }, {
              "test_id": 6,
                  "product": "Magento",
                  "suite_id": "3",
                  "suite_name": "Feature Tests",
                  "start_date": "Apr 07 2015",
                  "test_name": "Check Calculate and Compare Deal Percentage",
                  "totalpasses": 8,
                  "time_taken": 32767,
                  "browser_used": "chrome"
          }],
              "faildetails": [{
              "test_id": 3,
                  "product": "Magento",
                  "suite_id": "3",
                  "suite_name": "Feature Tests",
                  "start_date": "Apr 06 2015",
                  "test_name": "Click Deal Buy Now Button and validate Cart",
                  "totalfails": 2,
                  "time_taken": 32767,
                  "browser_used": "chrome"
          }, {
              "test_id": 3,
                  "product": "Magento",
                  "suite_id": "3",
                  "suite_name": "Feature Tests",
                  "start_date": "Apr 07 2015",
                  "test_name": "Click Deal Buy Now Button and validate Cart",
                  "totalfails": 9,
                  "time_taken": 32767,
                  "browser_used": "chrome"
          }]
      }
      var arr2 = {
          "passdetails": [{
              "test_id": 3,
                  "product": "Magento",
                  "suite_id": "3",
                  "suite_name": "Feature Tests",
                  "start_date": "Apr 01 2015",
                  "test_name": "Check Calculate and Compare Deal Percentage",
                  "totalpasses": 3,
                  "time_taken": 32767,
                  "browser_used": "chrome"
          }, {
              "test_id": 1,
                  "product": "Magento",
                  "suite_id": "3",
                  "suite_name": "Feature Tests",
                  "start_date": "Apr 02 2015",
                  "test_name": "Check Calculate and Compare Deal Percentage",
                  "totalpasses": 8,
                  "time_taken": 32767,
                  "browser_used": "chrome"
          }],
              "faildetails": [{
              "test_id": 4,
                  "product": "Magento",
                  "suite_id": "3",
                  "suite_name": "Feature Tests",
                  "start_date": "Apr 01 2015",
                  "test_name": "Click Deal Buy Now Button and validate Cart",
                  "totalfails": 2,
                  "time_taken": 32767,
                  "browser_used": "chrome"
          }, {
              "test_id": 10,
                  "product": "Magento",
                  "suite_id": "3",
                  "suite_name": "Feature Tests",
                  "start_date": "Apr 02 2015",
                  "test_name": "Click Deal Buy Now Button and validate Cart",
                  "totalfails": 9,
                  "time_taken": 32767,
                  "browser_used": "chrome"
          }]
      }
      $scope.data = data1
  
      $scope.details = []
      $scope.plotdate = null
  
      $scope.arr = arr1;
      $scope.redraw = function () {
          $scope.data = data2
          $scope.arr = arr2;
      }
  });
  
  App.directive('chart', function () {
      return {
          restrict: 'EA',
          link: function (scope, elem, attrs) {
              var chart = null,
                  options = {
                      series: {
                          stack: true,
                          bars: {
                              show: true,
                              clickable: true,
                              barWidth: 0.1
                          }
                      },
                      axisLabels: {
                          show: true
                      },
                      xaxis: {
                          mode: "categories",
                          tickLength: 0
                      },
                      yaxis: {
                          axisLabel: 'Pass/Fail Count',
                          axisLabelUseCanvas: false,
                          axisLabelFontSizePixels: 12,
                          axisLabelPadding: 5
                      },
                      grid: {
                          hoverable: true,
                          clickable: true
                      }
                  }
              var data = scope[attrs.ngModel];
  
              var getKeyByValue = function (obj, value) {
                  for (var i in obj) {
                      if (obj.hasOwnProperty(i)) {
                          if (obj[i] === value) return i;
                      }
                  }
              }
  
              scope.$watch(attrs.ngModel, function (v) {
                  if (!chart) {
                      chart = $.plot(elem, v, options);
                      elem.show();
                  } else {
                      chart.setData(v);
                      chart.setupGrid();
                      chart.draw();
                  }
              });
              elem.bind("plotclick", function (event, pos, item) {
                  if (item) {
                      scope.show = false
                      console.log('ticks= ', item.series.xaxis.ticks)
                      console.log('Categories= ', item.series.xaxis.categories)
                      scope.plotdate = item.series.xaxis.ticks[item.dataIndex].label
                      scope.stats = item.series.label
                      switch (scope.stats) {
                          case 'Passed':
                              scope.details = scope.arr.passdetails;
                              break;
                          case 'Failed':
                              scope.details = scope.arr.faildetails;
                              break;
  
                      }
                  }
                  scope.$apply();
                  console.log('details= ', scope.details)
                  console.log('Plotdate= ', scope.plotdate)
                  console.log('Show= ', scope.show)
  
              });
  
          }
      }
  
  });
  App.filter('getdata', function () {
  
      return function (items, date) {
  
          var arrayToReturn = [];
          for (var i = 0; i &lt; items.length; i++) {
              if (items[i].start_date == date) {
                  arrayToReturn.push(items[i]);
              }
          }
  
          return arrayToReturn;
      };
  });
  </code></pre>