Binding chart to nested fields.

[CHRISTOPHER KELLY]

When trying to bind to nested fields, the chart control does not work. What is the trick to getting it working?

            var chartData = _DataManager.executeLocal(new ej.data.Query()

                .where('group.dnis.length', 'equal', 12)

                .select(['group.DNIS_Campaign', 'group.dnis as dnis', 'flattenedMetrics.nOffered_count as nOffered_count', 'flattenedMetrics.tIvr_count', 'flattenedMetrics.tAnswered_count'])

                .sortBy('group.DNIS_Campaign')

            );

            new ej.charts.Chart({

                primaryXAxis: {

                    valueType: 'Category',

                    title: 'Campaign',

                    labelRotation: 45

                },

                primaryYAxis: {

                    title: 'Call Count'

                },

                series: [{

                    dataSource: chartData,

                    xName: 'group.DNIS_Campaign', yName: 'flattenedMetrics.tIvr_count',

                    name: 'IVR', type: 'Column'

                }, {

                    dataSource: chartData,

                    xName: 'group.DNIS_Campaign', yName: 'flattenedMetrics.nOffered_count',

                    name: 'Offered', type: 'Column'

                }, {

                    dataSource: chartData,

                    xName: 'group.DNIS_Campaign', yName: 'flattenedMetrics.tAnswered_count',

                    name: 'Answered', type: 'Column'

                }],

                title: 'Calls by Campaign',

                //Zooming for chart

                zoomSettings:

                {

                    enableSelectionZooming: true,

                    enableScrollbar: true,

                    enableMouseWheelZooming: true,

                    enablePinchZooming: true,

                    //toolbar items for zooming toolkit

                    toolbarItems: ['Zoom', 'Pan', 'Reset']

                },

            }, '#Chart');

[Baby Palanidurai]

Hi Christopher, 

  

Greetings from Syncfusion. 

  

We have analyzed your query. Your requirement has been achieved by using enableComplexProperty in series options. Based on your requirement, we have prepared a sample. 

  

Please find the below code snippet to achieve this requirement, 

  

export var data = [ 

  {group: { x: 'Aaa', y: 10}, y: 20}, 

  {group: { x: 'Baa', y: 30}, y: 10} 

] 

  

  

series: [ 

            { 

                type: 'Column', 

                dataSource: data, 

                enableComplexProperty: true, 

                xName: 'group.x', yName: 'group.y', 

            }, 

             { 

                type: 'Column', 

                dataSource: data, 

                enableComplexProperty: true, 

                xName: 'group.x', yName: 'y', 

            }, 

        ] 

  

Screenshot:  

 

  

Sample link: https://stackblitz.com/edit/jdhw92?file=index.js 

  

Kindly revert us, if you have any concerns. 

  

Regards, 

Baby.