Angular ng2-chart shows the previous chart for the button click

Question

I'm totally new to Angular 5. I want to have drill down chart in my app. There are lots of options and for this project I want to use an open source library. So I'm using ng2-charts. By default ng2-chart doesn't support drill down charts. So what I did was, to click event I load a new data and a chart. This is what I tried.

component.ts

  export class ChartComponent{
  public clickBtn = false;
  data1:string;
  data2:string;
  label:string;
  previousBtnMsg:string;
  public chartClickTimes: number = 0;

 public barChartOptions:any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  public barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  public barChartType:string = 'bar';
  public barChartLegend:boolean = true;

  public barChartData:any[] = [
    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Type A'},
    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Type B'}
  ];

  public newDataValues:any[] = [
    {data: [40,37,50,70,50,34,50], label: 'Type A'},
    {data: [54,34,56,76,57,37,56], label: 'Type B'}
  ];

  // events
  public chartClicked(e:any):void {
    this.chartClickTimes =this.chartClickTimes + 1 ;
     this.clickBtn = true;

     if(e.active.length > 0) {

      this.previousBtnMsg = "Back to series";

      let newData1 = [40,37,50,70,50,34,50];
      let newData2 = [54,34,56,76,57,37,56];
      let newData3 = [35,36,45,64,43,23,33];
      let newData4 = [54,44,36,46,47,37,34];

      if(this.chartClickTimes ==1){
          let clone = JSON.parse(JSON.stringify(this.barChartData));
              clone[0].data = newData1;
              clone[1].data = newData2;
              this.barChartData = clone; 

      }else if(this.chartClickTimes ==2){
          let clone = JSON.parse(JSON.stringify(this.barChartData));
          clone[0].data = newData3;
          clone[1].data = newData4;
          this.barChartData = clone; 
      }
    } 

  }

  buttonClick(){
    console.log('Clicked')
  }


}

html

<div class="chart-display">
<div *ngIf="clickBtn">
  <button (click)="buttonClick(item)">{{previousBtnMsg}}</button>
</div>
  <div style="display: block">
    <canvas baseChart
            #baseChart="base-chart" 
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartClick)="chartClicked($event)"></canvas>
  </div>
</div>

When user goes for a new chart, it shows a Back button. How do I show the previous chart for that event ( buttonClick method)? Also labels are not updated. (I removed those codes) Can someone help me with this?

cantona_7 cantona_7 · Accepted Answer · 2018-03-15T08:58:40

I hope you did this

import { ChartsModule } from 'ng2-charts/ng2-charts';
import {RouterExtensions} from "nativescript-angular/router";

// In your App's module:
imports: [
ChartsModule
]

and then you can use to navigate according to your needs.

constructor(private router: RouterExtensions) { }
 navigateBack() {
    this.router.back();
 }

Please have a at ngx-charts demo.!

https://github.com/valor-software/ng2-charts/tree/development/demo/src/app/components/charts

Angular ng2-chart shows the previous chart for the button click

1 Answers