We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Binding chart to nested fields.

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');

1 Reply

BP Baby Palanidurai Syncfusion Team May 2, 2019 06:45 AM UTC

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:  
 
  
  
Kindly revert us, if you have any concerns. 
  
Regards, 
Baby.

Loader.
Live Chat Icon For mobile
Up arrow icon