Clever Geek Handbook

How to redraw a float diagram in angularjs?

I am using Angularjs charting diagram to draw a stacked bar chart. When I make an asynchronous call to an endpoint to get data for a chart, it cannot be displayed. I suspect he needs to redraw. There is a draw () function that looks like re draws flot chart. Please help me redraw my fleet map in Angularjs.

<flot dataset="tasksRunData" options="tasksRunChartOptions" class="center-block" width="100%" height="400px" id="reportTasksRunRange.id"></flot>

angular.module('myApp').controller('Step2Controller', function($scope, $location, $interval, dialogs, $modal, $transition, ReportingService) {

    ...

    $scope.tasksRunData = mainArray;
    $scope.tasksRunChartOptions = {
        legend: {
            show: true,
            margin: 2
        },
        xaxis: {
            ticks: yaxisArray,
            alignTicksWithAxis: "right"
        },
        grid: {
            labelMargin: 10,
            hoverable: true,
            borderWidth: 0
        },
        series: {
            stack: true
        },
        colors: colorCodesArray,
        tooltip: true
    };

    ...
    $scope.redrawTasksRunDataHistoByChart();
    ...

    $scope.redrawTasksRunDataHistoByChart = function() {
        $scope.tasksRunData.draw(); //TypeError: undefined is not a function
        alert("AAAA");
    }
});

Update

ReportService.getTasksRunDateHistoByType().then(function(result) {
    $scope.renderTasksRunDateHistoByType(result);
});

$scope.renderTasksRunDateHistoByType = function(jsonInput) {
            console.log(json[RUN_AGG_BY_DATE_HISTO].aggregations[TASK_TYPE_AGG].buckets);
    var yaxis = [];
    var buckets = json[RUN_AGG_BY_DATE_HISTO].aggregations[TASK_TYPE_AGG].buckets;
    var log = [];
    var mainArray = [];
    var colorCodes = ["#5C832F","#7B52AB","#263248","#AB1A25","#FF8598","#AB1A25","#FEB41C","#193441","#193441","#BEEB9F","#E3DB9A","#917A56"],
        idx = 0;
    angular.forEach(buckets, function(value, key) {        
        this.push(key + ': ' + value +", "+value["key"]);
        var dataArray = [], index = 0;
        console.log(JSON.stringify(value[RUN_OVER_TIME_KEY]["buckets"]));
        angular.forEach(value[RUN_OVER_TIME_KEY]["buckets"], function(value, key) {
            var dataArr = [];
            dataArr.push('['+index+', '+value["doc_count"]+']');
            dataArray.push(dataArr);

            yaxis.push(JSON.parse('['+index+', "'+$scope.translate(value["key"])+'", "'+value["key"]+'"]'));

            index++;
        }, log);
        var barObject = '"bars": {"show": "true", "barWidth":0.8, "fillColor": "'+colorCodes[idx]+'", "order": 1, "align": "center"}';
        var object = '{ "data": ['+dataArray+'], "label": "'+value["key"]+'", '+barObject+'}';
        mainArray.push(JSON.parse(object));
        idx++;
    }, log);

    console.log(yaxis);
    $scope.tasksRunData = mainArray;
    $scope.tasksRunChartOptions = {
        legend: {
            show: true,
            margin: 2
        },
        xaxis: {
            //ticks:[[0,'Oct 4'],[1,'Oct 5'],[2,'Oct 6'],[3,'Oct 7'],[4,'Oct 8'],[5,'Oct 9']],
            ticks: yaxis,
            alignTicksWithAxis: "right"
        },
        grid: {
            labelMargin: 10,
            hoverable: true,
            borderWidth: 0
        },
        series: {
            stack: true
        },
        colors: colorCodes,
        tooltip: true
    };
};

angularjs service

angular.module('myApp')
    .service('ReportService', function ReportService($http, $q) {

        var getTasksRunDateHistoByType = function() {
            var deferred = $q.defer();
            $http({
                method: 'POST',
                url: "http://localhost:4040/reports/taskRun",
                data: '{ "client_user_info": { "client_id": "MU03"}}'
            }).
            success(function(result, status, headers, config) {
                deferred.resolve(result);
            }).
            error(function(result, status, headers, config) {
                console.log("Error");
            });
            return deferred.promise;
        };

        return {
            getTasksRunDateHistoByType: getTasksRunDateHistoByType
        };
    });
+3


source to share


1 answer


Looking at the source code for the directive, it will automatically redraw when changed $scope.dataset

.

  $scope.redrawChart = function() {
    var tmp = [];
    for (var i = 0; i < 10; i++){
      tmp.push([i,Math.random() * 10]);
    }
    $scope.dataset = [{ data: tmp }];
  };

Here's an example .

EDIT UPDATES



It's hard for me to follow your code, but at the end you will end up $scope.renderTasksRunDateHistoByType

with data in a variable jsonInput

. Then you store some variable mainArray

(which doesn't exist as far as I can tell) into other level variables $scope

. I've never seen you return data back to $scope.dataset

. This is what the float directive looks to trigger a redraw. It's just that simple.

   $scope.renderTasksRunDateHistoByType = function(jsonInput) {
      $scope.dataset = [{
        data: jsonInput
      }];

      //console.log(jsonInput);
      //$scope.tasksRunData = mainArray;
      //$scope.tasksRunChartOptions
      //getting data here once response is received from server
    };

See updates here .

+3


source






More articles:


All Articles