How to bind model to chart data from angular service to component asynchronous.

Question

How to bind model to chart data from angular service to component asynchronous.. Need an sample code link for it.

Durga Gopalakrishnan · Answer

Hi Karthikeyan, 
 
We have analyzed your query. We have prepared sample to bind data for chart using service. Please check with the below code snippet and sample. 
 
Code Snippet 
 




app.component.ts 
import { ChartDataService } from './chart-data.service'; 
@Component({ 
   providers: [ChartDataService] 
}) 
export class AppComponent { 
    public series1 : Object[] =[]; 
    public series2 : Object[] =[]; 
    public series3 : Object[] =[]; 
    constructor(public chartDataService: ChartDataService) { 
         this.series1 = ChartDataService.prototype.getData().series1; 
         this.series2 = ChartDataService.prototype.getData().series2; 
         this.series3 = ChartDataService.prototype.getData().series3; 
  } 
} 
 
Screenshot 
  
 
Sample 
https://stackblitz.com/edit/angular-ueq6vg-hb8xdj?file=app.component.ts 
 
Kindly revert us, if you have any concerns. 
 
Regards, 
Durga G

keyankarthi · Answer

Team, Thanks for your response.  In chartdata  service series 1,2,3 values are hard-coded.  We need sample code for chart data binding using promise object asynchronous call from angular service to api.  We need to populate chart data using promise from angular service. Share us the same code for it.

Durga Gopalakrishnan · Answer

Hi Karthikeyan, 
 
Sorry for inconvenience. 
 
We have analyzed your query.  We have used async and await method to get data from service for chart series in ngOnInit method. You can use service URL also to get the data based on your requirement. We have modified the sample and attached for your reference. Please check with below code snippet and sample. 
 
Code Snippet 
 




export class AppComponent implements OnInit{ 
    public data :Object[] =[]; 
    async ngOnInit(): Promise<void> { 
      let chartData = await ChartDataService.prototype.getData(); 
      this.data = chartData.series1; 
    } 
} 
 
Screenshot 
 
  
Sample 
https://stackblitz.com/edit/angular-ueq6vg-hiarfc?file=app.component.ts 
 
Kindly revert us, if you have any concerns. 
 
Regards, 
Durga G

Sarasilmiya Shahul Hameed · Answer

From: Karthi Keyan  
Sent: Wednesday, March 4, 2020 5:28 AMTo: Syncfusion Support <support@syncfusion.com>Subject: Re: Syncfusion support community forum 152046, How to bind model to chart data from angular service to component asynchronous., has been updated. 

Thanks. We got struck up with the below tooltip , don't know how to proceed. Kindly advise on this.  
 On Mouse hover of curve, major minor gridline ,x , y axis line i have to display the below message (Flow rate) as tooltip. Kindly Share us sample code using async/await for capturing the dummy data for the below tooltip so that we can bind our api data .
Mouse hover on curve: showing Flow rate as tooltip 
  

Mouse hover on x axis scale :(applicable to y axis scale too) showing tooltip 
  

Mouse hover on major and minor grid lines:showing tooltip

Sarasilmiya Shahul Hameed · Answer

From: Karthi Keyan 
Sent: Wednesday, March 4, 2020 5:47 AMTo: Syncfusion Support <support@syncfusion.com>Subject: Re: Syncfusion support community forum 152046, How to bind model to chart data from angular service to component asynchronous., has been updated. 
You can write and share us the code for the below requirement using the same data you can use it in the below link:  

https://stackblitz.com/edit/angular-ueq6vg-hiarfc?file=app.component.ts

Srihari Muthukaruppan · Answer

Hi Karthikeyan, 

We are analyzing your query and we will update the status within two business day(March 10, 2020). We appreciate your patience until then. 

Regards, 
Srihari M

keyankarthi · Answer

Thanks.  But make sure that on mouse hover I should pass the x and y CO ordinates using async and await to the api and bring the tool tip data and showing as tool tip throughout the chart area.  Everything should happen at run time on mouse hover using async and await.

Srihari Muthukaruppan · Answer

Hi Karthikeyan,  

Thanks for the update.  

We will consider your scenario and as stated earlier we will update the status within one business day(March 10, 2020). We appreciate your patience until then.  

Regards,  
Srihari M

Durga Gopalakrishnan · Answer

Hi Karthikeyan,

We have analyzed your query. From that, we would like to let you know that we can achieve your requirement using chartMouseMove event and tooltipRender event in the chart. Based on your requirement we have prepared a sample for your reference. In which on mouse hover throughout the entire chart area, we have displayed the x and y coordinates in the header text as currentX and currentY as shown in the screenshot. Please find the below sample, code snippet and screenshot.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TooltipCustomization1072159395.zip

Code Snippet:

Index.ts:

// add additional code here

public chartMouseMove(args: IChartEventArgs): void {

const mouseX = parseFloat(args['x']);

const mouseY = parseFloat(args['y']);

const xAxis = this.chart.series[0]['xAxis'];

const yAxis = this.chart.series[0]['yAxis'];

const rect = this.chart.series[0]['clipRect'];

const xVal = mouseX - rect.x;

const yVal = mouseY - rect.y;

const xSize = rect.width;

const ySize = rect.height;

this.actualXValue = !xAxis.isInversed ? xVal / xSize : (1 - (xVal / xSize));

this.actualXValue = this.actualXValue * (xAxis.visibleRange.delta) + xAxis.visibleRange.min;

this.actualYValue = yAxis.isInversed ? yVal / ySize : (1 - (yVal / ySize));

this.actualYValue = this.actualYValue * (yAxis.visibleRange.delta) + yAxis.visibleRange.min;

(this.chart.series[0].dataSource as object[]).push({ x: this.actualXValue, y: this.actualYValue });

}

public tooltipRender(args: ITooltipRenderEventArgs): void {

args.headerText = '<b>CurrentX :</b> ' + this.actualXValue.toFixed(2) + ' ' + '<b>CurrentY :</b> ' + this.actualYValue.toFixed(2);

}

// add additional code here

Screenshot:

If still this is not your exact requirement. Kindly revert us with more information which will be helpful for further analysis and provide you the solution sooner.

Regards,

Durga G