Fill Chart dynamically with variables from Component

i am new to Angular so i think i'm missing something.

i have 3 variables in my component, those variables are being filled after calling .subscribe method on an observable object.

like this

this.interRetard = this.technicienService.getInterRetard(id).subscribe(data => {

  this.interRetard = data;

});

the interRetard variable contains a number, i can display its value in the html by doing {{interRetard}} .

the problem is that when i try to display it with console.log() it says :

Subscriber {closed: false, _parent: null, _parents: null, _subscriptions: Array(1), syncErrorValue: null, …}

and i need it to give me the exact value like it is displaying it in the html so i can assign it to the chart like this

public doughnutChartData:number = [this.interRetard ,  5, 10];

Thank you.

asked Nov 21 '18 at 18:29

kmar akrout

419

1

You seem to be using this.interRetard 2 times. Once to hold the subscription returned by the subscribe, and again when you assign data to it inside the subscribe.

– R. Richards
Nov 21 '18 at 18:34

1

this.interRetard is being assigned twice in your statement. You only need to assign it inside the subscribe callback.

– Wrokar
Nov 21 '18 at 18:34

i removed it and something weird is happepning :/ when i do console.log(interRetard) it displayes undefined then when i trigger the method again (selection changed of a select box) it shows the right value :/ :/

– kmar akrout
Nov 21 '18 at 18:41

What is the type of your interRetard ?

– Rahul
Nov 21 '18 at 18:43

the type is any .. i have bad news also this is not working doughnutChartData:number = [this.interRetard ,this.interFinie,this.interAvance];

– kmar akrout
Nov 21 '18 at 18:46

add a comment |

i am new to Angular so i think i'm missing something.

i have 3 variables in my component, those variables are being filled after calling .subscribe method on an observable object.

like this

this.interRetard = this.technicienService.getInterRetard(id).subscribe(data => {

  this.interRetard = data;

});

the interRetard variable contains a number, i can display its value in the html by doing {{interRetard}} .

the problem is that when i try to display it with console.log() it says :

Subscriber {closed: false, _parent: null, _parents: null, _subscriptions: Array(1), syncErrorValue: null, …}

and i need it to give me the exact value like it is displaying it in the html so i can assign it to the chart like this

public doughnutChartData:number = [this.interRetard ,  5, 10];

Thank you.

asked Nov 21 '18 at 18:29

kmar akrout

419

1

You seem to be using this.interRetard 2 times. Once to hold the subscription returned by the subscribe, and again when you assign data to it inside the subscribe.

– R. Richards
Nov 21 '18 at 18:34

1

this.interRetard is being assigned twice in your statement. You only need to assign it inside the subscribe callback.

– Wrokar
Nov 21 '18 at 18:34

i removed it and something weird is happepning :/ when i do console.log(interRetard) it displayes undefined then when i trigger the method again (selection changed of a select box) it shows the right value :/ :/

– kmar akrout
Nov 21 '18 at 18:41

What is the type of your interRetard ?

– Rahul
Nov 21 '18 at 18:43

the type is any .. i have bad news also this is not working doughnutChartData:number = [this.interRetard ,this.interFinie,this.interAvance];

– kmar akrout
Nov 21 '18 at 18:46

add a comment |

i am new to Angular so i think i'm missing something.

i have 3 variables in my component, those variables are being filled after calling .subscribe method on an observable object.

like this

this.interRetard = this.technicienService.getInterRetard(id).subscribe(data => {

  this.interRetard = data;

});

the interRetard variable contains a number, i can display its value in the html by doing {{interRetard}} .

the problem is that when i try to display it with console.log() it says :

Subscriber {closed: false, _parent: null, _parents: null, _subscriptions: Array(1), syncErrorValue: null, …}

and i need it to give me the exact value like it is displaying it in the html so i can assign it to the chart like this

public doughnutChartData:number = [this.interRetard ,  5, 10];

Thank you.

asked Nov 21 '18 at 18:29

kmar akrout

419

i am new to Angular so i think i'm missing something.

i have 3 variables in my component, those variables are being filled after calling .subscribe method on an observable object.

like this

this.interRetard = this.technicienService.getInterRetard(id).subscribe(data => {

  this.interRetard = data;

});

the interRetard variable contains a number, i can display its value in the html by doing {{interRetard}} .

the problem is that when i try to display it with console.log() it says :

Subscriber {closed: false, _parent: null, _parents: null, _subscriptions: Array(1), syncErrorValue: null, …}

and i need it to give me the exact value like it is displaying it in the html so i can assign it to the chart like this

public doughnutChartData:number = [this.interRetard ,  5, 10];

Thank you.

angular typescript

asked Nov 21 '18 at 18:29

kmar akrout

419

asked Nov 21 '18 at 18:29

kmar akrout

419

asked Nov 21 '18 at 18:29

kmar akrout

419

asked Nov 21 '18 at 18:29

kmar akrout

419

asked Nov 21 '18 at 18:29

kmar akrout

419

1

You seem to be using this.interRetard 2 times. Once to hold the subscription returned by the subscribe, and again when you assign data to it inside the subscribe.

– R. Richards
Nov 21 '18 at 18:34

1

this.interRetard is being assigned twice in your statement. You only need to assign it inside the subscribe callback.

– Wrokar
Nov 21 '18 at 18:34

i removed it and something weird is happepning :/ when i do console.log(interRetard) it displayes undefined then when i trigger the method again (selection changed of a select box) it shows the right value :/ :/

– kmar akrout
Nov 21 '18 at 18:41

What is the type of your interRetard ?

– Rahul
Nov 21 '18 at 18:43

the type is any .. i have bad news also this is not working doughnutChartData:number = [this.interRetard ,this.interFinie,this.interAvance];

– kmar akrout
Nov 21 '18 at 18:46

add a comment |

1

You seem to be using this.interRetard 2 times. Once to hold the subscription returned by the subscribe, and again when you assign data to it inside the subscribe.

– R. Richards
Nov 21 '18 at 18:34

1

this.interRetard is being assigned twice in your statement. You only need to assign it inside the subscribe callback.

– Wrokar
Nov 21 '18 at 18:34

i removed it and something weird is happepning :/ when i do console.log(interRetard) it displayes undefined then when i trigger the method again (selection changed of a select box) it shows the right value :/ :/

– kmar akrout
Nov 21 '18 at 18:41

What is the type of your interRetard ?

– Rahul
Nov 21 '18 at 18:43

the type is any .. i have bad news also this is not working doughnutChartData:number = [this.interRetard ,this.interFinie,this.interAvance];

– kmar akrout
Nov 21 '18 at 18:46

You seem to be using this.interRetard 2 times. Once to hold the subscription returned by the subscribe, and again when you assign data to it inside the subscribe.

– R. Richards
Nov 21 '18 at 18:34

this.interRetard is being assigned twice in your statement. You only need to assign it inside the subscribe callback.

– Wrokar
Nov 21 '18 at 18:34

i removed it and something weird is happepning :/ when i do console.log(interRetard) it displayes undefined then when i trigger the method again (selection changed of a select box) it shows the right value :/ :/

– kmar akrout
Nov 21 '18 at 18:41

What is the type of your interRetard ?

– Rahul
Nov 21 '18 at 18:43

the type is any .. i have bad news also this is not working doughnutChartData:number = [this.interRetard ,this.interFinie,this.interAvance];

– kmar akrout
Nov 21 '18 at 18:46

add a comment |

1 Answer
1

active

oldest

votes

This should work:

   this.technicienService.getInterRetard(id).subscribe(data => {

      this.interRetard = data;

      console.log(this.iterRetard);

      this.myFunction(this.iterRetard) or this.myFunction(data);

    });



myFunction(p) {

// Your Logic //

}

edited Nov 21 '18 at 18:56

answered Nov 21 '18 at 18:50

alokstar

46927

yes i know this works .. but i need the variable outside the method subscribe so i can put it in an array and assign the array to a chart like this ... public doughnutChartData:number = [this.interRetard ,this.interFinie,this.interAvance];

– kmar akrout
Nov 21 '18 at 18:52

can you please explain your last comment .. i don't seem to get what u're saying

– kmar akrout
Nov 21 '18 at 18:55

I edited the answer, let me know if that answers your question!

– alokstar
Nov 21 '18 at 18:56

@kmarakrout: that comment was partial, so removed it!

– alokstar
Nov 21 '18 at 19:08

1

no problem .. i think your answer is working .. i'm trying something if it works perfectly i'll let you know .. thanks

– kmar akrout
Nov 21 '18 at 19:23

|
show 1 more comment

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418439%2ffill-chart-dynamically-with-variables-from-component%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

This should work:

   this.technicienService.getInterRetard(id).subscribe(data => {

      this.interRetard = data;

      console.log(this.iterRetard);

      this.myFunction(this.iterRetard) or this.myFunction(data);

    });



myFunction(p) {

// Your Logic //

}

edited Nov 21 '18 at 18:56

answered Nov 21 '18 at 18:50

alokstar

46927

yes i know this works .. but i need the variable outside the method subscribe so i can put it in an array and assign the array to a chart like this ... public doughnutChartData:number = [this.interRetard ,this.interFinie,this.interAvance];

– kmar akrout
Nov 21 '18 at 18:52

can you please explain your last comment .. i don't seem to get what u're saying

– kmar akrout
Nov 21 '18 at 18:55

I edited the answer, let me know if that answers your question!

– alokstar
Nov 21 '18 at 18:56

@kmarakrout: that comment was partial, so removed it!

– alokstar
Nov 21 '18 at 19:08

1

no problem .. i think your answer is working .. i'm trying something if it works perfectly i'll let you know .. thanks

– kmar akrout
Nov 21 '18 at 19:23

|
show 1 more comment

This should work:

   this.technicienService.getInterRetard(id).subscribe(data => {

      this.interRetard = data;

      console.log(this.iterRetard);

      this.myFunction(this.iterRetard) or this.myFunction(data);

    });



myFunction(p) {

// Your Logic //

}

edited Nov 21 '18 at 18:56

answered Nov 21 '18 at 18:50

alokstar

46927

yes i know this works .. but i need the variable outside the method subscribe so i can put it in an array and assign the array to a chart like this ... public doughnutChartData:number = [this.interRetard ,this.interFinie,this.interAvance];

– kmar akrout
Nov 21 '18 at 18:52

can you please explain your last comment .. i don't seem to get what u're saying

– kmar akrout
Nov 21 '18 at 18:55

I edited the answer, let me know if that answers your question!

– alokstar
Nov 21 '18 at 18:56

@kmarakrout: that comment was partial, so removed it!

– alokstar
Nov 21 '18 at 19:08

1

no problem .. i think your answer is working .. i'm trying something if it works perfectly i'll let you know .. thanks

– kmar akrout
Nov 21 '18 at 19:23

|
show 1 more comment

This should work:

   this.technicienService.getInterRetard(id).subscribe(data => {

      this.interRetard = data;

      console.log(this.iterRetard);

      this.myFunction(this.iterRetard) or this.myFunction(data);

    });



myFunction(p) {

// Your Logic //

}

edited Nov 21 '18 at 18:56

answered Nov 21 '18 at 18:50

alokstar

46927

This should work:

   this.technicienService.getInterRetard(id).subscribe(data => {

      this.interRetard = data;

      console.log(this.iterRetard);

      this.myFunction(this.iterRetard) or this.myFunction(data);

    });



myFunction(p) {

// Your Logic //

}

edited Nov 21 '18 at 18:56

answered Nov 21 '18 at 18:50

alokstar

46927

edited Nov 21 '18 at 18:56

answered Nov 21 '18 at 18:50

alokstar

46927

answered Nov 21 '18 at 18:50

alokstar

46927

answered Nov 21 '18 at 18:50

alokstar

46927

yes i know this works .. but i need the variable outside the method subscribe so i can put it in an array and assign the array to a chart like this ... public doughnutChartData:number = [this.interRetard ,this.interFinie,this.interAvance];

– kmar akrout
Nov 21 '18 at 18:52

can you please explain your last comment .. i don't seem to get what u're saying

– kmar akrout
Nov 21 '18 at 18:55

I edited the answer, let me know if that answers your question!

– alokstar
Nov 21 '18 at 18:56

@kmarakrout: that comment was partial, so removed it!

– alokstar
Nov 21 '18 at 19:08

1

no problem .. i think your answer is working .. i'm trying something if it works perfectly i'll let you know .. thanks

– kmar akrout
Nov 21 '18 at 19:23

|
show 1 more comment

yes i know this works .. but i need the variable outside the method subscribe so i can put it in an array and assign the array to a chart like this ... public doughnutChartData:number = [this.interRetard ,this.interFinie,this.interAvance];

– kmar akrout
Nov 21 '18 at 18:52

can you please explain your last comment .. i don't seem to get what u're saying

– kmar akrout
Nov 21 '18 at 18:55

I edited the answer, let me know if that answers your question!

– alokstar
Nov 21 '18 at 18:56

@kmarakrout: that comment was partial, so removed it!

– alokstar
Nov 21 '18 at 19:08

1

no problem .. i think your answer is working .. i'm trying something if it works perfectly i'll let you know .. thanks

– kmar akrout
Nov 21 '18 at 19:23

yes i know this works .. but i need the variable outside the method subscribe so i can put it in an array and assign the array to a chart like this ... public doughnutChartData:number = [this.interRetard ,this.interFinie,this.interAvance];

– kmar akrout
Nov 21 '18 at 18:52

can you please explain your last comment .. i don't seem to get what u're saying

– kmar akrout
Nov 21 '18 at 18:55

I edited the answer, let me know if that answers your question!

– alokstar
Nov 21 '18 at 18:56

@kmarakrout: that comment was partial, so removed it!

– alokstar
Nov 21 '18 at 19:08

no problem .. i think your answer is working .. i'm trying something if it works perfectly i'll let you know .. thanks

– kmar akrout
Nov 21 '18 at 19:23

|
show 1 more comment

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu