Y- Axis data Aggregation.

[Manoj]

Hi Team,

is there anything in syncfusion angular chart , where user is putting text values in both the x and y axis, but wants that on y-axis there should be some aggregation on behalf 

of what selected in x-axis. Please find below example.

eg data {"Location": "Bostaon","Crime":"Theft"},{"Location": "Alabama","Crime":"Theft"},{"Location": "Alabama","Crime":"Theft"}

in chart in x-asis we could show location Boston,Alabama and on y Axia Theft  Boston -1, Alabama-2 by aggregating crime data.

Please let me know if you kneed more information.

Regards,

Manoj Rawat

[Srihari Muthukaruppan]

Hi Manoj, 

 

We can achieve your requirement using load event and axisLabelRender event in the chart. We have also prepared a sample for your reference. Please find the sample, code snippet and screenshot below. 

 

Sample: https://stackblitz.com/edit/angular-aebgof?file=app.component.ts 

 

Code Snippet: 

App.component.html: 

<ejs-chart style='display:block;' [chartArea]='chartArea' [width]='width' align='center' id='chartcontainer' 

            [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title' [tooltip]='tooltip' 

            (load)='load($event)' (axisLabelRender)="labelRender($event)"> 

            <e-series-collection> 

                <e-series [dataSource]='data' type='Column' xName='location' yName='count' width=2> 

                </e-series> 

            </e-series-collection> 

        </ejs-chart> 

 

// add your additional code here 

 

public data: Object[] = [ 

    { location: 'Bostaon', crime: 'Theft' }, 

    { location: 'Alabama', crime: 'Theft' }, 

    { location: 'Alabama', crime: 'Theft' } 

]; 

public labelRender(args: IAxisLabelRenderEventArgs): void { 

    if (args.axis.name == 'primaryYAxis') { 

      args.text = 'Theft'; 

    } 

  } 

   

  public load(args: ILoadedEventArgs): void { 

    const arr = this.data; 

    const convert = arr => { 

      const res = {}; 

      arr.forEach(obj => { 

        const key = `${obj.location}${obj['crime']}`; 

        if (!res[key]) { 

          res[key] = { ...obj, count: 0 }; 

        } 

        res[key].count += 1; 

      }); 

      return Object.values(res); 

    }; 

    args.chart.series[0].dataSource = convert(arr); 

  } 

 

// add your additional code here 

 

 

Screenshot: 

 

 

Let us know if you have any concerns. 

 

Regards, 

Srihari M