метки флота x оси, не привязанные к столбчатой ​​диаграмме на диаграмме. Изменение данных

Question

Я работаю над сложной гистограммой, которая перерисовывается по щелчку кнопки.

Я использую категорию плагина для отображения текстовых значений на оси х

Однако, когда гистограмма перерисовываются метки не сортируются в порядке.

http://jsfiddle.net/mxvhp9uo/5/

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 < items.length; i++) { 
      if (items[i].start_date == date) { 
       arrayToReturn.push(items[i]); 
      } 
     } 

     return arrayToReturn; 
    }; 
}); 

Answer 1

В плагине категорий есть строка, которая не позволяет воссоздать массив категорий. Линия 124 в https://github.com/EseMentie/flot/blob/master/jquery.flot.categories.js

if (!series[axis].categories) {-----} 

Я закомментировал, если условие и теперь категории этикетки пересчитывать каждый раз изменения диаграммы данных :)

См скрипку http://jsfiddle.net/mxvhp9uo/8/

Answer 2

Видимо метод chart.setupGrid() не пересчитывать этикетки категорий. Есть 2 способа исправить это:

1) Определение категорий в параметрах сюжета (см это fiddle):

xaxis: { 
    mode: "categories", 
    categories: ["Apr 01 2015","Apr 02 2015","Apr 06 2015","Apr 07 2015"], 
    tickLength: 0 
}, 

2) Создать новый сюжет каждый раз, когда вы изменяете данные (см это fiddle) :

scope.$watch(attrs.ngModel, function (v) { 
    chart = $.plot(elem, v, options); 
    elem.show(); 
});