How to show list of data on flot bar chart click event with angularjs

Question

I am pretty new to angularjs and flot bar chart

I am trying to display filtered data in a list on click based on filters.

I have created a custom directive to plot the chart and a custom filter which I use with data gotten on the click method but the list is not displayed.

Please help take a look

http://jsfiddle.net/6h1gL2sh/22/

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,
                            align: "center"
                        }
                    },
                    axisLabels: {
                        show: true
                    },

                    xaxis: {
                        axisLabel: 'Test Dates',
                        axisLabelUseCanvas: true,
                        axisLabelFontSizePixels: 12,
                        axisLabelPadding: 5,
                        mode: "categories",
                        tickLength: 0
                    },
                    yaxis: {
                        axisLabel: 'Pass/Fail Count',
                        axisLabelUseCanvas: true,
                        axisLabelFontSizePixels: 12,
                        axisLabelPadding: 5

                    },
                    grid: {
                        hoverable: true,
                        clickable: true
                    }

                }
            var data = scope[attrs.ngModel];

            var getKeyByValue = function (obj, value) {
                for (var prop in obj) {
                    if (obj.hasOwnProperty(prop)) {
                        if (obj[prop] === value) return prop;
                    }
                }
            }


            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
                    scope.plotdate = getKeyByValue(item.series.xaxis.categories, item.dataIndex);
                    switch (item.series.label) {
                        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 in items) {
            if (items[i].start_date == date) {
                arrayToReturn.push(items[i]);
            }
        }

        return arrayToReturn;
    };
});

You should build a minimal code example. Your fiddle has over 1000 lines of JS and a lot of CSS, I have not enough time to read all of that. — Raidri
– Raidri, Commented Apr 13, 2015 at 19:52

Raidri · Accepted Answer · 2015-04-14 09:23:51Z

1

I finally fixed it. I was applying scope.$apply() in my case statement block.

I was also calling my expressions in a div outside the div that specifies the controller

See js Fiddle http://jsfiddle.net/6h1gL2sh/24/

 elem.bind("plotclick", function (event, pos, item) {
            if (item) {
                scope.show=false
                scope.plotdate= getKeyByValue(item.series.xaxis.categories, item.dataIndex);
                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)


        });


    }
}

edited Apr 14, 2015 at 9:23

Raidri

17.7k11 gold badges69 silver badges70 bronze badges

answered Apr 14, 2015 at 8:56

Ese

7310 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Raidri Over a year ago

Good, the first error I had also found, but not the second.

Collectives™ on Stack Overflow

How to show list of data on flot bar chart click event with angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related