Kendo chart in kendo grid - kendo-ui

Question

I have a problem, I need to set kendo pie chart in Kendo grid with Asp.net mvc.
I have a grid that i want to set a pie chart in one of columns in client template.
Can i do it?If Yes How?
Tnx

Answer 1

Please refer the below forum on telerik in which a jsfiddle sample is provided for what you are looking for
Telerik Forum Link
Sample JS Fiddle

Answer 2

Try with like this
#(Html.Kendo().Grid<Model>()
.Name("grid")
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(true)
.Model(model => model.Id(p => p.ID))
.Read(read => read.Action("method", "controller"))
)
.Pageable()
.Sortable()
.Scrollable()
.Events(e => e.DataBound("dataBound"))
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Columns(columns =>
{
columns.Bound(p => p.ID).ClientTemplate("<div class='chart'></div>");
})
)
and script is
function dataBound() {
var grid = this;
grid.tbody.find("tr[role='row']").each(function () {
var model = grid.dataItem(this);
$(this).find(".chart").kendoChart({
title: {
text: "Olympic Medals won by USA"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar",
stack: {
type: "100%"
}
},
series: [{
name: "Gold Medals",
data: [40, 32, 34, 36, 45, 33, 34, 83, 36, 37, 44, 37, 35, 36, 46],
color: "#f3ac32"
}, {
name: "Silver Medals",
data: [19, 25, 21, 26, 28, 31, 35, 60, 31, 34, 32, 24, 40, 38, 29],
color: "#b8b8b8"
}, {
name: "Bronze Medals",
data: [17, 17, 16, 28, 34, 30, 25, 30, 27, 37, 25, 33, 26, 36, 29],
color: "#bb6e36"
}],
valueAxis: {
line: {
visible: false
},
minorGridLines: {
visible: true
}
},
categoryAxis: {
categories: [1952, 1956, 1960, 1964, 1968, 1972, 1976, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
});
}

Answer 3

I had a special requirement. To make a single horizontal column inside a table. I thought that having a chart per table would be overkill so I customised the grid component. Basing it on a simple Html table styling it with some CSS and using KendoUI to make it into a grid.
This might be helpful if you want something very specific.
Visual example:
Here's a working example:
http://embed.plnkr.co/Hy2u4d/