This is a migrated thread and some comments may be shown as answers.

Update Pie chart when Kendo Grid changes

1 Answer 187 Views
Charts
This is a migrated thread and some comments may be shown as answers.
canon
Top achievements
Rank 1
canon asked on 04 Oct 2013, 05:31 PM
I have a simple Kendo grid with inline editing capabilities that I want to tie to a Pie chart. 
Basically, when I update the value of a certain row[column] in the grid, I want the Pie chart 
to reflect the change and redraw immediately. How can I do that?

The data for the grid is saved/added to a List<ProductViewModel> which has Name and Price properties. 

1 Answer, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 07 Oct 2013, 02:43 PM
Hello,

I would recommend using the same dataSource for both of the widgets. This will ensure that all changes in the Grid will immediately reflect in the Chart. This approach however, requires to initialize the Chart using JavaScript once the Grid's dataBound event is triggered. For example:  
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()   
    .Name("Grid")   
    .Columns(columns => {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice).Width(140);
        columns.Bound(p => p.UnitsInStock).Width(140);
        columns.Bound(p => p.Discontinued).Width(100);
        columns.Command(command => command.Destroy()).Width(110);
        columns.Command(command => command.Edit()).Width(110);
    })
    .ToolBar(toolbar => {
        toolbar.Create();
        toolbar.Save();
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Events(e=>e.DataBound("onDataBound"))
    .Pageable()
    .Navigatable()
    .Sortable()
    .Scrollable()
    .DataSource(dataSource => dataSource       
        .Ajax()          
        .PageSize(5)
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.ProductID))
        .Create("Editing_Create", "Grid")
        .Read("Editing_Read", "Grid")
        .Update("Editing_Update", "Grid")
        .Destroy("Editing_Destroy", "Grid")
    )
)
 
<div id="chart"></div>
 
 
<script type="text/javascript">
    var isChartInitialized = false;
 
    function onDataBound(e) {
 
        if (!isChartInitialized) {
            isChartInitialized = true;
            $("#chart").kendoChart({
                dataSource: this.dataSource,
                title: {
                    text: "Products"
                },
                legend: {
                    position: "top"
                },
                seriesDefaults: {
                    type: "pie"
                },
                series: [{
                    field: "UnitPrice",
                    categoryField: "ProductName",
                }],
                tooltip: {
                    visible: true,
                    format: "N0",
                    template: "#= ProductName # - #= kendo.format('{0:P}', percentage)#"
                }
            }); 
        }
    }
</script>

Here is a screencast showing the result.

Regards,
Alexander Popov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Charts
Asked by
canon
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Share this question
or