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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

mapping between ejChart json and XlsIO chart properties

Thread ID:

Created:

Updated:

Platform:

Replies:

117386 Oct 10,2014 01:47 AM UTC Nov 3,2014 12:28 PM UTC JavaScript 9
loading
Tags: ejChart
Mike Smith
Asked On October 10, 2014 01:47 AM UTC

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
Replied On October 12, 2014 01:14 AM UTC

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
Replied On October 12, 2014 02:31 PM UTC

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 [Syncfusion]
Replied On October 13, 2014 01:49 PM UTC

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. {14th Oct 2014}.

Regards,

Akbar Basha KM.


Attachment: mapping_150acbfc.zip

Akbar Basha K M [Syncfusion]
Replied On October 14, 2014 09:17 AM UTC

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
Replied On October 23, 2014 11:25 AM UTC

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
Replied On October 23, 2014 12:30 PM UTC

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 [Syncfusion]
Replied On October 25, 2014 09:49 AM UTC

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
Replied On October 31, 2014 08:51 AM UTC

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 [Syncfusion]
Replied On November 3, 2014 12:28 PM UTC

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

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.

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

;