Chart obj ref error

2 posts, 1 answers
  1. Shane
    Shane avatar
    8 posts
    Member since:
    Nov 2015

    Posted 16 Feb Link to this post

    I'm trying to get my chart title to be dynamic based on data in my chart.  However, since changing my ViewModel, I'm not getting any data in the chart to show up.  Here's my code so far.
    ViewModel:

    public class TargetZeroDetail
        {
            public String Title { get; set; }
            public List<TargetZeroDetails> Details { get; set; }
        }
     
        public class TargetZeroDetails
        {
            public DateTime DetailDate { get; set; }
            public String ShortDetailDate
            {
                get
                {
                    return String.Format("{0:M/dd}", DetailDate);
                }
            }
            public Decimal Score { get; set; }
        }
     

     Controller:

    public ActionResult Index()
    {
        return View();
    }
         
    public ActionResult GetChartData([DataSourceRequest] DataSourceRequest request, DateTime passedDate)
    {
        TargetZeroDetail data = Utility.GetTargetZeroData(passedDate);
        return Json(data, JsonRequestBehavior.AllowGet);
    }

    View: 

     

    @model Utilities.TargetZeroDetail
     
    <head>
        <link href="~/Content/kendo/2015.3.1111/kendo.common.min.css" rel="stylesheet" />
        <link href="~/Content/kendo/2015.3.1111/kendo.material.min.css" rel="stylesheet" />
        <link href="~/Content/kendo/2015.3.1111/kendo.blueopal.min.css" rel="stylesheet" />
        <script src="~/Scripts/kendo/2015.3.1111/jquery.min.js"></script>
        <script src="~/Scripts/kendo/2015.3.1111/kendo.all.min.js"></script>
        <script src="~/Scripts/kendo/2015.3.1111/kendo.aspnetmvc.min.js"></script>
    </head>
    <body>
        @{
            DateTime dateToPass = Convert.ToDateTime(Request.QueryString["date"]);
            if (dateToPass == DateTime.MinValue)
            {
                dateToPass = new DateTime(DateTime.Now.Date.Year, DateTime.Now.Month, 1);
            }
        }
        <table>
            <tr>
                <td valign="top">
                    @(Html.Kendo().Button()
                        .Name("prevButton")
                        .Content("Previous Month")
                        .Icon("expand-w")
                        .Events(ev => ev.Click("onPrevClick"))
                    )
                </td>
                <td>
                    <div id="example">
                        <div id="chart">
                            @(Html.Kendo().Chart(Model.Details)
                                .Name("targetZeroChart")
                                .DataSource(dataSource => dataSource
                                    .Read(read => read.Action("GetChartData", "Home", new { passedDate = dateToPass }))
                                )
                                .ChartArea(ca => ca.Height(690).Width(690))
                                .Title(Model.Title)
                                .Legend(false)
                                .SeriesDefaults(series => series
                                    .RadarLine()
                                    .Width(0)
                                    .Markers(markers => markers
                                        .Visible(true)
                                        .Background("blue")
                                        .Border(border => border
                                            .Width(2)
                                            .Color("blue")
                                        )
                                    )
                                    .Tooltip(tooltip => tooltip
                                        .Visible(true)
                                        .Background("white")
                                    )
                                )
                                .Series(series => series
                                    .RadarLine(d => d.Score)
                                )
                                .CategoryAxis(axis => axis
                                    .Categories(m => m.ShortDetailDate)
                                )
                                .ValueAxis(axis => axis.Numeric()
                                    .Labels(l => l.Visible(false))
                                    .Line(l => l.Visible(false))
                                    .PlotBands(pb =>
                                    {
                                        pb.Add().Color("green").From(0).To(1).Opacity(0.5);
                                        pb.Add().Color("yellow").From(1).To(2).Opacity(0.5);
                                        pb.Add().Color("gold").From(2).To(3).Opacity(0.5);
                                        pb.Add().Color("orange").From(3).To(4).Opacity(0.5);
                                        pb.Add().Color("red").From(4).To(10).Opacity(0.5);
                                    })
                                )
                            )
                        </div>
                    </div>
                </td>
                <td valign="top">
                    @(Html.Kendo().Button()
                        .Name("nextButton")
                        .Content("Next Month")
                        .Icon("expand")
                        .Events(ev => ev.Click("onNextClick"))
                        .HtmlAttributes(new
                        {
                            @class = "right-icon"
                        })
                    )
                </td>
            </tr>
        </table>
        <style>
            .right-icon .km-button .km-icon {
                float: right;
                margin-left: 0.3em;
            }
        </style>
        <script>
            function onPrevClick(e) {
                var newAddress = getPathFromUrl(window.location.href);
                if (newAddress.indexOf("Home") < 0) {
                    newAddress += "Home/Index";
                }
                newAddress += "?date=@dateToPass.AddMonths(-1).Date.ToShortDateString()";
                window.location.replace(newAddress);
            }
     
            function onNextClick(e) {
                var newAddress = getPathFromUrl(window.location.href);
                if (newAddress.indexOf("Home") < 0) {
                    newAddress += "Home/Index";
                }
                newAddress += "?date=@dateToPass.AddMonths(1).Date.ToShortDateString()";
                window.location.replace(newAddress);
            }
     
            function getPathFromUrl(url) {
                return url.split(/[?#]/)[0];
            }
     
            $("#chart").css("width", "700px").css("height", "700px")
                        .data("kendoChart");
        </script>
    </body>

    I'm assuming that since my initial call to the controller simply returns an empty View, that's why this is happening.  However if I were to make the call to get data to return to my view initially, it still doesn't show up.

    What am I missing here?

  2. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 19 Feb Link to this post

    Hi,

    Please accept my apologies for the delayed response.

    The chart does not support binding configuration options, the Title in this case, to remote data.
    Therefore the Model must be available in the View that's rendering the chart for the code to work.

    My recommendation for the scenario would be to use local data binding.
    There doesn't seem to be a need to build the request on the client, at least not in the sample.

    Sample implementation in the controller:
    public ActionResult Index()
    {
        DateTime dateToPass = Convert.ToDateTime(Request.QueryString["date"]);
        ...

        TargetZeroDetail data = Utility.GetTargetZeroData(passedDate);

        return View(Model);
    }


    And in the view:     
    @(Html.Kendo().Chart(Model.Details)
        .Name("targetZeroChart")
        .Title(Model.Title)
        ...

    I hope this makes sense.

    Regards,
    T. Tsonev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top