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

[keyankarthi]

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

[Durga Gopalakrishnan]

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]

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]

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]

From: Karthi Keyan  

Sent: Wednesday, March 4, 2020 5:28 AM
To: Syncfusion Support <[email protected]>
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]

From: Karthi Keyan 

Sent: Wednesday, March 4, 2020 5:47 AM
To: Syncfusion Support <[email protected]>
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]

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]

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]

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]

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