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

Bind Controller data to Kendo Chart

1 Answer 205 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Mrutyunjaya
Top achievements
Rank 1
Mrutyunjaya asked on 22 Jan 2014, 09:35 AM
How to bind the Controller data to Kendo chart

My razor code looks like

@(Html.Kendo().Chart<MvcKendoDemo.Models.tblGraph>()
.Name("DBPlot")

.Title(title => title
           .Text("Kendo Plot DB Data")
           .Position(ChartTitlePosition.Bottom)
           )

.DataSource(ds => ds.Read(read => read.Action("GetGraphData", "Graph")))

    .Series(series =>
    {
        series.Column(model => model.STATS).Name("Stats");
    })

        .CategoryAxis(axis => axis
                    .Categories(model => model.DAY)
                    .MajorGridLines(lines => lines.Visible(false))
                )
        .Tooltip(tooltip => tooltip
        .Visible(true)
        .Format("{0}%")
         .Template("#= series.name #: #= value #")
          )  
)


And Controller code
 public ActionResult GetGraphData()
        {
            var stats=new List<int?>();
            var day=new List<string>();
            foreach (var item in DB.tblGraphs)
                {
                    stats.Add(item.STATS);
                    day.Add(item.DAY);
                }
            return Json(new {stats=stats,day=day });//getting data from EF
        }

Result :- Empty graph is displayed with title.

How do i bind the data from controller to Chart.

Thanks in Advance.

1 Answer, 1 is accepted

Sort by
0
Accepted
Daniel
Telerik team
answered on 24 Jan 2014, 08:30 AM
Hi,

You should return an collection of objects that contain properties corresponding to the series and cateogy fields so you should either the "tblGraphs" data:
public ActionResult GetGraphData()
{
    return Json(DB.tblGraphs);
}
or if it contains circular references, a projection with only the necessary fields:
public ActionResult GetGraphData()
{
    return Json(DB.tblGraphs.Select(g => new {
       STATS = g.STATS,
       DAY = g.DAY
    }));
}



Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Charts
Asked by
Mrutyunjaya
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Share this question
or