Chart does not read oData DataSource

3 posts, 0 answers
  1. Yoeri
    Yoeri avatar
    2 posts
    Member since:
    Jun 2016

    Posted 06 Jul Link to this post

    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. Yoeri
    Yoeri avatar
    2 posts
    Member since:
    Jun 2016

    Posted 06 Jul in reply to Yoeri Link to this post

    Note: dataType: "json" is deleted.
  3. Kendo UI is VS 2017 Ready
  4. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 08 Jul Link to this post

    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.
     
Back to Top