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

Chart Visibility / VS2012 MVC 4 Mobile Application Project Template

3 Answers 131 Views

Charts

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

Allan asked on 08 Feb 2013, 03:10 PM

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:

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")

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

@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>

3 Answers, 1 is accepted

answered on 12 Feb 2013, 05:22 PM

Hello Allan,

I assume that the problem is that you have added the jquerymobile scripts and the hyperlinks are actually loaded with Ajax.
Does the problem exist if you remove the jquerymobile script?
If this is the case I suggest you to create links which are not loaded with Ajax like explained here:

http://jquerymobile.com/test/docs/pages/page-links.html

Links that point to other domains or that have rel="external", data-ajax="false" or target attributes will not be loaded with Ajax.

Kind Regards,
Petur Subev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 13 Feb 2013, 07:50 AM

Hello again Allan,

Actually you need to add these attributes, not to remove them.

Also I can see that you are loading the jQuery script multiple times:

@Scripts.Render("~/bundles/jquery", ...

<script src="~/Scripts/jquery.min.js"></script>

Please notice you need to load it only once. I suggest you to add the jQuery version which ships with the Kendo suite before the jquerymobile script.

Information which are the required scripts can be found in our documentation

If there are still JavaScript errors we might need a sample project to run and see what causes these errors.

Kind regards,
Petur Subev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!