Dynamic p-chart

[csliston]

Hi,
I'm trying to create a dash board that will have small version of charts on them. I would like to be able to have the charts clickable and pop-up a larger dialog with the chart. So far I have everything working put the chart that pop-up I can't seem to up date.

Code: Select all

<p-chart type="line" height="250" [data]="data30NC" [options]="options30NC" (click)="showChart('30NC')"></p-chart>

This is one of many charts being display, I added the click method which works for showing the dialog.

The dialog with the generic chart in it.

Code: Select all

<p-dialog header="Title" [(visible)]="displayChart">
    <p-chart #dialogChart type="line" [(data)]="dataDiaglogChart" [(options)]="optionsDialogChart"></p-chart>
</p-dialog>

I tried setting the data in the generic chart to the data I want to display but no chart is displayed at all because it was blank on rendering so it is not updating. I am seeing the console log message so I can only assume the data is getting set.

Code: Select all

showChart(chart: string) {
        if (chart === '30NC') {
            console.log('Set Chart Data 30NC');
            this.dataDiaglogChart = this.data30NC;
            this.optionsDialogChart = this.options30NC;
        }

        this.displayChart = true;
}

[csliston]

Figured it out.

I could set the options dynamically I had to set options in order to display the chart.