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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Binding chart to nested fields.

Thread ID:

Created:

Updated:

Platform:

Replies:

144337 May 1,2019 12:22 PM UTC May 2,2019 06:45 AM UTC JavaScript - EJ 2 1
loading
Tags: Chart
CHRISTOPHER KELLY
Asked On May 1, 2019 12:22 PM UTC

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 [Syncfusion]
Replied On 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.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon