CODEWITHSUNDEEP
javascriptvisual-studio-2010kendo-ui
user2049357
user2049357

Reputation:

My kendo chart data not displaying properly on pageload

I have a kendo grid and kendo chart in my application.I am using shared data-source for both graph and grid. My problem is on page-load grid displays all data but chart displays only some data.

my chart code: 

$("#Chart").kendoStockChart({
    theme         : $(document).data("kendoSkin") || "metro",
    dataSource    : DataSource,
    autoBind      : false,
    legend        : {
        position: "right", visible: true
    },
    dateField     : "date",
    seriesDefaults: { type: "line" },
    series        : [
        {
            field: "value",
            name : "value"
        }
    ],
    valueAxis: [
        {
            max    : 5.0,
            min    : 0,
            labels : {
                format: "{0}"
            },
            tooltip: { visible: true, format: "{0}" }
        }
    ],
    navigator: {
        series: [
            { field: "item", type: "area"}
        ]
    }
});

Upvotes: 1

Views: 2392

Answers (1)

OnaBai
OnaBai

Reputation: 40917

Update to a newer version of Kendo UI v2012.3.1315. 

<script src="http://cdn.kendostatic.com/2012.3.1315/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css" rel="stylesheet"/>
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.dataviz.default.min.css" rel="stylesheet"/>

EDIT: If you share a DataSource between two Kendo UI widgets you are sharing every option, this includes pageSize. So either you display all results in the grid or you display only those items in a page in the chart.

Instead of sharing, I recommend sharing the result (content) of the DataSource. I mean:

  1. Define the DataSource, the Grid and the Chart as you are doing now.
  2. Replace the value of dataSource in the Grid by undefined.
  3. Add to the shared DataSource definition a change event that assigns the data to Grid.dataSource.

Something like this:

var sharedDataSource = new kendo.data.DataSource({
    type     : "odata",
    transport: {
        read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
    },
    schema   : {
        model: {
            fields: {
                OrderDate: { type: "date" }
            }
        }
    },
    change   : function (e) {
        grid.dataSource.data(e.items);
    }
});

Check the code running here: http://jsfiddle.net/OnaBai/5bchz/

Upvotes: 3

Related Questions