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.

Bind chart with grid data

Thread ID:

Created:

Updated:

Platform:

Replies:

121078 Nov 9,2015 07:25 AM Nov 20,2015 04:35 AM ASP.NET Web Forms 13
loading
Tags: Chart
Manolo
Asked On November 9, 2015 07:25 AM

Hi,

I want bind a chart with a grid data source. So, if a user filter the grid, chart is update.

Also, my grid hidde columns in function of a parameter, so the chart only must be show the grid visible columns, and I want rehuse this grid and chart, so it's an user control

I've done this example:

<ej:Grid ID="gridResumenMI" runat="server" AllowSorting="True" ShowStackedHeader="true" AllowResizeToFit="true" AllowFiltering="true">

            <FilterSettings FilterType="Excel" />
            <ClientSideEvents ActionComplete="onGridActionComplete" DataBound="onGridDataBound" />
            <ToolbarSettings ShowToolbar="true" ToolbarItems="excelExport"></ToolbarSettings>

            <Columns>
                <ej:Column Field="CustomerID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="75" />
                <ej:Column Field="Week1" Width="80" AllowFiltering="false" />
                 <ej:Column Field="Week2" Width="80" AllowFiltering="false"/>
                 <ej:Column Field="Week3" Width="80" AllowFiltering="false"/>
                 <ej:Column Field="Week4" Width="80" AllowFiltering="false"/>
                 <ej:Column Field="Week5" Width="80" AllowFiltering="false" Visible ="false"/>
                 <ej:Column Field="Week6" Width="80" AllowFiltering="false" Visible ="false"/>
                 <ej:Column Field="Week7" Width="80" AllowFiltering="false" Visible ="false"/>
                 <ej:Column Field="Week8" Width="80" AllowFiltering="false" Visible ="false"/>
                 <ej:Column Field="Week9" Width="80" AllowFiltering="false" Visible ="false"/>
                 <ej:Column Field="Week10" Width="80" AllowFiltering="false" Visible ="false"/>
            </Columns>
        </ej:Grid>
    </div>

    <ej:Chart ID="chartInforme" runat="server" OnClientCreate="onChartCreated">
<%--        <Series>
        </Series>--%>
    </ej:Chart>

JavaScript

 var chart;
    var grid;

    function onChartCreated(sender) {
        chart = sender;
        bindChartWithGrid()
    }


    function onGridDataBound(sender)
    {
        grid = sender;
        bindChartWithGrid();
    }

    function onGridActionComplete(sender) {
        if (sender.requestType == "filtering") {
            bindChartWithGrid()
        }
    }

    function bindChartWithGrid() {

       
        // check if grid and chart are loaded
        if (grid == undefined || chart == undefined)
            return;

        var dataSource = grid.model.currentViewData;       
        var columnas = []
        var SeriesDataSources = [];
        var serie = [];

        // Get visible weeks
        for(var i = 0; i < grid.model.columns.length; i ++)
        {
            if (grid.model.columns[i].visible == true && grid.model.columns[i].field.startsWith("Week"))
                columnas.push(grid.model.columns[i].field);
        }


        for (var i = 0; i < dataSource.length; i++) {
            var objectProperties = Object.getOwnPropertyNames(dataSource[i]);

            //alert(dataSource[i].GrupoOS);

            // Browse object properties, and those that match the columns displayed stored value to create the chart
            var cont = 0;
            for (var j = 0; j < objectProperties.length; j++) {
                // check if column is visible
                if ($.inArray(objectProperties[j], columnas) > -1) {
                    //alert(objectProperties[j]);
                    var dato = dataSource[i];
                    punto = { serieName: dato.CustomerID, Week: columnas[cont], Total: dato[objectProperties[j]] };
                    //alert("NameSerie: " + punto.serieName +  " Week: " + punto.Semana + " total: " + punto.Total);
                    serie.push(punto);
                    cont++;
                }
            }

            if (serie.length > 0) {
               
                SeriesDataSources.push(serie);
                serie = [];
            }
        }

        // Assign the series into the chart
        chart.model.series = [];       
        for (h = 0; h < SeriesDataSources.length; h++) {
            chart.model.series[h] = {};
            chart.model.series[h].dataSource = SeriesDataSources[h];
            chart.model.series[h].xName = "Week";
            chart.model.series[h].yName = "Total";
            chart.model.series[h].name = SeriesDataSources[h][0].serieName;
            chart.model.series[h].type = "Column";
            chart.model.series[h].enableAnimation = true;
        }

        //chart.model.series = [];
        SeriesDataSources = [];
        alert("before redraw");
        chart.redraw();
        alert("done");
    }

I supose that I assign wrong the chart's datasource.

How can i do this?

I attach an example project.

Thanks





Attachment: WebSite_ControlOperaciones_dc345042.zip

Michael Prabhu M [Syncfusion]
Replied On November 10, 2015 02:19 AM

Hi Manolo,
Thanks for using syncfusion products.
We have analysed your query and sample and found that you have taken chart instance in through event in which chart "redraw" method will not be available so we recommened you to get the instance of the chart as like in below code snippet.
[JS]
 function onChartCreated(sender) {
// chart = sender;
chart = $("#MainContent_ucData_chartInforme").ejChart("instance");
bindChartWithGrid()
}
Now the chart renders fine. We have modifed your sample and attached the same, you can download it from the below link.
 Sample : Web

Please let us know if you have any concerns.
 
Thanks,
Michael Prabhu.

Manolo
Replied On November 10, 2015 06:03 AM

Ok! It works!!

Thank you!

Manolo
Replied On November 10, 2015 08:27 AM

Ups... I've 2 doubts more:

1)  this function "var dataSource = grid.model.currentViewData;" only get the page view data, but if I enable pagin and the chart must show all data, what function do I need?

2) I need a new chart with summatory total values, I can create a function that browse all records and do the summary manually. My doubt is, if I can get the row summary values instead the manually calculation.

3) If I enable grouping, the chart is not working

I've modified the example with this features

Attachment: Web_aa012787.zip

Deepaa Pragaasam [Syncfusion]
Replied On November 11, 2015 08:01 AM

Hi Manolo,

We have analyzed your queries

Query1:  this function "var dataSource = grid.model.currentViewData;" only get the page view data, but if I enable pagin and the chart must show all data, what function do I need?

The currentViewData contains only the data that is present in the current page. When all the data from the datasource needs to be displayed in the chart, then the datasource of the grid needs to be used.

Code example:

[ASPX.cs]

var dataSource= grid.model.dataSource

Screenshot:

The chart rendered when  the datasource  is binded to grid


Query 2:  I need a new chart with summatory total values, I can create a function that browse all records and do the summary manually. My doubt is, if I can get the row summary values instead the manually calculation.

 

This is not possible to get the summaryRow datas from the grid. We have to calculate that manually. 

 

Query 3:  If I enable grouping, the chart is not working

 

When Grouping is enabled the data will be  present only in the grid.model.currentViewData.records

Hence the chart is not rendering.

 

Now we have set the datasource for chart as  below

Code example:

[ASPX.CS]

var dataSource= grid.model.dataSource

 

The chart is rendered even when the paging option is selected in grid

We have modified and attached the sample below for your reference

Sample link: http://www.syncfusion.com/downloads/support/forum/121078/ze/WebApplication-1263536566

Please let us know if you have any concerns

Regards,

Deepaa.



Manolo
Replied On November 12, 2015 06:37 AM

Thank you!

Manolo
Replied On November 12, 2015 08:27 AM

Ups... sorry again.

I don't know if I must open other thread, but...

I need add various user control (grid + chart) dinamically in the same page. But in the javascript code, for get the chart reference

chart = $("#MainContent_ucData_chartInforme").ejChart("instance");

Now, I don't know the UserControl ID, so, I can't get the correct reference.

I've modified the example. For get the grids you must click on process button

Thanks again

Attachment: WebApplication_f66a330b.zip

Deepaa Pragaasam [Syncfusion]
Replied On November 13, 2015 11:50 AM

Hi Manolo,
We have modified the sample to dynamically create chart.
In the “OnClientCreate” event of chart the client id where the chart is rendered can be fetched. It is done as shown in the below code example
Code example
[JS]

function onChartCreated(sender) {

      
chart = $("#" + sender.model.clientId).ejChart("instance");

   }


Screenshot:
Onclick of button both the chart and grid are rendered.



We have attached the sample for your reference
 http://www.syncfusion.com/downloads/support/forum/121078/ze/WebApplication-956199387
Please let us know if you have any concerns.
Regards,
Deepaa.


Manolo
Replied On November 13, 2015 12:40 PM

Uops! It works fine, but I detect other problem.

Now we are using var dataSource= grid.model.dataSource  instead var dataSource = grid.model.currentViewData because I need the enabled pagin.

But now, if I want filter the grid, the chart is not updated with the grid filter...

Deepaa Pragaasam [Syncfusion]
Replied On November 16, 2015 11:10 AM

Hi Manolo,

  We have analyzed your query and modified the sample as per your requirement. Now when the paging is enabled, the chart will show all the data and on filtering the chart show the filtered data.

Code example:
[ASPX.cs]

if (!dataSource) {

            if (grid.model.allowGrouping)

                dataSource = grid.model.currentViewData.records;

            else

                dataSource = grid.model.currentViewData;
}    

Screen Shot:
 

We have modified and attached the sample below for your reference

Sample link:

http://www.syncfusion.com/downloads/support/forum/121078/ze/WebApplication-1055646877

Please let us know if you have any concerns

Regards,

Deepaa


Manolo
Replied On November 18, 2015 11:08 AM

I'm sorry, I continue to have the problem

With your last version, the grid only shows data of the first page, and I need that chart shows all order id.

But when I filter, for example, by status to open, I need the chart with all results filtered of all pages

So, If I use:
  1. var dataSource = grid.model.dataSource -> chart always shows all records, ignore the grid filter
  2. var dataSource = grid.model.currentViewData -> chart only shows data of first page

Attach the project with more data for test


Attachment: WebApplication_61e191ef.zip

Deepaa Pragaasam [Syncfusion]
Replied On November 19, 2015 05:52 AM

Hi Manolo,
We have analyzed your query
To get all the filtered records in the grid getFilteredRecords method is used.

Code Example:


[Aspx.cs]


  function onGridActionComplete(sender) {

        if (sender.requestType == "filtering") {

            if (this.model.filterSettings.filteredColumns.length)

                var filteredRecords = this.getFilteredRecords();  //get filtered records

            dataSource = null;

            bindChartWithGrid(filteredRecords)

        }

    }


    function bindChartWithGrid(filteredRecords) {

        // check if grid and chart are loaded

        if (grid == undefined || chart == undefined) 

            return;


        if (filteredRecords)

            dataSource = filteredRecords;

        else if (grid.model.allowGrouping)

            dataSource = grid.model.currentViewData.records;

        else

            dataSource = grid.model.currentViewData;

               

        . . . 
}
To know more about the grid filtering please refer the below link
http://help.syncfusion.com/js/api/ejgrid#methods:getfilteredrecords

Screenshot:
When status is set as close in filtering ,the rendered grid and chart are shown below




We have attached the modified sample below
Sample Link:  http://www.syncfusion.com/downloads/support/forum/121078/ze/Webapplication596825345
Please let us know if you have any concerns
Regards,
Deepaa.


Manolo
Replied On November 19, 2015 10:46 AM

ok!

Thank you very much!

Deepaa Pragaasam [Syncfusion]
Replied On November 20, 2015 04:35 AM

Hi Manolo,
Thanks for the update. Please let us know if you need any further assistance.
Regards,
Deepaa.

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.

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.

;