mapping between ejChart json and XlsIO chart properties

[Mike Smith]

Before investing a lot of time in mapping XlsIO chart attributes to ejChart json, I wanted to find out if anyone has done this before? If so could you make the mapping available? 

Here are two example attributes in each component to show what I'm trying to do:

XlsIO Chart	ejChart json
_worksheet.Charts[0].ChartTitle="Sales Comparison"	title:{text: 'Sales Comparsion'},...
_worksheet.Charts[0].Series[0].Name="Apple"	series: [{points: [...],... name: 'Apple',fill:"#1ABC9C"},...

Thanks, -Mike

[Mike Smith]

I'm trying to get local data (not remote data) to work with the DataManager that is consistent with various examples in the documentation. However, I'm getting this error but clearly the query is getting executed. Can you provide an example of using json in local data with DataManager. Eventually I want to pass remote json from my controller. Thanks,

Uncaught DataManager - executeQuery() : A query is required to execute

Error: DataManager - executeQuery() : A query is required to execute

    at u (http://localhost:49339/Scripts/ej/ej.web.all.min.js:10:58862)

    at Object.t.DataManager.executeQuery (http://localhost:49339/Scripts/ej/ej.web.all.min.js:10:14296)

...

    at http://localhost:49339/TestChart2.html:52:34 

dataVal = [

                { "FoodName": "CHEESE BURGER", "Calorie": 100, "Protein": 15, "Fat": 15 },

                { "FoodName": "PIZZA", "Calorie": 100, "Protein": 15, "Fat": 9 },

                { "FoodName": "CHICKEN NOODLE", "Calorie": 50, "Protein": 4, "Fat": 2 },

                { "FoodName": "YOGURT", "Calorie": 75, "Protein": 10, "Fat": 2 },

                { "FoodName": "BEEF SANDWICH", "Calorie": 125, "Protein": 22, "Fat": 13 }

            ];

            var dataManager = ej.DataManager(dataVal);

            var query = ej.Query()

                .select(["FoodName", "Calorie", "Protein", "Fat"]);

           

            dataManager.executeQuery(query) // executing query

                .done(function (e) {

            });

            $("#chartcontainer").ejChart({    

                series: [{

                        dataSource: dataManager,

                        xName: 'FoodName',

                        yName: 'Calorie',

                        type:'column'

                    },

                    {

                        dataSource: dataManager,

                        xName: 'FoodName',

                        yName: 'Protein',

                        type: 'column'

                    }

                ],                                             

            });

[Mike Smith]

Also this code is giving the same error where I try to get remote data in a url:

var dataManager = new ej.DataManager({

                url: "/Charts/GetChartLineData"

            });

            //var dataManager = ej.DataManager(dataVal);

            var query = ej.Query()

                .select(["FoodName", "Calorie", "Protein", "Fat"]);

            var data;

            dataManager.executeQuery(query) // executing query

                .done(function (e) {

                data = e.result;

            });

            $("#chartcontainer").ejChart({    

                series: [{

                        dataSource: dataManager,

                        xName: 'FoodName',

                        yName: 'Calorie',

                        type:'column'

                    },

                    {

                        dataSource: dataManager,

                        xName: 'FoodName',

                        yName: 'Protein',

                        type: 'column'

                    }

                ],                      

            });

Attachment: TestChart2_dd5a4ea8.zip

[Akbar Basha K M]

Hi Mike,

Thanks for using syncfusion product. We have analyzed your requirements,

Query #1: Mapping XlsIO chart attributes to ejChart json?

Response : We have prepared a document based on your requirement. Please find the attached document.

We have implemented 3D chart feature and it will be available in upcoming release Volume 3 which will be expected to rolled out on mid of October 2014. So, we cannot add 3D related properties in attached document.

Please find following UG Document in following location,

http://help.syncfusion.com/web

Please select chart it will be more helpful to create chart and chart functionalities.

If you want to know the API Reference please refer the following location:

http://help.syncfusion.com/cr/js

and please select chart.

Query #2: I'm getting the error when using localdata with datamanager?

Response: We are analyzing on this reported and we will let you know the status of this in one business day. {14^th Oct 2014}.

Regards,

Akbar Basha KM.

Attachment: mapping_150acbfc.zip

[Akbar Basha K M]

Hi Mike,

Thanks for your patience. We have analyzed your requirement with your code and we like to inform you that you need set the query within series as follows,

Code Snippet[JS]:

series: [{

name:'series1',

dataSource: dataManager,

xName: 'FoodName',

yName: 'Calorie',

query: query,

type:'column'},

{

name:'series2',

dataSource: dataManager,

xName: 'FoodName',

yName: 'Protein',

query: query,

type: 'column'}],

We have modified your attached sample. Please find the sample under the following location,

Sample Location:

Please let us know if you have any concern.

Thanks,

Akbar Basha KM.

Attachment: data_39e0d12b.zip

[Mike Smith]

Thanks for this. I extended your example a little and have a question about the number of callbacks to my controller action. It seems that there are multiple calls to my controller action. There is one call for the executeQuery statement. There are 3 calls for the ejChart statement - one for each series. Is there any way to minimize the number of times this call is made since it retrieves all of the data for all of the series each time?

1.  var dataManager = ej.DataManager(

            {

                url: "/Charts/GetChartLineData"

            }

        );

dataManager.executeQuery(query)

            .done(function (e) {

            });

1 callback to GetChartLineData

2.  $("#container").ejChart(eval("("+$("#series").val()+")"));

3 callbacks to GetChartLineData - one for each series ?

[Mike Smith]

Is it possible to bind the chart data:

$("#container").ejChart(eval("("+$("#series").val()+")"));

 

from the result array in the object passed to .done function ?

 dataManager.executeQuery(query)

            .done(function (e) {

            

        });

 instead of in the ejChart statement ?

[Akbar Basha K M]

Hi Mike,

Thanks for your update. We have analyzed your reuirement,

Query #1: Is there any way to minimize the number of times this call is made since it retrieves all of the data for all of the series each time?

Response : We can bind the different dataSources for each series so we have used this behaviour.

Query #2 : Is it possible to bind the chart data:

$("#container").ejChart(eval("("+$("#series").val()+")"));

 

from the result array in the object passed to .done function ?

Reponse: Yes it is possible to bind the data. in this case it callback to controller in one time.

Code Snippet[JS]:

 $(function () {

            var dataManager = ej.DataManager({

                url: "/Drilldown/GetChartData"

            });

            var query = ej.Query();

            dataManager.executeQuery(query)

                       .done(function (e) {

                           $("#container").ejChart({

                               series: [

                                       {

                                           name: 'series1',

                                           dataSource: e.result,

                                           xName: 'Value',

                                           yName: 'Text',

                                           query: query,

                                           type: 'column'

                                       },

                                       {

                                           name: 'series2',

                                           dataSource: e.result,

                                           xName: 'Text',

                                           yName: 'Value',

                                           query: query,

                                           type: 'column'

                                       }

                               ],

                           });

                          });

     });

We have prepared a sample based on this please find the attached sample.

Please let us know if you have any concern.

Regards,

Akbar Basha KM.

Attachment: MvcApplication2_76327a61.zip

[Mike Smith]

Thanks for this. Can you provide an example about the controller action returning different data for each series?

Query #1: Is there any way to minimize the number of times this call is made since it retrieves all of the data for all of the series each time?

Response : We can bind the different dataSources for each series so we have used this behaviour.

In the example, I see that both series are bound to the same datasource.

var query = ej.Query();

            dataManager.executeQuery(query)

                       .done(function (e) {

                           $("#container").ejChart({

                               primaryXAxis:{range:{min:0,max:100,interval:10}},

                               series: [

                                       {

                                           name: 'series1',

                                           dataSource: e.result,

                                           xName: 'Value',

                                           yName: 'Text',

                                           query: query,

                                           type: 'column'

                                       },

                                       {

                                           name: 'series2',

                                           dataSource: e.result,

                                           xName: 'Value',

                                           yName: 'Text',

                                           query: query,

                                           type: 'column'

                                       }

                               ],

                           });

                          });

[Akbar Basha K M]

Hi Mike,

 Thanks for your update. We have analyzed your requirement and we like to inform you that you can achieve this requirement by using bind the data to the chart in dataSource property  as follows,

 Code Snippet[JS]

series: [

                                       {

                                           name: 'series1',

                                           dataSource: e.result,

                                           xName: 'xValue',

                                           yName: 'yValue1',

                                           query: query,

                                           type: 'column'

                                       },

                                       {

                                           name: 'series2',

                                           dataSource: e.result,

                                           xName: 'xValue',

                                           yName: 'yValue2',

                                           query: query,

                                           type: 'column'

                                       },

                                       {

                                           name: 'series3',

                                           dataSource: e.result,

                                           xName: 'xValue',

                                           yName: 'yValue3',

                                           query: query,

                                           type: 'column'

                                       }

                               ], 

We have prepared a sample based on your requirement. Please find the attached sample,

Please let us know if you have any concern.

Regards,

Akbar Basha KM.

Attachment: Data_cac88e6a.zip