Chart Visibility / VS2012 MVC 4 Mobile Application Project Template

4 posts, 0 answers
  1. Allan
    Allan avatar
    18 posts
    Member since:
    Jan 2013

    Posted 08 Feb 2013 Link to this post

    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")
     
            <!-- 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>
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 12 Feb 2013 Link to this post

    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!
  3. Allan
    Allan avatar
    18 posts
    Member since:
    Jan 2013

    Posted 12 Feb 2013 Link to this post

    I removed the jquery attributes.

    Now I get the following error:

    Unhandled exception at line 611, column 6 in http://localhost:60131/Scripts/jquery-1.7.1.js

    0x80020101 - Microsoft JScript runtime error: Could not complete the operation due to error 80020101.

  4. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 13 Feb 2013 Link to this post

    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!
Back to Top