NetCore 3.0.0-preview3-27503-5
Telerik.UI.for.AspNet.Core Nuget package v2019.1.412-internal
Visual Studio 2019 v16.0.1
I have a view with multiple line charts, bar charts and pie charts. I have a view model that contains the data for each graph as well as labels and colours. I am using DataSource read and passing an extra parameter which is a date from a kendo date picker control. The controller function is correctly called and the view model populated and returned. I can see from the visual studio output window that there are no errors and using the Network tab in Chrome developer tools the data is correctly returned with a status 200. However when i change the date to a month where i have no data the graph is refreshed once when the date picker is closed and once again when i think it should be populated with the updated view model returned from the read. However the graph shows the previous data. Again using the Network tab I can see that the data is nulls as expected. I have included my code below. Looking at the examples, mostly which are for the Grid control, they return a list from the controller function and use the ToDataSourceResult() function. I have tried return Json(new [] {vm}.ToDataSourceResult()); with no success. Could you explain where I am going wrong
The attached image shows the data returned for March but the partial graph still showing the data for April
<!-- view snippet -->
<div class="row">
<div class="col-12 col-sm-4 col-md-3 col-md-2">
<div id="month" class="k-content">
<h5 style="margin-top: 2em;">Select month:</h5>
@(Html.Kendo().DatePicker()
.Name("monthpicker")
.Start(CalendarView.Year)
.Depth(CalendarView.Year)
.Format("MMMM yyyy")
.Events(e => e.Change("monthpickerChange"))
.Max(DateTime.Now)
.Value(value)
.Footer(false)
.HtmlAttributes(new { style = "width: 100%", title = "monthpicker" })
)
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12">
<div class="k-content wide">
@(Html.Kendo().Chart<CustomerSurveyViewModel>()
.Name("chartMonthlyRatings")
.Title($"Ratings for {DateTime.Now.ToString("MMMM, yyyy")}")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.DataSource(datasource =>
{
datasource.Read(read =>
{
read.Action("GetRatingsForMonth", "Home").Data("getMonthDate");
});
})
.ChartArea(chartArea => chartArea
.Background("transparent")
)
.SeriesDefaults(seriesDefaults =>
seriesDefaults.Line().Style(ChartLineStyle.Smooth)
)
.Series(series =>
{
series.Line(Model.MonthRatings1).Name(Model.Names[0]);
series.Line(Model.MonthRatings2).Name(Model.Names[1]);
series.Line(Model.MonthRatings3).Name(Model.Names[2]);
series.Line(Model.MonthRatings4).Name(Model.Names[3]);
series.Line(Model.MonthRatings5).Name(Model.Names[4]);
})
.SeriesColors(Model.Colours.ToArray<string>())
.CategoryAxis(axis => axis
.Categories("01", "02", "03", "04", "05", "06", "07", "08", "09", "10",
"11", "12", "13", "14", "15", "16", "17", "18", "19", "20",
"21", "22", "23", "24", "25", "26", "27", "28", "29", "30",
"31")
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric().Labels(labels => labels.Format("{0}"))
.Line(line => line.Visible(false))
.AxisCrossingValue(0)
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}")
)
)
</div>
</div>
</div>
[HttpPost]
public async Task<IActionResult> GetRatingsForMonth(DateTime dateSelected)
{
int daysInMonth = DateTime.DaysInMonth(dateSelected.Year, dateSelected.Month);
var existingEntries = await firebaseClient.Child("CustomerSurveys")
.OrderByKey()
.OnceAsync<CustomerSurvey>();
var data = existingEntries.Where(x => (x.Object.TimeStamp.Month == dateSelected.Month &&
x.Object.TimeStamp.Year == dateSelected.Year))
.Select(x => x.Object);
CustomerSurveyViewModel vm = new CustomerSurveyViewModel();
for (int i = 1; i <= daysInMonth; i++)
{
var count = data.Where(x => (x.Rating == 1 && (int)x.TimeStamp.Day == i)).Select(x => x).Count();
if (count > 0)
vm.MonthRatings1.Add(count);
else
vm.MonthRatings1.Add(null);
}
for (int i = 1; i <= daysInMonth; i++)
{
var count = data.Where(x => (x.Rating == 2 && (int)x.TimeStamp.Day == i)).Select(x => x).Count();
if (count > 0)
vm.MonthRatings2.Add(count);
else
vm.MonthRatings2.Add(null);
}
for (int i = 1; i <= daysInMonth; i++)
{
var count = data.Where(x => (x.Rating == 3 && (int)x.TimeStamp.Day == i)).Select(x => x).Count();
if (count > 0)
vm.MonthRatings3.Add(count);
else
vm.MonthRatings3.Add(null);
}
for (int i = 1; i <= daysInMonth; i++)
{
var count = data.Where(x => (x.Rating == 4 && (int)x.TimeStamp.Day == i)).Select(x => x).Count();
if (count > 0)
vm.MonthRatings4.Add(count);
else
vm.MonthRatings4.Add(null);
}
for (int i = 1; i <= daysInMonth; i++)
{
var count = data.Where(x => (x.Rating == 5 && (int)x.TimeStamp.Day == i)).Select(x => x).Count();
if (count > 0)
vm.MonthRatings5.Add(count);
else
vm.MonthRatings5.Add(null);
}
return Json(vm);
}
// View Model
public class CustomerSurveyViewModel
{
public List<int> BeginningOfTime { get; set; } = new List<int>();
public List<int?> ThisWeeksRatings1 { get; set; } = new List<int?>();
public List<int?> ThisWeeksRatings2 { get; set; } = new List<int?>();
public List<int?> ThisWeeksRatings3 { get; set; } = new List<int?>();
public List<int?> ThisWeeksRatings4 { get; set; } = new List<int?>();
public List<int?> ThisWeeksRatings5 { get; set; } = new List<int?>();
public List<int?> LastWeeksRatings1 { get; set; } = new List<int?>();
public List<int?> LastWeeksRatings2 { get; set; } = new List<int?>();
public List<int?> LastWeeksRatings3 { get; set; } = new List<int?>();
public List<int?> LastWeeksRatings4 { get; set; } = new List<int?>();
public List<int?> LastWeeksRatings5 { get; set; } = new List<int?>();
public List<int?> DateRatings1 { get; set; } = new List<int?>();
public List<int?> DateRatings2 { get; set; } = new List<int?>();
public List<int?> DateRatings3 { get; set; } = new List<int?>();
public List<int?> DateRatings4 { get; set; } = new List<int?>();
public List<int?> DateRatings5 { get; set; } = new List<int?>();
public List<int?> MonthRatings1 { get; set; } = new List<int?>();
public List<int?> MonthRatings2 { get; set; } = new List<int?>();
public List<int?> MonthRatings3 { get; set; } = new List<int?>();
public List<int?> MonthRatings4 { get; set; } = new List<int?>();
public List<int?> MonthRatings5 { get; set; } = new List<int?>();
public List<int?> YearRatings1 { get; set; } = new List<int?>();
public List<int?> YearRatings2 { get; set; } = new List<int?>();
public List<int?> YearRatings3 { get; set; } = new List<int?>();
public List<int?> YearRatings4 { get; set; } = new List<int?>();
public List<int?> YearRatings5 { get; set; } = new List<int?>();
public List<string> Categories { get; set; } = new List<string>();
// colours
public List<string> Colours { get; set; } = new List<string>();
// names
public List<string> Names { get; set; } = new List<string>();
public CustomerSurveyViewModel()
{
Colours.Add("#E21E2B");
Colours.Add("#F4572E");
Colours.Add("#FCB040");
Colours.Add("#91CA61");
Colours.Add("#3DB449");
Names.Add("Extremely Disatisfied");
Names.Add("Not Happy");
Names.Add("Neutral");
Names.Add("Happy");
Names.Add("Very Happy");
}
}
function monthpickerChange(e) {
var date = this.value();
var chart = $("#chartMonthlyRatings").data("kendoChart");
chart.setOptions({
title: {
text: "Ratings for " + moment(date).format("MMMM, YYYY")
}
});
chart.dataSource.read();
chart.dataSource.refresh(); // not sure if i need refresh or if read is enough
}
function getMonthDate() {
var datepicker = $("#monthpicker").data("kendoDatePicker");
var date = datepicker.value();
return { dateSelected: date.toISOString() };
}