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

Chart obj ref error

1 Answer 54 Views

Chart

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

Shane asked on 16 Feb 2016, 08:00 PM

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>

</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?

1 Answer, 1 is accepted

Accepted

answered on 19 Feb 2016, 09:43 AM

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