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

Chart Visibility / VS2012 MVC 4 Mobile Application Project Template

3 Answers 67 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Allan
Top achievements
Rank 1
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")
 
        <!-- 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>

3 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
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!
0
Allan
Top achievements
Rank 1
answered on 12 Feb 2013, 05:34 PM
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.

0
Petur Subev
Telerik team
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!
Tags
Charts
Asked by
Allan
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Allan
Top achievements
Rank 1
Share this question
or