Hello,
I ran into an relatively simple issue and I just can not find out how to do it.
I have a Donut Chart which I want to fill with remote data.
function createCharts() {
var showLabels = $(document).width() > 677;
$("#overview-chart").kendoChart({
theme: "sass",
dataSource: {
data: [
{ value: countOrderFinished, type: "New Orders" },
{ value: 30, type: "Orders in Process" },
{ value: 180, type: "Finished Orders" },
]
},
series: [{
type: "donut",
field: "value",
categoryField: "type",
startAngle: 70,
holeSize: 55
}],
legend: {
position: "bottom"
}
});
kendo.resize($(".k-grid"));
}
$(document).ready(createCharts);
$(document).bind("kendo:skinChange", createCharts);
$(window).on("resize", function () {
kendo.resize($(".k-chart"));
});
How would I manage to fill my Variable countOrderFinished with remote data? I tried this way, but it did not work:
var countOrderFinished = new kendo.data.DataSource({ type: "json", read: { url: "Services/OrderServices.asmx/GetCountOrderFinished", contentType: 'application/json; charset=utf-8', type: "POST" }, });
I think it is a simple solution but I just cant get it.
Thank you for your Help!
Hello,
In general, with remote binding the entire data set must be present in the response, similarly to what is shown in the demo:
https://demos.telerik.com/kendo-ui/donut-charts/remote-data-binding
However, if I understand the idea correctly, you should use the fetch method:
// countOrderFinished datasource - same configuration. // fetch the data countOrderFinished.fetch(function() { let countOrderFinishedData = this.data(); // Retrieve the data from the dataSource. This is what you should pass to the 'value' field. // Rest of the logic });
Best Regards,
Georgi