Wednesday, October 18, 2017

How to use function values for zingcharts in angularjs?

I have function for dynamically get the data and total for particular items. it is working fine. now i am trying to make a chart fro the data.

var app = angular.module("app", ['zingchart-angularjs']);app.factory('itemsFactory', function ($http) {
var factory = {};
factory.getItems = function () {
    return $http.get('.//davidstrans.json')
};
return factory: });
app.controller('UsersTransController', function ($scope, itemsFactory) {
itemsFactory.getItems().success(function (data) {
    $scope.users = data;
    $scope.items = groupBy($scope.users, "creditType");
    $scope.valuesOne = [];
    $scope.aValues = [$scope.valuesOne];
});

this is the function for dynamically seperate the types;

function groupBy(arr, key) {
    var newArr = []
        , types = {}
        , newItem, i, j, cur;
    for (i = 0, j = arr.length; i < j; i++) {
        cur = arr[i];
        if (!(cur[key] in types)) {
            types[cur[key]] = {
                type: cur[key]
                , data: []
            };
            newArr.push(types[cur[key]]);
        }
        types[cur[key]].data.push(cur);
    }
    return newArr;
};
Array.prototype.sum = function (prop) {
    var total = 0
    for (var i = 0, _len = this.length; i < _len; i++) {
        total += parseInt(this[i][prop])
    }
    return Math.abs(total);
    return total
}
$scope.totalCreadit = function (subtotal) {
    return subtotal.sum("credits");
    console.log(subtotal.sum("credits"));
}

In this function type[] is my group of list and data[] is my total this is working perfectly.

I need to convert this into a chart. how to use $scope.valuesOne= data[] as my values. i tried alot i’m not able to find it. can anyone help me?

html

<div ng-app="app" ng-controller="UsersTransController">
    <div style="height:100px">
        <ul>
            <li ng-repeat="j in items"> - </li>
        </ul>
    </div>
    <div zingchart id="chart-1" zc-json="myJson" zc-width="500px" zc-height="300px" zc-values="aValues"></div>

Source: AngularJS



from Angular Questions https://angularquestions.com/2017/10/18/how-to-use-function-values-for-zingcharts-in-angularjs/
via @lzomedia #developer #freelance #web #lzomedia.com

No comments:

Post a Comment