CODEWITHSUNDEEP
angularjs
user2656127
user2656127

Reputation: 665

Passing an array into a factory - AngularJS

So I am current building a line chart using Angles.js (an angular Wrapper for Chart.js) - which works really well, when using mock data.

Right now, using the mock data in the chartData factory - it works fine - the graph is drawn.

What I can't seem to do - is replace the mock data with the "real" data for each user, seen below in the users array. For each user, they have an activities array - which contains a seperate object for each activity they perform.

Right now I am using mock dates as well (date.js) - but what I would like to do is - within the chartData factory - replace the data: [] array with the users real activities array. For the labels, I am a little unsure how I will solve that, but am open to ideas!

Fiddle: http://jsfiddle.net/ADukg/4843/

var myApp = angular.module('myApp',[]);

function myCtrl($scope) {

    myApp.factory("chartData", function() {
    return {
        1: { //This key is the user id
            labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
            datasets: [{
                fillColor: "rgba(151,187,205,0)",
                strokeColor: "#e67e22",
                pointColor: "rgba(151,187,205,0)",
                pointStrokeColor: "#e67e22",
                data: [4, 3, 5, 4, 6] // Here I would like to pull the data from the user
            }]
        },
        2: { //This key is the user id
            labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
            datasets: [{
                fillColor: "rgba(151,187,205,0)",
                strokeColor: "#e67e22",
                pointColor: "rgba(151,187,205,0)",
                pointStrokeColor: "#e67e22",
                data: [4, 3, 5, 4, 6] // Here I would like to pull the data from the user
            }]
        },
        3: { //This key is the user id
            labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
            datasets: [{
                fillColor: "rgba(151,187,205,0)",
                strokeColor: "#e67e22",
                pointColor: "rgba(151,187,205,0)",
                pointStrokeColor: "#e67e22",
                data: [4, 3, 5, 4, 6] // Here I would like to pull the data from the user
            }]
        }
    }
});

$scope.competitionDetails = {
        users: [{
            id: 2,
            name: "John Thompson",
            totalPoints: 40,
            activities: [{ 
                id: 6431,
                time: (57).minutes().ago(),
                points: 20
            }, {
                id: 6431,
                time: new Date(),
                points: 20
            }]
        }, {
            id: 3,
            name: "Bob Andersson",
            totalPoints: 60,
            activities: [{ 
                id: 6431,
                time: (1).days().ago,
                points: 20
            }, {
                id: 6431,
                time: (2).days().ago,
                points: 20
            }, {
                id: 6431,
                time: new Date(),
                points: 20
            }]
        }, {
            id: 1,
            name: "Jimmy Smiths",
            totalPoints: 140,
            activities: [{
                id: 6431,
                time: (3).days().ago,
                points: 20
            }, {
                id: 6431,
                time: (10).days().ago,
                points: 20
            }, {
                id: 6432,
                time: new Date(),
                points: 100
            }]
        }]
    };
}

Upvotes: 0

Views: 566

Answers (1)

link64
link64

Reputation: 1976

You seem to have things backwards. You should be using your factory to retrieve your data into your scope, and then binding the chart data to a scope variable.

Your factories are not supposed to know anything about your controllers. The factory has methods that can be called from the controller. If your chart data and the actual data come from different sources, you should probably have two separate factories which return this information. You can then transform this data in to an object appropriate for use with the charting component.

Upvotes: 1

Related Questions