1

I am using NodeJS, Angular2, and the ng2-chartjs2. Below I listed the relevant parts of my code that is rendering charts. The data is loaded into this.data from an API using a fixed date range. I would like to allow the user to select a date range and then update the chart. From here I know that you can call update() on the chart object to update the data in it, but I don't know how to get a hold of the chart object, since the component code never actually has a reference to it - it's done automagically when the template is rendered. Looking at the source code (line 13) I see that the author intended to make the object available. I contacted the author but haven't received a response yet and need to get moving. I have learned a lot about Angular2 but am no expert yet, so perhaps a deeper understanding of Angular2 makes this obvious. How can I either get access to the object to call update() on it, or do it some other clean way?

The template contains

    <chart [options]="simple.options"></chart>

and the component typescript code contains

import { ChartComponent } from 'ng2-chartjs2';
...

@Component({
    selector: 'home',
    templateUrl: 'client/components/home/home.component.html',
    styleUrls: ['client/components/home/home.component.css'],
    directives: [DashboardLayoutComponent, CORE_DIRECTIVES, ChartComponent],
    pipes: [AddCommasPipe],
})

...

setCurrentSimpleChart = (simpleType: number): void => {
    this.simple.options = {
        type: 'line',
        options: this.globalOptions,
        data: {
            labels: this.data[simpleType].labels,
            datasets: [{
                label: this.titles[simpleType],
                data: this.data[simpleType].data,
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255,99,132,1)',
                borderWidth: 1
            }],
        },
    };

    ...
}

Update: In case this helps anyone: I actually have two different charts on the page, so I googled around based on the accepted answer and found ViewChildren, and mapped them to different variables so I can update them both separately, with 

[this.simpleChart, this.liftChart] = this.chartComponents.toArray().map(component => component.chart);

(Note also that this was using an rc of angular2 - since then directives, etc have been moved out of the components themselves.)

Arun kumar
  • 1,535
  • 3
  • 12
  • 17
Dovev Hefetz
  • 1,346
  • 14
  • 21

1 Answers1

2

You can hold reference to component by using ViewChild:

@ViewChild(ChartComponent) chartComp;

And then you can get chart object:

let chart = this.chartComp.chart;

Here is the corresponding plunker

yurzui
  • 205,937
  • 32
  • 433
  • 399
  • Thank you. In case this helps anyone: I actually have two different charts on the page, so I googled around based on your answer and found ViewChildren, and mapped them to different variables so I can update them both separately, with [this.simpleChart, this.liftChart] = this.chartComponents.toArray().map((component) => component.chart); – Dovev Hefetz Aug 04 '16 at 23:33
  • 1
    @DovevHefetz do you mind updating your question with your mappings to different variables? This will be helpful to others including me. – Mukus Nov 09 '16 at 04:11