Chart and Grid linking

[Mika Kahilainen]

Hi,

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



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]

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]

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]

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

[Mika Kahilainen]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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