Currently, I am working with Primeng and incorporating multiple charts into my view. One feature of Primeng that I have successfully implemented is disabling lines. I am following this particular example:
Primeng provides a handy function on their site:
selectData(event) {
this.msgs = [];
this.msgs.push({severity: 'info', summary: 'Data Selected','detail': this.data.datasets[event.element._datasetIndex].data[event.element._index]});
}
To scale up the charts using *ngFor in Angular:
<div class="container">
<div class="chart" *ngFor="let chartVal of data">
<app-chart [optionsIncome]="options" *ngIf="show"></app-chart>
</div>
</div>
Although this function disables the line for one chart, my goal is to disable it across all other charts as well. Referencing the image below:
https://i.sstatic.net/DhpDl.png
If I click on the First Dataset, I want the lines of other charts to be disabled. Is there a way to achieve this?
My start.compoment.hmtl
<input [(ngModel)]="inputValue" (ngModelChange)="reload()"/>
<select (change)="selectedItem($event)">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<div class="container">
<div class="chart" *ngFor="let chartVal of data;let i = index">
<app-chart #chart (click)="selectChart(i)" [optionsIncome]="options" *ngIf="show"></app-chart>
</div>
</div>
My start.component.ts looks like:
import { Component, OnInit, ViewChildren } from '@angular/core';
import {StartModel} from './start.model';
@Component({
selector: 'app-start',
templateUrl: './start.component.html',
styleUrls: ['./start.component.css']
})
export class StartComponent implements OnInit {
public data = [];
show = true;
options: any;
constructor() {
this.options = {
scales: {
yAxes: [{
ticks: {
min: 0,
max: 20
}
}]
}
};
}
ngOnInit() {
}
selectedItem(data) {
if (data) {
this.data.push(data);
this.reload();
}
const minMax = {min: Math.random() * -1, max: Math.random() * 1};
console.log(minMax.min, minMax.max)
this.options.scales.yAxes[0].ticks.min = minMax.min;
this.options.scales.yAxes[0].ticks.max = minMax.max;
}
reload () {
this.show = false;
setTimeout(() => this.show = true);
}
}
chart.component.html
<p-chart class="chart" type="line" [data]="data" [options]="options"></p-chart>
chart.component.ts looks like this:
import { Component, OnInit, Input, ViewChildren } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Component({
selector: 'app-chart',
templateUrl: './chart.component.html',
styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {
data: any;
msgs: any[];
options: any;
private _data = new BehaviorSubject({});
selectChartIndex = 0;
@Input() set optionsIncome(value) {
this._data.next(value);
}
get optionsIncome() {
return this._data.value;
}
constructor() {
this.data = null;
this.options = {};
}
ngOnInit() {
this.data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'First Dataset',
data: [0.01, 0.25, 0.26, 0.4, 0.4, 0.37, 0.25],
fill: false,
borderColor: '#4bc0c0'
},
{
label: 'Second Dataset',
data: [0.11, 0.15, 0.26, 0.2, 0.4, 0.27, 0.1],
fill: false,
borderColor: '#4bc0c0'
}
],
};
this.options = Object.assign({}, this.optionsIncome)
}
selectData(event) {
console.log(event.optionsIncome)
}
}