[Solved] Chart does not read oData DataSource

[Yoeri]

Currently, I am trying to create a column chart with a oData v4 DataSource. However, the values in the chart are not visible. I believe that there is a problem with the oData DataSource, or that the schema is not correct, but maybe I am wrong. 

In the attachment, you can find my xml source file (WorkOrders). 

<div id="chart"></div>
<script>
    var dataSource_statuswerkopdrachten = new kendo.data.DataSource({
        type: "odata-v4",
        transport: {
            read: {
                url: "//localhost:9090/npo/WorkOrders",
                dataType: "json"
            }
        },
        group: [{
            field: "status"
        }],
        schema: {
            model: {
                fields: {
                    value: { type: "number" },
                    status: { type: "string" }
                }
            }
        }
    });

    var transformedData = [];
    dataSource_statuswerkopdrachten.fetch(function () {
      var v = this.view();
      for (var i = 0; i < v.length; i++) {
        var item = v[i].value;
        var val = v[i].items.length;
        transformedData.push({status: item, value: val});
      }
    });


    $("#chart").kendoChart({
        title: {
            text: "Status van alle werkopdrachten"
        },
        chartArea: {
            height: 200
        },
        dataSource: transformedData,
        categoryAxis: {
            field: "status"
        },
        series: [
            { field: "value", name: "Status" }
        ]
    });
</script>

[Yoeri]

Note: dataType: "json" is deleted.

[Daniel]

Hello,

Assuming that the data is correctly loaded with the odata dataSource, the data will not be populated in the chart because the dataSource copies the passed array. You should either initialize the chart after populating the transformedData array:

var transformedData = [];
dataSource_statuswerkopdrachten.fetch(function () {
    var v = this.view();
    ...

    $("#chart").kendoChart({
        dataSource: transformedData,
        ...
    });
});

or set a dataSource instance to the chart and set its data after getting the transformed data:

var transformedData = [];
var chartDataSource = new kendo.data.DataSource();
dataSource_statuswerkopdrachten.fetch(function () {
  ...
  chartDataSource.data(transformedData);
});


$("#chart").kendoChart({
    dataSource: chartDataSource,
    ...
});

Regards,
Daniel
Telerik by Progress