Bind chart with grid data

[Manolo]

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]

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]

Ok! It works!!

Thank you!

[Manolo]

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]

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]

Thank you!

[Manolo]

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]

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]

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]

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]

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]

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]

ok!

Thank you very much!

[Deepaa Pragaasam]

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