Data bind in button click event

Question

I'm using EJ2 Sync Fusion Charts with Angular 6 to create a scatter chart.

.html file

 <ejs-chart id="chart-container">
<e-series-collection>
      <e-series [dataSource]="series1" typeof="Scatter"name="Male"></e-series>
       <e-series [dataSource]="series2" typeof="Scatter" name="Female"></e-series>
  </e-series-collection>
</ejs-chart>
<div>
  <button ejs-button (click)="PlotChart()">Draw</button>
</div>

.ts File

import { Component, OnInit } from '@angular/core';
import { ChartData } from '../chartdata.service';

   export class ScatterComponent implements OnInit {

    public series1: Object;
    public series2: Object;
    public title: string;

    constructor() { }

    ngOnInit(): void {

     // this.PlotChart(); //-> this works!!
    }

    public PlotChart(): void {

      this.title = 'Height Vs Weight';
      this.series1 = ChartData.prototype.getScatterData().series1;
      this.series2 = ChartData.prototype.getScatterData().series2;

    }
  }

I'm using an external class(i.e. ChartData) to fetch data to my chart series. And if I invoke the PlotChart() method inside ngOnInit lifecycle hook the chart draws and it will not draw if it was directly triggered by the button click. Please note that data is still being retrieved as expected in both cases. It seems to me that chart series are not bounded unless it is called inside the ngOnInit().

title parameter binding works but the chart series binding only not working.

Would anyone tell me a solution for this?

Answer 1

I found a solution as follows. The problem was chart had not been refreshed after setting the data source to the chart series. Below is the modified code.

.html

  <ejs-chart #chart id="chart-container">
<e-series-collection>
      <e-series [dataSource]="series1" typeof="Scatter"name="Male"></e-series>
       <e-series [dataSource]="series2" typeof="Scatter" name="Female"></e-series>
  </e-series-collection>
</ejs-chart>
<div>
  <button ejs-button (click)="PlotChart()">Draw</button>
</div>

Change: Added #chart to access the chart element in a component class

Following are the changes in component class.

   import { ViewChild } from '@angular/core';

        export class ScatterComponent {
          @ViewChild('chart')
          public chart: Chart;

         public PlotChart(): void {

         this.chart.series[0].dataSource = ChartData.prototype.getScatterData().series1;
            this.chart.series[1].dataSource = ChartData.prototype.getScatterData().series2;
            this.chart.refresh();
               }
        }