flot x axis tick labels not aligned to stack bar chart on Change Data

1
votes

I am working on stacked bar chart that is redrawn on click of a button.

I use the categories plugin to display textual values on the x axis

However when the bar chart is redrawn the labels are not sorted in order.

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;
    };
});
2
javascriptangularjsflot
@Raidiri I really need to learn how to format the code part. I fixed it though. – Ese
All code has to be indented at least 4 spaces. If you have your code in a fiddle you can select all and use the Tab key once to indent it all. There is also the TidyUp button on the fiddle size which can help make the code more readable. – Raidri

2 Answers

1
votes

There is a line in the categories plugin that does not allow the categories array to be recreated. Line 124 in https://github.com/EseMentie/flot/blob/master/jquery.flot.categories.js

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

I commented out the if condition and now the categories labels recompute everytime the chart data changes :)

See fiddle http://jsfiddle.net/mxvhp9uo/8/

0
votes

Apparently the chart.setupGrid() method does not recompute the category labels. There are 2 ways to fix this:

1) Define the categories in your plot options (see this fiddle):

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

2) Create a new plot everytime you change the data (see this fiddle):

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