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

[Solved] PieChart not showing data...Only a title

0 Answers 25 Views
Chart
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
David
Top achievements
Rank 1
David asked on 11 May 2012, 02:43 PM
I followed the demo example of the piechart setup a model similar to one on the demo.  However when I goto the view I see nothing but the title showing on the page.
Can someone tell me what I'm doing wrong here?


Here is my Model

 public class MyModel
    {
        [Display(Name = "Ident")]
        public int id { get; set; }
        [Display(Name = "Model Name")]
        public string name { get; set; }
        public string Source { get; set; }
        public int Percentage { get; set; }
    }

Here is my View

@{
    ViewBag.Title = "Chart Demo";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<h2>Chart Demo</h2>


@{ Html.Telerik().Chart<TelerikMvcApplication1.Models.MyModel>()
                    .Name("pieChart")
                    .Theme("Black")
                    .Title("This is the Title of the Pie Chart")
                    .Legend(legend => legend
                                        .Position(ChartLegendPosition.Bottom)
                           )
                    .Series(series =>
                    {
                        series.Pie("Percentage", "Source")
                              .Labels(labels => labels.Visible(true).Template("<#= value #>%")
                              .Align(ChartPieLabelsAlign.Column)
                              .Position(ChartPieLabelsPosition.OutsideEnd))
                              .StartAngle(90)
                              .Padding(100);
                    })
                    .DataBinding(dataBinding => dataBinding.Ajax().Select("_AjaxBinding", "Home"))      
                    .Tooltip(tooltip => tooltip.Visible(true).Template("<#= value #>%"))
                    .HtmlAttributes(new { style = "width: 500px; height: 400px;" })
                    .Render();   
 }


@section HeadContent {    <style type="text/css">    .t-chart        {            float: right;        }    </style>} 


Here are my actions



        public ActionResult Chart()
        {                      
            return View();
        }


        public ActionResult _AjaxBinding()
        {
            var list = new List<TelerikMvcApplication1.Models.MyModel>();
            var m = new TelerikMvcApplication1.Models.MyModel();
            m.id = 0;
            m.name = "Blah";
            m.Percentage = 50;
            m.Source = "Microsoft";
            list.Add(m);
            var m2 = new TelerikMvcApplication1.Models.MyModel();
            m2.id = 1;
            m2.name = "Blah2";
            m2.Percentage = 50;
            m2.Source = "Yahoo";
            list.Add(m2);
            JavaScriptSerializer jSearializer = new JavaScriptSerializer();
            string jstr = jSearializer.Serialize(list);
            return Json(jstr);
        }

-------------------

thanks,
David
Tags
Chart
Asked by
David
Top achievements
Rank 1
Share this question
or