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

Json databing for the chart

2 Answers 453 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Madan Mohan Venkat
Top achievements
Rank 1
Madan Mohan Venkat asked on 17 Dec 2012, 01:25 PM
Hi,

how can the we bind the json data for the chart.

Need to Call the JSON method in the controller

2 Answers, 1 is accepted

Sort by
0
Madan Mohan Venkat
Top achievements
Rank 1
answered on 17 Dec 2012, 02:34 PM
Here is my code
function createChart() {
 
    var filters = getFilters();
 
 
    var params = filters;
    var paramsStr = $.param(params);
 
 
 
 
    var dataUrl = "/SampleChart/Graph/?" + paramsStr;
 
 
    $("#chart").kendoChart({
        theme: $(document).data("kendoSkin") || "default",
        dataSource: {
            transport: {
                read: {
                    url: dataUrl,
                    dataType: "json"
                }
            }
        },
        title: {
            text: "Spain electricity production (GWh)"
        },
        legend: {
            position: "top"
        },
        seriesDefaults: {
            type: "line"
        },
        series:
        [{
            field: "Date",
            name: "Nuclear"
        }],
        categoryAxis: {
            field: "date",
 
            labels: {
              
                color: "#727f8e"
            }
        },
        valueAxis: {
            labels: {
                 
            },
            //majorUnit: 10000
        },
        tooltip: {
            visible: true
        }
    });
}
 
$(document).ready(function () {
    alert("ready");
    setTimeout(function () {
        // Initialize the chart with a delay to make sure
        // the initial animation is visible
        createChart();
        alert("createChart");
 
        $("#example").bind("kendo:skinChange", function (e) {
            createChart();
        });
    }, 400);
});
 
 
 
function getFilters() {
    var type = "ABC";
    var category = "Equal";
    var subCategory = "All";
    var period = "12";
    return { type: type, category: category, subCategory: subCategory };
}
0
Accepted
Alexander Valchev
Telerik team
answered on 19 Dec 2012, 09:40 AM
Hi Venkat,

This demo demonstrates how to bind the chart to remote json data.
Your DataSource configuration looks OK, so I believe that the issue might be connected with the server response. The most common mistakes are:
  1. Server returns an object - dataSource works only with arrays, so if you data consists of a single records please wrap it inside an array. As an example:
    [{"foo": 1, "bar": "baz"}]
  2. The schema.data configuration does not point to the array containing the result. Example:
    //json response
    { "d": [{"foo": 1, "bar": "baz"}, {"foo": 1, "bar": "baz"}] }
    //dataSource
    schema: {
        data: "d"
    }
  3. The server returns a string instead of an array. Example:
    { "d": "[{\"foo\": 1, \"bar\": \"baz\"}, {\"foo\": 1, \"bar\": \"baz\"}]" } //wrong
    { "d": [{"foo": 1, "bar": "baz"}, {"foo": 1, "bar": "baz"}] } //correct

    This data cannot be loaded from the dataSource, please correct the serialization and return a valid Json.

I hope this information will help. Please compare your implementation with the one in the aforementioned demo and check for one of the common mistakes.

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Charts
Asked by
Madan Mohan Venkat
Top achievements
Rank 1
Answers by
Madan Mohan Venkat
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or