angular2 and charts.js interaction

I'm working currently with some charts from charts.js, i'm adding some simple interaction with them, when the user clicks a bar from a bar chart, a variable saves which bar was clicked.

This variable updates a line chart, this chart is updated with data previously saved in an array, so everytime the user clicks a different bar from the bar chart, the line chart should change.

My problem is that the variable doesn't change i get two different values.
By default the variable is initialized in 0.

Console log output:

from barchart click:3
from change function:0

from barchart click:2
from change function:0


I print these lines from 2 different functions that happen at the same time.

This is function that should change the variable value when the bar chart is clicked on a bar.

graphClickEvent(event:any, array:any){

if(array[0]){

this.offsetGraficas = array[0]._index;
console.log("from barchart click:"+this.offsetGraficas);
}

}


and this other function that happens at the same time:

changeHistorico(n:number) {
console.log("from change function:"+this.offsetGraficas);

this.show_historico = true;

//some unrelated code goes here
}


from what i see, graphClickEvent is executed first, but i don't se any change in the variable.
Why it doesn't work as intended?

2 Answers
2

Looks like "this" in graphClickEvent and "this" in changeHistorico are different this.

Yes, the this from within a click event is different from the this of the parent component.
Global variable is a way.

this

this

But a better solution would be to pass the component instance is the config of the chart.js graph.

this.dsChart2 = new Chart(myCtx2,{
type: 'pie',
parentInstance: this,
data: { ... }
options:{
onClick: this.graphClickEvent
}
}


Now when the graphClickEvent is called, you get two values, event and the chart Instance, from which you are already getting the index value.

graphClickEvent

So now from within the click event function, you can reference the parentInstance, as follows:

parentInstance

graphClickEvent(evt,item) {
console.dir(item);
let parentThis = item[0]['_chart']['config']['parentInstance'];
// here parentThis is the component this or $scope
parentThis.variable = value;
}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.