1
votes

I'm new to kendo UI, my problem is: I'm working on Asp.net MVC, and I'm trying to bind a keno chart using transport Url, but it's not working, I've passed the whole day looking for a solution but couldn't find one, thanks for your help: this is my code:

<script> $("#chart").kendoChart({
dataSource: {
    transport: {
        read: {
            url: "@Html.Raw(Url.Action("Showchart", "Chart"))",
            dataType: "json"
        }
    },
    sort: {
        field: "year",
        dir: "asc"
    }
}
});
</script>
Controller: 
public ActionResult Showchart()
    {
        List<RootObject> Mylist = new List<RootObject>();

        RootObject object1 = new RootObject();
        object1.sales = 200;
        object1.year ="1990";
        Mylist.Add(object1);

        RootObject object2 = new RootObject();
        object2.sales = 230;
        object2.year = "2008";
        Mylist.Add(object2);

        RootObject object3 = new RootObject();
        object3.sales = 260;
        object3.year = "2007";
        Mylist.Add(object3);

        RootObject object4 = new RootObject();
        object4.sales = 659;
        object4.year = "2006";
        Mylist.Add(object4);

        RootObject object5 = new RootObject();
        object5.sales = 400;
        object5.year = "2000";
        Mylist.Add(object5);
        return Json(Mylist);
    }
}

public class RootObject
{
    public int sales;
    public string year;
}
1
First : Remove the Html.Raw(), keep only @Url.Action(). Second : Can you post the error message you have from the Chrome/Firefox developer console ? - Guillaume
Hi Jayesh, thanks for responding, when I removed Ht;ml.RAw it doesnt't stop at my point break, and about the error it is : Failed to load resource: the server responded with a status of 404 (Not Found) - Abdellah Felahi

1 Answers

0
votes

Please try with the below code snippet.

VIEW

<div id="chart"></div>

<script>
    $("#chart").kendoChart({
        dataSource: {
            transport: {
                read: {
                    url: "@Html.Raw(Url.Action("Showchart", "YourControllerName"))",
                    dataType: "json"
                }
            },
            sort: {
                field: "year",
                dir: "asc"
            }
        },
        seriesDefaults: {
            type: "area"
        },
        series: [{
            field: "sales",
            name: "sales"
        }],
        categoryAxis: {
            field: "year"
        },
    });
</script>

CONTROLLER

public ActionResult Showchart()
{
    List<RootObject> Mylist = new List<RootObject>();

    RootObject object1 = new RootObject();
    object1.sales = 200;
    object1.year = "1990";
    Mylist.Add(object1);

    RootObject object2 = new RootObject();
    object2.sales = 230;
    object2.year = "2008";
    Mylist.Add(object2);

    RootObject object3 = new RootObject();
    object3.sales = 260;
    object3.year = "2007";
    Mylist.Add(object3);

    RootObject object4 = new RootObject();
    object4.sales = 659;
    object4.year = "2006";
    Mylist.Add(object4);

    RootObject object5 = new RootObject();
    object5.sales = 400;
    object5.year = "2000";
    Mylist.Add(object5);
    return Json(Mylist, JsonRequestBehavior.AllowGet);
}

Note: 1) To run the above code you have to added required kendo javascript library in view code. 2) Replace 'YourControllerName' text with your controller name inside view.

Let me know if any concern.