Questions on UI for ASP.NET MVC Forum

0 answers

9 views

Issue with Missing Data Points in Kendo Chart Line Series

Description

Hello Telerik Community,

I'm encountering an issue with my Kendo Chart implementation where certain data points are not displaying on the line series, despite being present in the dataset. Here's a breakdown of the problem and my current setup:

Problem

- Some data points, specifically those corresponding to the dates November 27 and November 29, are not showing up on the line chart.
- However, these dates are appearing correctly in the category legend.

Setup

- I'm using Kendo Chart to visualize historical pool data.
- Data is fetched from a database and processed in the controller before being passed to the Razor view for rendering.
- Each manufacturer's data is plotted on the chart as separate line series, with the x-axis representing dates and the y-axis representing weight.

Relevant Code

- Controller Code: I've provided the relevant controller code responsible for fetching and processing the data.
- Razor View Code: Similarly, I've included the Razor view code where the Kendo Chart is defined and configured.

Expected Outcome

- I expect the line chart to display all data points, including those for November 27 and November 29, for each manufacturer.

Steps Taken

- I've checked the data in the controller, and it seems that all data points are correctly fetched from the database.
- I've inspected the generated HTML for the chart and confirmed that the missing data points are indeed not being rendered.

Request for Assistance

- Could you please review my setup and help me identify any potential issues causing the missing data points?
- Additionally, if you have any suggestions for troubleshooting or debugging this issue further, I would greatly appreciate it.

Additional Information

- Framework: ASP.NET MVC- Browser: Chrome, Edge

Thank you in advance for your assistance!

public ActionResult ChartTMS(DateTime? fromDate, DateTime? toDate, string unit = "gm")
        {
            fromDate = fromDate?.Date;
            toDate = toDate.HasValue ? toDate.Value.Date.AddDays(1).AddTicks(-1) : DateTime.Today;
 
            if (!fromDate.HasValue || !toDate.HasValue)
            {
                fromDate = DateTime.Today.AddDays(-6);
                toDate = DateTime.Today;
            }
 
            var allMeasurements = (
                from m in db.Target_Measurement_History.AsNoTracking()
                where m.Measurement_Record_Date >= fromDate.Value && m.Measurement_Record_Date <= toDate.Value
&& m.Target_Lot_Profile != null
&& m.Target_Lot_Profile.Target_Item != null
&& m.Target_Lot_Profile.Target_Item.Target_Manufacturer != null
                select new MeasurementDataViewModel
                {
                    Measurement_Record_Date = m.Measurement_Record_Date,
                    Pt_Remaining_Gms = m.Pt_Remaining_Gms,
                    Ru_Remaining_Gms = m.Ru_Remaining_Gms,
                    Manufacturer = m.Target_Lot_Profile.Target_Item.Target_Manufacturer,
                }).ToList();
 
            var manufacturers = allMeasurements.Select(m => m.Manufacturer).Distinct();
            var colorMap = new Dictionary<string, string>();
            Random rand = new Random();
 
            foreach (var manufacturer in manufacturers)
            {
                colorMap[manufacturer] = $"#{rand.Next(0x1000000):X6}";
            }
 
            var groupedData = allMeasurements
                .GroupBy(m => new { m.Measurement_Record_Date.Date, m.Manufacturer })
                .Select(group => new MeasurementDataViewModel
                {
                    Measurement_Record_Date = group.Key.Date,
                    Pt_Remaining_Gms = group.Sum(item => item.Pt_Remaining_Gms),
                    Ru_Remaining_Gms = group.Sum(item => item.Ru_Remaining_Gms),
                    Manufacturer = group.Key.Manufacturer,
                    Color = colorMap[group.Key.Manufacturer]
                })
                .OrderBy(g => g.Measurement_Record_Date)
                .ThenBy(g => g.Manufacturer)
                .ToList();
 
            const float gramsPerTroyOunce = 31.1035f;
 
            if (unit == "t oz")
            {
                foreach (var item in groupedData)
                {
                    if (item.Pt_Remaining_Gms.HasValue)
                        item.Pt_Remaining_Gms = item.Pt_Remaining_Gms.Value / gramsPerTroyOunce;
 
                    if (item.Ru_Remaining_Gms.HasValue)
                        item.Ru_Remaining_Gms = item.Ru_Remaining_Gms.Value / gramsPerTroyOunce;
                }
            }
 
            ViewBag.fromDate = fromDate;
            ViewBag.toDate = toDate;
            ViewBag.Unit = unit;
 
            return View(groupedData);
        }

    public class MeasurementDataViewModel
    {
        public DateTime Measurement_Record_Date { get; set; }
        public float? Pt_Remaining_Gms { get; set; }
        public float? Ru_Remaining_Gms { get; set; }
        public string Manufacturer { get; set; }
        public string Color { get; set; }
    }

[
    {
        "Measurement_Record_Date": "/Date(1542823200000)/",
        "Pt_Remaining_Gms": 4370,
        "Ru_Remaining_Gms": 5621,
        "Manufacturer": "JX Nippon"
    },
    {
        "Measurement_Record_Date": "/Date(1542823200000)/",
        "Pt_Remaining_Gms": 4571,
        "Ru_Remaining_Gms": 4295,
        "Manufacturer": "Kojundo/Mitsui"
    },
    {
        "Measurement_Record_Date": "/Date(1543168800000)/",
        "Pt_Remaining_Gms": 1785,
        "Ru_Remaining_Gms": 7086,
        "Manufacturer": "JX Nippon"
    },
    {
        "Measurement_Record_Date": "/Date(1543255200000)/",
        "Pt_Remaining_Gms": 36432,
        "Ru_Remaining_Gms": 41800,
        "Manufacturer": "Kurt J. Lesker"
    },
    {
        "Measurement_Record_Date": "/Date(1543428000000)/",
        "Pt_Remaining_Gms": 76360,
        "Ru_Remaining_Gms": 74687,
        "Manufacturer": "Kurt J. Lesker"
    },
    {
        "Measurement_Record_Date": "/Date(1543428000000)/",
        "Pt_Remaining_Gms": 11138,
        "Ru_Remaining_Gms": 9686,
        "Manufacturer": "Materion"
    },
    {
        "Measurement_Record_Date": "/Date(1543428000000)/",
        "Pt_Remaining_Gms": 1329,
        "Ru_Remaining_Gms": 4796,
        "Manufacturer": "Mitsubishi"
    }
]

@using Kendo.Mvc.UI
@using System.Web.Mvc
@using System.Web.Mvc.Html
@using Kendo.Mvc.Extensions
@model IEnumerable<TMS_RND.Controllers.MeasurementDataViewModel>
@using System.Web.Helpers
 
@{
    ViewBag.Title = "Chart";
    Layout = "~/Views/Shared/_Layout.cshtml";
 
    DateTime startDate = ViewBag.fromDate ?? DateTime.Today.AddDays(-6);
    DateTime endDate = ViewBag.toDate ?? DateTime.Today;
    string currentUnit = ViewBag.Unit ?? "gm";
    var manufacturers = Model
        .GroupBy(m => m.Manufacturer)
        .Select(g => new
        {
            Manufacturer = g.Key,
            Color = g.First().Color
        })
        .ToList();
}
 
 
<div class="demo-section wide">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
            From: @(Html.Kendo().DatePicker().Name("fromDate").Value(startDate.ToString("yyyy-MM-dd")))
            To: @(Html.Kendo().DatePicker().Name("toDate").Value(endDate.ToString("yyyy-MM-dd")))
<button id="refreshChart">Refresh Chart</button>
<button id="clearFilter">Clear</button>
<button id="toggleUnit">@(currentUnit == "gm" ? "Switch to Troy oz" : "Switch to gm")</button>
</div>
<div>
<button class="tab" id="totalPoolTab">Total Pool</button>
<button class="tab" id="tmsTab" style="background-color: lightblue;">TMS</button>
</div>
<div>
            @foreach (var manufacturer in manufacturers)
            {
<span style="color:@manufacturer.Color">@manufacturer.Manufacturer</span>
            }
</div>
</div>
<div id="chartContainer">
        @(Html.Kendo().Chart(Model)
            .Name("chart")
            .Title("Historical Pool Data")
            .HtmlAttributes(new { style = "height: 400px;" })
            .Legend(legend => legend.Position(ChartLegendPosition.Bottom))
            .SeriesDefaults(seriesDefaults => seriesDefaults.Line().Stack(false))
            .Series(series => {
                foreach (var manufacturer in manufacturers)
                {
                    var manufacturerData = Model.Where(m => m.Manufacturer == manufacturer.Manufacturer).ToList();
                    series.Line(manufacturerData.Select(m => m.Pt_Remaining_Gms))
                          .Name("Pt - " + manufacturer.Manufacturer)
                          .Color(manufacturer.Color)
                          .Visible(true)
                          .Labels(labels => labels.Visible(true).Format("{0:N2} " + currentUnit));
                    series.Line(manufacturerData.Select(m => m.Ru_Remaining_Gms))
                          .Name("Ru - " + manufacturer.Manufacturer)
                          .Color(manufacturer.Color)
                          .Visible(false)
                          .Labels(labels => labels.Visible(true).Format("{0:N2} " + currentUnit));
                }
            })
            .CategoryAxis(axis => axis.Categories(Model.Select(m => m.Measurement_Record_Date.ToString("dd MMM yyyy")).Distinct()))
            .ValueAxis(axis => axis.Numeric()
                .Line(line => line.Visible(false))
                .Title("Weight (" + currentUnit + ")"))
            .Tooltip(tooltip => tooltip.Visible(true).Format("{0:N2} " + currentUnit))
        )
</div>
</div>
 
<script>
    $(document).ready(function () {
        function toISOStringWithMidday(date) {
            var localDate = new Date(date);
            localDate.setHours(12, 0, 0, 0);
            var offset = localDate.getTimezoneOffset() * 60000;
            var localMidday = new Date(localDate.getTime() - offset);
            return localMidday.toISOString();
        }
 
        $("#refreshChart").click(function () {
            refreshChart();
        });
 
        $("#toggleUnit").click(function () {
            var newUnit = '@currentUnit' == 'gm' ? 't oz' : 'gm';
            refreshChart(newUnit);
        });
 
        $("#clearFilter").click(function () {
            window.location.href = '@Url.Action("ChartTMS", "Target_Measurement_History")';
        });
 
        function refreshChart(newUnit) {
            var selectedFromDate = $("#fromDate").data("kendoDatePicker").value();
            var selectedToDate = $("#toDate").data("kendoDatePicker").value();
            var unitParam = newUnit || '@currentUnit';
 
            if (selectedFromDate && selectedToDate) {
                var difference = Math.abs(selectedToDate.getTime() - selectedFromDate.getTime());
                if (difference > 7 * 24 * 60 * 60 * 1000) {
                    alert("Please select a date range within 7 days.");
                    return;
                }
 
                var fromDateStr = toISOStringWithMidday(selectedFromDate);
                var toDateStr = toISOStringWithMidday(selectedToDate);
 
                window.location.href = '@Url.Action("ChartTMS", "Target_Measurement_History")' + '?fromDate=' + fromDateStr + '&toDate=' + toDateStr + '&unit=' + unitParam;
            } else {
                alert("Please select both from and to dates.");
            }
        }
 
        $("#totalPoolTab").click(function() {
            window.location.href = '@Url.Action("Chart", "Target_Measurement_History")';
        });
 
        $("#tmsTab").click(function() {
            window.location.href = '@Url.Action("ChartTMS", "Target_Measurement_History")';
        });
 
        $("#tmsTab").css("background-color", "lightblue");
 
        $(".tab").click(function() {
            $(".tab").css("background-color", "");
            $(this).css("background-color", "lightblue");
        });
    });
</script>

Chart

updated question on 29 Apr 2024

0 answers

119 views

Problem with render the org chart on browser

Hi Team,

I want to display the ORG chart in the Asp.net MVC application but it is not displayed. It shows only an empty page. No error is shown in the console. I have attached the screenshot below.

My Layout references are as :

<link rel="stylesheet" href="/Content/kendo/2022.3.913/kendo.common.min.css" />
    <link rel="stylesheet" href="/Content/kendo/2022.3.913/kendo.default.min.css" />
    <link rel="stylesheet" href="/Content/kendo/2022.3.913/kendo.default.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2022.3.1109/js/jquery.min.js"></script>
    <script src="~/Scripts/kendo/2022.3.913/kendo.all.min.js"></script>
    <script src="~/Scripts/kendo/2022.3.913/kendo.aspnetmvc.min.js" type="text/javascript"></script>
    <script src="~/Scripts/kendo/2022.3.913/kendo.dataviz.min.js"></script>
    <script src="~/Scripts/kendo/2022.3.913/kendo.orgchart.min.js"></script>

Razer page code as below:-

@using Kendo.Mvc.UI;

             @(Html.Kendo().OrgChart<fcPortoloManager.Models.Portolo.OrgChartViewModel>()
    .Name("orgchart")
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("Read", "OrganizationStructure"))
        .Model(m => {
            m.Id(f => f.ID);
            m.ParentId(f => f.ParentID);
            m.Name(f => f.Name);
            m.Title(f => f.Title);           
        })

And controller code is as below :

  public JsonResult Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(new
            {
                Data = OrgChartData
            }, JsonRequestBehavior.AllowGet);
        }
        public static OrgChartEmployeeViewModel One(Func<OrgChartEmployeeViewModel, bool> predicate)
        {
            return OrgChartData.FirstOrDefault(predicate);
        }
        private static IList<OrgChartEmployeeViewModel> OrgChartData
        {
            get
            {
                IList<OrgChartEmployeeViewModel> source = System.Web.HttpContext.Current.Session["OrgChartEmployees"] as IList<OrgChartEmployeeViewModel>;

                if (source == null)
                {
                    System.Web.HttpContext.Current.Session["OrgChartEmployees"] = source = new List<OrgChartEmployeeViewModel>
                    {
                    new OrgChartEmployeeViewModel() { ID = 1, Name = "Gevin Bell", Title = "CEO", Expanded = true, Avatar = "../content/web/treelist/people/1.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 2, Name = "Clevey Thrustfield", Title = "COO", Expanded = true, ParentID = 1, Avatar = "../content/web/treelist/people/2.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 3, Name = "Carol Baker", Title = "CFO", Expanded = false, ParentID = 1, Avatar = "../content/web/treelist/people/3.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 4, Name = "Kendra Howell", Title = "CMO", Expanded = false, ParentID = 1, Avatar = "../content/web/treelist/people/4.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 5, Name = "Sean Rusell", Title = "Financial Manager", Expanded = true, ParentID = 3, Avatar = "../content/web/treelist/people/5.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 6, Name = "Steven North", Title = "Senior Manager", Expanded = false, ParentID = 3, Avatar = "../content/web/treelist/people/6.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 7, Name = "Michelle Hudson", Title = "Operations Manager", Expanded = true, ParentID = 2, Avatar = "../content/web/treelist/people/7.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 8, Name = "Andrew Berry", Title = "Team Lead", ParentID = 5, Avatar = "../content/web/treelist/people/8.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 9, Name = "Jake Miller", Title = "Junior Accountant", ParentID = 5, Avatar = "../content/web/treelist/people/9.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 10, Name = "Austin Piper", Title = "Accountant", ParentID = 5, Avatar = "../content/web/treelist/people/10.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 11, Name = "Dilyana Newman", Title = "Accountant", ParentID = 5, Avatar = "../content/web/treelist/people/11.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 12, Name = "Eva Andrews", Title = "Team Lead", ParentID = 6, Avatar = "../content/web/treelist/people/12.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 13, Name = "Kaya Nilsen", Title = "Financial Specialist", ParentID = 6, Avatar = "../content/web/treelist/people/13.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 14, Name = "Elena Austin", Title = "Team Lead", ParentID = 4, Avatar = "../content/web/treelist/people/14.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 15, Name = "Lora Samuels", Title = "Lawyer", ParentID = 4, Avatar = "../content/web/treelist/people/15.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 16, Name = "Lillian Carr", Title = "Operator", ParentID = 7, Avatar = "../content/web/treelist/people/17.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 17, Name = "David Henderson", Title = "Team Lead", ParentID = 7, Avatar = "../content/web/treelist/people/16.jpg" },
                };
                }
                return source;
            }
        }

The model code is as below :

 public class OrgChartEmployeeViewModel {
        public int ID { get; set; }
        public string Name { get; set; }

        public string Title { get; set; }

        public bool Expanded { get; set; }

        public string Avatar { get; set; }

        public int ParentID { get; set; }
    }

Chart

OrgChart

asked on 30 Dec 2022

0 answers

136 views

Kendo.Mvc.UI package not found

i am getting the error when i use @html.kendo()

it showing are you missing any directives

>please suggest any solution

Installer and VS Extensions

asked on 12 Sep 2022

0 answers

73 views

I'm using kendo grid in asp.net MVC an passing parameter to child grid.

I want to add a bar chart to the child grid view and use the same parameter that I passing from the parent grid.

Is that possible?

And how can I do it.

I've been searching, but didn't find anything.

Thanks

Chart

Grid

asked on 07 Jul 2022

0 answers

64 views

Notes overlapping each other in line chart

I have tried to implement a line chart along with Notes,. but the problem arises when 2 notes are very close to each other they overlap and are not readable. I tried adding margin but could not achieve a good result even with rotation it looks very absurd.

I am trying to figure out a way where I can display the notes in one series alternatively top or down. But I can't find anything. I only got an option to display notes top or down per series. Need help with this?

Or if any other way I can achieve it with a readable format

Chart

asked on 21 Jul 2021

0 answers

73 views

Error loading chart

folks
My company has paid for a 3 license copy of KendoUI
I am posting here and not under the company registered user name as no one monitors that email

I am using

2012.2.710 release (because I can't upgrade

I get a error when the Chart is rendered
Error(see attachment):
0x800a01b6 - Microsoft JScript runtime error: Object doesn't support this property or method

Rendered chart HTML(5.0/4.1)/jquery(1.7.2):

<div class="k-widget k-chart" id="chart"></div><script>

jQuery(function(){jQuery("#chart").kendoChart({series:[{name:"Sale Value",type:"area",field:"SaleValue"}],categoryAxis:{categories:["2007","2008","2009","2010","2011"]},dataSource:{data:[{"Year":2007,"SaleValue":250000.0000},{"Year":2008,"SaleValue":500000.0000},{"Year":2009,"SaleValue":250000.0000},{"Year":2010,"SaleValue":500000.0000},{"Year":2011,"SaleValue":250000.0000}]}});});

</script>

Browser must IE8: nearly the biggest forgein client base, well be soon

code that made it happen ,includes commented out Telerik code that works with this model




@(Html.Kendo().Chart(Model.AnnualSalesList) 
    .Name("chart") 
    .Series(series => 
    { 
        series.Area(s => s.SaleValue); 
    }) 
    .CategoryAxis(axis => axis 
    .Categories(s => s.Year))  
        ) 
@* 
@(Html.Telerik().Chart(Model.AnnualSalesList) 
    .Name("chart") 
    .Legend(false) 
    .Series(series => 
    { 
        series.Area(s => s.SaleValue).Name("Sales by Year"); 
    }) 
    .CategoryAxis(axis => axis 
    .Categories(s => s.Year)) 
    .ValueAxis(axis => axis 
    .Numeric().Labels(labels => labels.Format("${0:#,##0}"))) 
    .Theme("Metro") 
    .HtmlAttributes(new { style = "width: 450px; height: 200px; margin: auto;" }) 
        ) 
*@

Regards

Greg

Chart

asked on 15 Nov 2012

0 answers

110 views

Chart does not show 0 value

Hi,
Im trying the telerick mvc chart control:

<% Chart<CollectionItem<decimal?>> chart =

Html.Telerik().Chart(Model.GraphData)

.Name("chart")

.Title(title => title

.Text(Model.GraphTitle)

.Visible(false)

)

.Legend(legend => legend

.Position(ChartLegendPosition.Top)

.Visible(false)

)

.SeriesDefaults(series =>

{

series.Column().Stack(false);

})

.Series(series =>

{

series.Column(s => s.Value)

.Name("Totalen")

.Color("#1f3975")

.Labels(labels => labels

.Margin(-6)

.Visible(true)

.Template("<#= value #>")

.Position(ChartBarLabelsPosition.OutsideEnd));

})

.CategoryAxis(axis => axis

.Categories(s => s.Text)

.Color("#000000")

.Labels(labels => labels.Margin(-6).Visible(true))

.MajorGridLines(majorGridLines => majorGridLines.Color("#ddd"))

)

.ValueAxis(axis => axis

.Numeric().Labels(labels => labels.Margin(0).Format("{0:#,##0}")).Min(0)

.MajorUnit(Model.GraphMajorUnit)

.Color("#000000")

.Labels(labels => labels.Visible(false))

.MajorGridLines(majorGridLines => majorGridLines.Color("#ddd"))

)

.Tooltip(tooltip => tooltip

.Visible(false)

.Template("<#= category #>: <#= value #>")

.Format("{0:#,##0}")

)

.HtmlAttributes(new { style = "width: 225px; height: 78px;" });

chart.Render();

%>

The problem is that when one of my bars, has 0 as value, i dont' see the value on the bar, it's then empty. How can i show the 0 on the bar? i tried :

.ValueAxis(axis => axis

.Numeric().Labels(labels => labels.Margin(0).Format("{0:#,##0}")).Min(0)

.MajorUnit(Model.GraphMajorUnit)

.Color("#000000")

.Labels(labels => labels.Visible(false))

.MajorGridLines(majorGridLines => majorGridLines.Color("#ddd"))

But it does not work.

Chart

asked on 18 Oct 2012

0 answers

62 views

Series and Line format

Hi,

I'd like to understand something concerning the line is the series.

Here's my code :

@(Html.Kendo().Chart<Noolibee.Presentation.Web.Administration.Areas.Nodes.Models.EnergyGraphModel>()

.Name("intensityKendoChart")

.ChartArea(chart => chart.Background(""))

.DataSource(dataSource => dataSource.Read(read => read.Action("GetIntensityValues", "Plugins")))

.Series(series =>

{

series

.Line(line => line.Value)

.Name("Ampere")

.Color("blue")

.Tooltip(true)

.Width(2)

.Markers(marker => marker.Type(ChartMarkerShape.Circle).Size(4));

})

)

Between 2 markers, I have a nice blue line.

Then I try to add a value for the XAxis, so I added the line:
.CategoryAxis(axis => axis.Categories(model => model.Date))

Now, the nice blue line has disappeared but the dates are displayed in on the axis ! Why ? How can I have my Xaxis with the dates and a nice blue line between the markers ?

Another little question : how to customize the dates so all dates are not displayed because it's a big mess on the axis :-)

Thanks
Sylvain

Chart

asked on 16 Oct 2012

0 answers

139 views

Chart binding

Hello,

I have a Problem with Chart Binding . Now I am trying to generate a chart in MVC3 that display values from the database using Entity Framework. and I follow all the instructions from the link below

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/overview
But that Gives the Error below.

"This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet."

How to solve this problem.
Can you provide any sample code of charts that using Entity framework?

Chart