Kendo dataviz piechart - displaying remote data

Question

I'm trying to display a Kendo dataviz piechart with the following information.

I'm passing 'results' back from my controller to my view.

results is what I'm passing back to my view.

My view contains the piechart:

@(Html.Kendo().Chart<PropertyViewModel>()
        .Name("chart")
        .Title("Properties")
        .Legend(legend => legend
            .Position(ChartLegendPosition.Top)
        )
        .DataSource(ds => ds.Read(read => read.Action("GetPropertiesChart", "Home")))
        .Series(series => {
            series.Pie(model => model.Address.State, model => model.Address.State.Count().ToString());
        })
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0:N0}")
        )
    )

I get nothing but a blank area on my page where the piechart should be.

Controller code:

public ActionResult GetPropChart()
    {
        var allProps = PService.GetAll();

        var props = allProps.Cast<PropViewModel>().ToList();


        var results = props
                .GroupBy(item => item.Address.State)
                .Select(g => new
                {
                    State = g.Key,
                    Count = g.Select(l => l.Address.State).Count()
                });

        return Json(results);
    }

How does the controller action method which serves the data look like? Also are there any JavaScript errors in the console? What browser do you use? Did you try to pass the collection to the BindTo method and see if it works at all? — Petur Subev, Jan 20 '13 at 22:07
I've added the controller code above. I get no JavaScript errors and I'm using Chrome. I did not try passing the collection to the BindTo method but I'll give that a shot. — Mithrilhall, Jan 21 '13 at 13:08

score 0 · Accepted Answer · answered Jan 21 '13 at 16:58

The model you return is as follows:

.Select(g => new
      {
          State = g.Key,
          Count = g.Select(l => l.Address.State).Count()
      }

However your series definition are different (there is no Adress property)

series.Pie(model => model.Address.State)

Also binding to methods (such as model.Address.State.Count().ToString()) is Not supported - created regular property which holds the value instead.

Kendo dataviz piechart - displaying remote data

1 Answers1