DataManager Query and ExecuteQuery

[Albert K]

How do I manipulate data returned from the DataManager for a Chart with DataManager and Query.    For example 

 ```<e-series [dataSource]='myDataManager'  [query] = 'query'  type='Column' xName='Time' yName='L1' name='Lead 1'></e-series>```

The example below I am using the DataManager with executeQuery but this can take a few second to return and the chart is rendered empty as the data is not ready when the chart is loaded.

```

import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from "@angular/core";

import { ILoadedEventArgs, ChartComponent, IZoomingEventArgs, IScrollEventArgs } from '@syncfusion/ej2-angular-charts';

import {

  DataManager,

  Query,

  ReturnOption,

  WebApiAdaptor

} from "@syncfusion/ej2-data";

import { ActivatedRoute } from '@angular/router';

import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';

interface ServerData {

  idx: number;

  lead1: number;

  lead2: number;

  lead3: number;

  lead4: number;

}

interface DisplayData {

  Time: number;

  L1: number;

  L2: number;

  L3: number;

  L4: number;

}

@Component({

  selector: "app-vdata",

  templateUrl: ` `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'[primaryYAxis]='primaryYAxis' [title]='title'>

        <e-series-collection>

            <e-series [dataSource]='myDisplayData' type='Column' xName='Time' yName='L1' name='Lead 1'></e-series>

        </e-series-collection>

    </ejs-chart>`,

  styleUrls: ["./vdata.component.css"],

  changeDetection: ChangeDetectionStrategy.OnPush

})

export class VdataComponent implements OnInit {

 public SERVICE_URL: string ="https://www.myserver.com/api/data/vdata";

 public myManager: DataManager;

 public myDisplayData: DisplayData[] = []; 

 constructor( private activatedRoute: ActivatedRoute  ) {

    

    }

 ngOnInit() {

     this.myManager = new DataManager({

      url: SERVICE_URL,

      adaptor: new WebApiAdaptor(),

      headers: [{ Authorization: "bearer " + this.token }]

    }).executeQuery(new Query()).then((e: ReturnOption) => {

      var tempData = e.result as ServerData[];

      tempData.sort((a, b) => a - b);

      for(var d in tempData){

        var tempD = {} as DisplayData;

        tempD.Time = d.idx;

        tempD.L1 = d.lead1 * 10;

        tempD.L2 = d.lead2 * 1.5;

        tempD.L3 = d.lead3 * 11;

        tempD.L4 = d.lead4 * 13;  

        this.DisplayData.push(tempD);

      } ;

 

 }

}

```

[Durga Gopalakrishnan]

Hi Albert 

 

Greetings from Syncfusion. 

 

We have analyzed your query with provided snippet. By default, the chart will be rendered when datamanager url gets success. We are unable to open the provided url link. So we have assigned our url for datamanager and prepared sample, chart is rendering fine.  

 

Code Snippet 

 

<e-series-collection> 

                <e-series [dataSource]='data' type='Column' xName='CustomerID' yName='Freight' [query]='query' name='Story Point' width=2 [marker]='marker'> 

                </e-series> 

            </e-series-collection> 

 

public data: DataManager = new DataManager({ 

        url: 'https://ej2services.syncfusion.com/production/web-services/api/Orders' 

    }); 

public query: Query = new Query().take(5).where('Estimate', 'lessThan', 3, false); 

 

Screenshot 

 

 

Sample 

https://stackblitz.com/edit/angular-s18age-qzvntd 

Since we are unaware of your exact scenario in which an issue is reproduced, please share the following information which will be more helpful for further analysis and provide you the solution sooner. 

• Try to reproduce the reported scenario in the above sample.
• Please share your sample (or) code snippet with full configurations.
• Share the details if you have done any other customization in your sample.
• Share your data source file.
• Share your preview template version.

Kindly revert us, if you have any concerns. 

Regards, 

Durga G 

[Albert K]

Thanks for the sample.  But how do i transform the data that I get from the query before the chart display it?.

[Durga Gopalakrishnan]

Hi Albert, 

 

We have analyzed your query. We suggest you to use seriesRender event to change the data source before rendering the chart series. We have modified the provided sample for your reference. Please check with the below snippet and sample. 

 

Code Snippet 

 

<ejs-chart (seriesRender)='seriesRender($event)' > 

</ejs-chart> 

public seriesRender(args: ISeriesRenderEventArgs): void { 

        for(let i = 0; i< args.data.length; i++){ 

            args.data[i].Freight = args.data[i].Freight * 2; 

        } 

}; 

 

Screenshot 

 

 

 

Sample 

https://stackblitz.com/edit/angular-s18age-onenic 

If the provided solution doesn’t meet your requirement, please revert us with more information. 

Regards, 

Durga G