I created a MVC 4 Mobile Application using the VS2012 Project Template. My page has a Kendo Chart on it. After clicking an ActionLink the chart is not displaying. But, if I simply click "Refresh" the chart is right there. Maybe some of the project template javascript is hiding the chart? I was wondering if someone might have some insight on how keep the chart visible the first time the page loads? My code is below.
HomeController.cs:
_Layout.cshtml:
Index.cshtml:
HomeController.cs:
using MobileActionLink.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MobileActionLink.Controllers
{
public class HomeController : Controller
{
public ActionResult Index(int appID = 1)
{
ViewBag.Message = "App ID = " + appID;
var listHistory = LoginHistoryRepository.ListHistory();
//APPLY THE FREQUENCY RULE
foreach (var item in listHistory)
{
var date = item.LoginDateTime.Date;
var hours = item.LoginDateTime.Hour;
//hourly
var locDT_Hourly = date.ToShortDateString() + " " + hours + ":00:00.000";
//daily
var locDT_Daily = date.ToShortDateString() + " 00:00:00.000";
//round the login datetime to hour or day as specified by the Frequency DD selection
item.LoginDateTime = Convert.ToDateTime(locDT_Hourly);
}
//FILTER THE HISTORY LIST
IEnumerable<
ChartHist
> myRow = from row in listHistory
where row.LoginApplicationID == appID
select row;
//apply frequency filter
myRow = myRow.Where(f => f.ScriptFrequency == 1).ToList();
//need duration averages now, since datetime of login will not be unique
//also, split up pass/fail statuses
myRow = from row in myRow
group row by row.LoginDateTime into grp
select new ChartHist
{
LoginDateTime = grp.Key,
LoginDuration_Pass = grp.Average(d => d.LoginDuration_Pass),
LoginDuration_Fail = grp.Average(d => d.LoginDuration_Fail)
};
//apply date filters
myRow = myRow.Where(f => f.LoginDateTime >= DateTime.Today.AddDays(-7) && f.LoginDateTime <= DateTime.Today).ToList();
////get the app name and assign it to a view bag property
var appName = "";
var listApps = LoginApplicationRepository.ListApplications();
var appNames = from a in listApps
where a.LoginApplicationID == appID
select a.LoginAppName;
foreach (var item in appNames)
appName = item;
ViewBag.AppName = "APP NAME";
var chartApp = new ChartApp();
chartApp.LoginApplicationID = appID;
chartApp.LoginAppName = appName;
var chartViewModel = new ChartsMobileViewModel();
chartViewModel.ChartHistories = myRow.ToList();
chartViewModel.LoginApplications = listApps.ToList();
chartViewModel.ChartApp = chartApp;
return View(chartViewModel);
}
}
}
_Layout.cshtml:
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
title
>@ViewBag.Title</
title
>
<
meta
name
=
"viewport"
content
=
"width=device-width"
/>
<
link
href
=
"~/favicon.ico"
rel
=
"shortcut icon"
type
=
"image/x-icon"
/>
@Styles.Render("~/Content/mobileCss", "~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
<!-- Kendo References -->
<
link
rel
=
"stylesheet"
href
=
"~/Content/kendo.common.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"~/Content/kendo.blueopal.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"~/Content/kendo.dataviz.min.css"
type
=
"text/css"
/>
<
script
src
=
"~/Scripts/jquery.min.js"
></
script
>
<
script
src
=
"~/Scripts/kendo.all.min.js"
></
script
>
<
script
src
=
"~/Scripts/kendo.aspnetmvc.min.js"
></
script
>
</
head
>
<
body
>
<
div
data-role
=
"page"
data-theme
=
"b"
>
<
div
data-role
=
"header"
>
<
h1
>@ViewBag.Title</
h1
>
</
div
>
<
div
data-role
=
"content"
>
@RenderBody()
</
div
>
</
div
>
@RenderSection("scripts", required: false)
</
body
>
</
html
>
Index.cshtml:
@model MobileActionLink.Models.ChartsMobileViewModel
@{
ViewBag.Title = "Kendo Charts";
string appName = Model.ChartApp.LoginAppName;
}
<
h2
>Mobile Action Link Test</
h2
>
<
p
>
My Chart Goes Here @ViewBag.Message
</
p
>
@(Html.Kendo().Chart(Model.ChartHistories)
.Name("chart")
.Title(appName)
.SeriesDefaults(seriesDefaults => seriesDefaults.Column().Stack(false)
)
.Series(series =>
{
series.Column(model => model.LoginDuration_Pass).Name("Pass").Color("Lime");
series.Column(model => model.LoginDuration_Fail).Name("Fail").Color("Red");
})
.CategoryAxis(axis => axis
.Categories(model => model.LoginDateTime)
.Title("Time of Attempt")
.Labels(labels => labels
.Rotation(-65)
.Format("{0:d}")
)
)
.ValueAxis(axis => axis
.Numeric().Labels(labels => labels
.Format("{0:0.0}")
)
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0} Seconds")
)
.Legend(legend => legend
.Offset(-15,-140)
.Border(1, "#000", ChartDashType.Solid)
.Background("White")
)
)
<
ul
data-role
=
"listview"
data-inset
=
"true"
>
<
li
data-role
=
"list-divider"
>Navigation</
li
>
<
li
>@Html.ActionLink("My Link 1", "Index", new { appID = 1 })</
li
>
<
li
>@Html.ActionLink("Another One", "Index", new { appID = 2 })</
li
>
<
li
>@Html.ActionLink("Hello World", "Index", new { appID = 3 })</
li
>
</
ul
>