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

Chart and Grid linking

Thread ID:

Created:

Updated:

Platform:

Replies:

119539 Jul 6,2015 06:01 PM UTC Aug 5,2015 05:09 AM UTC ASP.NET MVC 13
loading
Tags: Chart
Mika Kahilainen
Asked On July 6, 2015 06:01 PM UTC

Hi,

I'm new to MVC and Syncfusion components. Which are brilliant!

Link

I would like to ask for guidance how to populate the chart in a way that it would follow the items filtered to Grid. Any advices are more than wellcome!

Mika

Vinothkumar Arumugam [Syncfusion]
Replied On July 7, 2015 11:45 AM UTC

Hi Mika,
We have analyzed your query. You can easily bind grid filtered data to chart. Which it is achieved by grid “ClientSideEvents=>ActionComplete” . We have prepared a sample based on you requirements.
Please find the following code snippet and explanations to achieve your requirements.
Code Snippet [MVC]:

·         Create separate model for grid or you can use JSON,SQL data as well. Here we have created simple CountriesSalesData model. Which contains TransactionID, CategoryName, ShipDate, SalesAmount

·         Create grid and setting ActionComplete event as follows.


·         Create simple chart as below


·         When selecting a filter then ActionComplete event sent the request type as “filtering”. This request type indicates the selected filters data from the grid.

·         You can get the data by using sender.model.currentViewData;. Then use this data to chart as follows.


  Screenshots:

·         Before selecting the filter chart render by using default model.


·         After filtering data by using category Books,Electronics the result as below



Chart:


Please find the below sample link to download the sample.
Sample Link:
WebApplication1


Please let us know if you have any concern.
Thanks,
Vinothkumar Arumugam.


Mika Kahilainen
Replied On July 7, 2015 01:43 PM UTC

Thank you Vinothkumar,

That looks just great! It'll take a short while until I can test it.

Thank you for your support, I really appreciate it.

Mika


Vinothkumar Arumugam [Syncfusion]
Replied On July 8, 2015 04:29 PM UTC

Hi Mike,
Thanks for the update.
Please let us know if you have any further query on this.
Thanks,
Vinothkumar Arumugam.

Mika Kahilainen
Replied On July 13, 2015 08:28 PM UTC

Hi,

I got it working, thank you for great example.


Let's assume there is hundred records in dataset and I apply filters for grid to get fifty records visible on grid. Now if I do paging chart shows different view on each page. Thats due to sender.model.currentViewData; it refers to Grid property, right? I couldn't find a reference that would reveal other properties of Grid.

Or am I totally on wrong track?

WBR,

Mika


Alan Sangeeth S [Syncfusion]
Replied On July 14, 2015 07:09 AM UTC

Hi Mika,

Thanks for the update.

You can find all the Grid properties in “ActionComplete” Grid event’s handler parameter “sender”. Please refer the following code snippets.

completeAction = function (sender) {

        var data = sender.model.currentViewData; // sender.model contains all Grid properties

}



Alternatively, you can get Grid properties by creating instance for Grid Control. Please refer the following code snippets.

var obj = $("#FlatGrid").ejGrid("instance.");

var data = obj.model.currentViewData;



Please refer the following API document link for further reference on Grid Properties.
http://helpjs.syncfusion.com/js/api/ejgrid#members

Please let us know if you have any queries.

Regards,
Alan Sangeeth S

Mika Kahilainen
Replied On July 24, 2015 11:57 AM UTC

Thanks Alan,

API document is just what I was looking for but unfortunately I still cannot understand the example. I looked for property .currentViewData but it's not mentioned there. Where does it come from?

Cheers,
Mika

Alan Sangeeth S [Syncfusion]
Replied On July 27, 2015 01:05 PM UTC

Hi Mika,


For your information, “currentViewData” is an internal Grid property that we use for internal Grid operations and so it is not documented. And for your kind information, we have a public Grid method called getCurrentViewData” that returns the same result as “currentViewData”. You can find the documentation for this method in below API documentation link.


http://helpjs.syncfusion.com/js/api/ejgrid#methods:getcurrentviewdata


Please let us know if you have any queries.


Regards,
Alan Sangeeth S

Mika Kahilainen
Replied On July 29, 2015 07:12 AM UTC

Hi Alan,

Thank you, I got it sorted some steps further. Event handler is like this:
<script type="text/javascript">
    completeAction = function (sender) {
        //create object
        var gridObj = $("#FlatGrid").data("ejGrid");
        //get data from object, only filtered ones
        var data = gridObj.getFilteredRecords();
        //create object
        var chart = $("#container").ejChart("instance");
        //fill chart
        chart.model.series[0].dataSource = data;
        chart.model.series[0].xName = "CategoryName";
        chart.model.series[0].yName = "SalesAmount";
        chart.model.series[0].type = "Column";
        chart.redraw();
    }
</script>

Now I would need to show sum in chart instead of highest value. Any tips how to gain that?


Cheers,
Mika


Vinothkumar Arumugam [Syncfusion]
Replied On July 30, 2015 01:30 PM UTC

Hi Alan,

Sorry for the inconvenience. We do not understand if whether you can place this total value on each point or use this for point yValues. Please revert back us in which scenario you will try to do with the sample for each chart point. It will be helpful for us to serve you.

Please let us know if you have any concern.

Thanks,

Vinothkumar Arumugam.


Mika Kahilainen
Replied On July 30, 2015 03:41 PM UTC

Hi,

Thank you for reply, I try to explain this better :) Hopefully this picture will help in understanding my trouble.


Purpose of chart might not be very practical with this example data but in my project I need to summarize data before putting it into chart. If I would fetch chart data directry from database SQL statement should be something like:
select sum(salesamount), categoryname from countriessaledata group by categoryname.

Regards,
Mika

Vinothkumar Arumugam [Syncfusion]
Replied On August 2, 2015 02:11 PM UTC

Hi Mika,
Currently there is no implicit data summarize options based on your requirements. So we have prepared a workaround sample for this.  Please find the below code snippet
Code Snippet [MVC]:

//Summarize Data by using each field.

var books = movies = electronics = home = health = toys = clothing = sports = automotive = 0;

for (var i = 0; i < data.length; i++) {

    switch (data[i].CategoryName) {

        case "Books":

            books += data[i].SalesAmount;

            data[i].Total = books;

            break;

        case "Movies":

            movies += data[i].SalesAmount;

            data[i].Total = movies;

            break;

        case "Electronics":

            electronics += data[i].SalesAmount;

            data[i].Total = electronics;

            break;

        case "Home":

            home += data[i].SalesAmount;

            data[i].Total = home;

            break;

        case "Health":

            health += data[i].SalesAmount;

            data[i].Total = health;

            break;

        case "Toys":

            toys += data[i].SalesAmount;

            data[i].Total = toys;

        case "Clothing":

            clothing += data[i].SalesAmount;

            data[i].Total = clothing;

            break;

        case "Sports":

            sports += data[i].SalesAmount;

            data[i].Total = sports;

            break;

        case "Automotive":

            automotive += data[i].SalesAmount;

            data[i].Total = automotive;

            break;

    }     
}

 
Below Screen shot illustrate this.

·         First chart using data from grid based on each field summation as below.


·         After you can filter the data which you want. Here we have filter data from grid using two fields Books, Clothing.


Find the below link to download the sample.
Sample Link:
http://www.syncfusion.com/downloads/support/forum/119539/ze/GridChart-680566688
Please let us know if you have any further query on this.
Thanks,
Vinothkumar Arumugam.


Mika Kahilainen
Replied On August 5, 2015 03:45 AM UTC

Hi,

That looks good it will fulfilll my need. And this provided solution allows me to expand the chart functionality even further.

Thank you very much!
Mika

Vinothkumar Arumugam [Syncfusion]
Replied On August 5, 2015 05:09 AM UTC

Hi Mika,
Thanks for the update.
Please let us know if you have any further query on this.
Thanks,
Vinothkumar Arumugam.

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

;