I am facing an issue with binding remote data to a pie chart while managing a grid with dropdown sorting options. The grid is working fine, but I am unable to display the hierarchical data on the pie chart as categories.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="project">
<div id="grid"></div>
<div id="chart"></div>
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
<input type="search" id="category" style="width: 150px"/>
</div>
</script>
<script>
$(document).ready(function() {
//Grid displays all products or products from one category, which set from dropdown list
var grid = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
pageSize: 20,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
toolbar: kendo.template($("#template").html()),
height: 550,
sortable: true,
pageable: true,
dataBound:function(){
var grid = this;
$.each(grid.tbody.find('tr'),function(){
var model = grid.dataItem(this);
if(model.Discontinued==true){
$('[data-uid='+model.uid+']').addClass('k-state-selected');
}
});
},
columns: [
// { field: "ProductID", title: "Product ID", width: 100 },
{ field: "ProductName", title: "Product Name", template: '#=kendo.format(ProductName.toUpperCase())#' },
{ field: "UnitPrice", title: "Price", width: 150, template: 'EUR #: kendo.format("{0:c}", UnitPrice)#' },
{ field: "UnitsInStock", title: "In Stock", width: 150 },
{ field: "Discontinued", title: "Discontinued", width:50 },
{ field: "QuantityPerUnit", title: "Quantity" }
]
});
//DropDown list for sorting by the category
var dropDown = grid.find("#category").kendoDropDownList({
dataTextField: "CategoryName",
dataValueField: "CategoryID",
autoBind: false,
optionLabel: "All",
dataSource: {
type: "odata",
severFiltering: true,
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
},
change: function() {
var value = this.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({ field: "CategoryID", operator: "eq", value: parseInt(value) });
} else {
grid.data("kendoGrid").dataSource.filter({});
}
}
});
var data = [
{
"source": "Hydro",
"percentage": 20,
},
{
"source": "Hydro",
"percentage": 20
},
{
"source": "Solar",
"percentage": 10
},
{
"source": "Nuclear",
"percentage": 30
}
];
var dataSource = new kendo.data.DataSource({
data: data,
group: {field: "source", aggregates: [{
field: "percentage", aggregate: "sum"
}]}
});
dataSource.read();
function getChartData() {
var chartData = [];
var view = dataSource.view();
for(var idx = 0; idx < view.length; idx++) {
chartData.push({
source: view[idx].value,
percentage: view[idx].aggregates.percentage.sum
});
}
return chartData;
}
//From This piechart I want to sorting grid
var chart = $("#chart").kendoChart({
title: {
text: "Categories and Products"
},
legend: {
position: "bottom"
},
dataSource: {
transport: {
read: function(e) {
e.success(getChartData());
}
}
},
series: [{
type: "pie",
field: "percentage",
categoryField: "source",
explodeField: "explode",
aggregate: "count",
labels: {
visible: true,
background: "transparent",
template: "#= category #: \n #= value#%"
}
}],
seriesClick: function(e){
$.each(e.sender.dataSource.view(), function() {
// Clean up exploded state
this.explode = false;
});
// Disable animations
e.sender.options.transitions = false;
// Explode the current slice
e.dataItem.explode = true;
e.sender.refresh();
}
});
});
</script>
<style>
#grid .k-grid-toolbar
{
padding: .6em 1.3em;
}
.category-label
{
vertical-align: middle;
padding-right: .5em;
}
#category
{
vertical-align: middle;
}
.toolbar {
float: center;
}
</style>
</div>