CODEWITHSUNDEEP
javascriptjquerykendo-ui
sony
sony

Reputation: 1503

Setting datasource of Kendo UI chart as well as showing the summary?

I am using ajax api calls for getting data from a SQL database as below:

    function getJsonData(type, period1, period2, id) {
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                type: "GET",
                url: createURL(type, period1, period2, id),
                dataType: "json",
                contentType: "application/json; chartset=utf-8"
            }
        },

    });    
    return dataSource;
}

Using the above datasource, I am creating a Kendo chart as below:

 function stepsChart(container, title, period1, period2) {

        var dSource = getJsonData("Summary", period1, period2, "<% = id %>");

        $(container).kendoChart({

            dataSource: dSource,

            seriesColors: ["orangered"],

            chartArea: {
                background: ""
            },

            title: {
                text:title

            },

            legend: {
                visible: false
            },

            chartArea: {
                background: ""
            },

            seriesDefaults: {
                type: "column",
                gap:5
            },
            series: [{
                name: "steps",
                field: "steps",
                categoryField: "createddate",
                aggregate: "sum"
            }],

            categoryAxis: {
                type: "date",
                baseUnit: getBaseUnit(period1, period2),
                labels: {
                    rotation: -45,
                    dateFormats: {
                        days : getDateFormat(period1, period2),
                        weeks: getDateFormat(period1, period2),
                        years: getDateFormat(period1, period2)
                    },
                    step: getSteps(period1, period2)
                },
                majorGridLines: {
                    visible: false
                }
            },

            valueAxis: {
                majorGridLines: {
                    visible: true
                },                    
                labels: {
                    template: "#= kendo.format('{0}',value/1000)#K"
                },
                title: {
                    text: "Steps"
                }
            }

        });
    }

I also want to use the data from the above datasource for showing a summary of the information in a div below the chart. But if I add something like 

var k = dSource.data;

there will not be any data in k. Is there a way to get the json data in the function which creates the chart?

Upvotes: 0

Views: 879

Answers (1)

CodingWithSpike
CodingWithSpike

Reputation: 43698

DataSource.data is a function. I think your code should be:

var k = dSource.data();

That would also return an empty array if the data hasn't already been read, so you might need to do:

dSource.one("change", function () {
    var k = dSource.data();
});
dSource.fetch();

because the .fetch() is async.

Upvotes: 1

Related Questions