Json databing for the chart

3 posts, 1 answers
  1. Madan Mohan Venkat
    Madan Mohan Venkat avatar
    2 posts
    Member since:
    Nov 2011

    Posted 17 Dec 2012 Link to this post

    Hi,

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

    Need to Call the JSON method in the controller
  2. Madan Mohan Venkat
    Madan Mohan Venkat avatar
    2 posts
    Member since:
    Nov 2011

    Posted 17 Dec 2012 Link to this post

    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 };
    }
  3. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2892 posts

    Posted 19 Dec 2012 Link to this post

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