This is a migrated thread and some comments may be shown as answers.

Chart does not read oData DataSource

2 Answers 79 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Yoeri
Top achievements
Rank 1
Yoeri asked on 06 Jul 2016, 11:51 AM

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>

2 Answers, 1 is accepted

Sort by
0
Yoeri
Top achievements
Rank 1
answered on 06 Jul 2016, 12:04 PM
Note: dataType: "json" is deleted.
0
Daniel
Telerik team
answered on 08 Jul 2016, 07:23 AM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
Charts
Asked by
Yoeri
Top achievements
Rank 1
Answers by
Yoeri
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or