Json databing for the chart

[Madan Mohan Venkat]

Hi,

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

Need to Call the JSON method in the controller

[Madan Mohan Venkat]

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 };

}

[Alexander Valchev]

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