Displaying remote integer data

[n/a]

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!

[Georgi Denchev]

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