Questions on UI for ASP.NET MVC Forum

1 answer

141 views

Kendo UI Column Chart data binding not working

In MVC application I am using Kendo column charts and I have the data as below.

Type	Percentage	Date	Color
A	25.5	2/12	#2456C7
B	70	2/13	#2456C8
B	50	2/14	#2456C8
B	55.5	2/15	#2456C8
A	60.3	2/13	#2456C8

I want to create a column chart with this data, chart should be categorized by Date and there should be multiple columns depending on the type.

I wrote the below code snippet but it isn't working, cannot see the data on UI.

 @(Html.Kendo().Chart<EntitiesA.Report>
                ()
                .Name("Report")
                .Title("ReportA")
                .Legend(legend => legend
                .Position(ChartLegendPosition.Top)
                )
                .DataSource(dataSource => dataSource
                    .Read(read => read.Action("MethodReport", "ReportController"))
                    .Group(group => group.Add(model => model.Type))
                    .Sort(sort => sort.Add(model => model.Date).Ascending())
                )
                .Series(series =>
                {
                    series.Column(model => model.Percentage)
                        .Name("#= group.value # (Percentage)").CategoryField("Date").ColorField("Color");
                })
                .Legend(legend => legend
                    .Position(ChartLegendPosition.Bottom)
                )
                .CategoryAxis(axis => axis
                    .Labels(labels => labels.Format("MM/DD"))
                )
                .ValueAxis(axis => axis.Numeric()
                                .Labels(labels => labels.Format("{0:N0}"))
                                .MajorUnit(20)
                                .Max(100)
                                .Line(line => line.Visible(false))
                )
                .Tooltip(tooltip => tooltip
                .Visible(true)
                .Format("{0:N0}")
                )
                )

I don't see any data in the graph it is blank how to fix it, am I missing any logic or piece of code.

Chart

answered on 20 Feb 2023

0 answers

120 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

137 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

2 answers

76 views

Setting Grid Data on Client

I have a page that has a pie chart and a grid. Both controls use the same data. I could create a data source for each control and have it call the service twice, but that seems inefficient. Is there a way to define the data source for the chart and handle an event when the data is returned and assign the data to the grid's data source?

Which event should be handled?

What's the command to assign the data to the grid's data source?

Thanks

Chart

Grid

answered on 28 Jul 2022

0 answers

74 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

1 answer

83 views

Conditionally change Marker based on data in ScatterLine chart

I am trying to customize the Marker of a ScatterLine chart. If the data is of type A then show ChartMarkerShape.Triangle otherwise show ChartMarkerShape.Circle?

This is my current code

@(Html.Kendo().Chart(Model.DosageUnitsOfInsulin)
.Name("DosageTotal")
.Title("Total Series")
.Series(series => {

series.ScatterLine(model => model.DosageDate, model => model.DosageTotal).Width(4).ColorHandler("getColor");
})
.SeriesDefaults(seriesDefaults => seriesDefaults
.ScatterLine().Markers(markers => markers.Size(20).Type(ChartMarkerShape.Circle)).Color("#47AADF")
)

.XAxis(x => x
.Date()
.BaseUnit(ChartAxisBaseUnit.Days)
.Title(title => title.Text(""))
.Labels(m => m.DateFormats(v => v.Days("M/d/yyyy") ))
.Min(new DateTime(2021,2,7))
.Max(new DateTime(2021, 9, 28))
.MinorGridLines(m => m.Visible(true))
.MajorGridLines(m => m.Visible(true))
)
.YAxis(y => y
.Numeric()
.Title(title => title.Text("Units of Insulin"))
.Min(65)
.Max(110)
.AxisCrossingValue(-5)

)
.Theme("sass").Legend(leg => {
leg.Position(ChartLegendPosition.Bottom);
})
.Tooltip(tooltip => tooltip
.Format("{0:d}, {1}")
.Visible(true)
)
.Events(events => events.Render("onRender"))
.Zoomable()
.Pannable()
)

Is it possible to dynamically change the marker when the chart is rendered? I have subscribed to the Visual event like the Custom Visual example. However, I just want the standard Telerik circle and sometimes triangle visual not a custom image.

Thanks,

Tim

Chart

answered on 06 Jun 2022

2 answers

184 views

kendo asp.net MVC add a link to custom chart.Legend

Hey guys,

I added a custom legends to my graph chart usining Legend. Item.Visual

now i want to add a link near of every legend that do something:

I tried to add labels.template with a simple string- just to check if it works before i change it to link, but it shows nothing,

I tried to googled it, but i didn't find any relevant information.

here is my chart and custom function for legens:

@(Html.Kendo().Chart()
.Name("stacked-bars")

.Legend(legend => { legend.Position(ChartLegendPosition.Left).Margin(m => m.Right(100)).Orientation(ChartLegendOrientation.Vertical).Item(i => i.Visual("createLegendItem"))

.Labels(l => l.Template("some text to check if works")); })

.SeriesDefaults(seriesDefaults =>
seriesDefaults.Column().Stack(true).Gap(10).Spacing(1.3)
)
.Series(series =>
{
series.Column(Model.Nidkha).Color("#E6BA55").Name("name1");
series.Column(Model.Betipul).Color("#E655AE").Name("name2");

series.Column(Model.TakinPaarKaspi).Color("#55BFE6").Name("name3");

})

.CategoryAxis(axis => axis
.Categories(Model.Months.Select(m => m.ToString()).ToArray())
.MajorGridLines(lines => lines.Visible(false))
)
.Panes(panes => panes.Add().Clip(false))
.ValueAxis(axis => axis
.Numeric()
.Labels(labels => labels.Format("{0}").Position(ChartAxisLabelsPosition.End))
.Line(line => line.Visible(false))
.MajorGridLines(lines => lines.Visible(true))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= series.name #: #= value #")
)
)

</script>

and this is my result:

any advice?

thanks in advance.

Chart

answered on 16 Mar 2022

1 answer

66 views

Pie chart series label lines are backwards

I am having some odd behavior in our application where it appears the series label lines are being rendered backwards (see backwards.png). I am trying to construct a test case that displays this behavior, but I haven't had any luck, I just get the correct positioning (see correct.png).

Does anyone here have any thoughts on what might be causing this? Some obscure CSS setting or such?

Chart

answered on 21 Dec 2021

1 answer

237 views

Chart trend line

Hey, I want to create a chart with a trend line in kendo MVC.

Is there a way to accomplish this in kendo MVC?

Or do I have to calculate every single point in the trend line myself?

Chart

answered on 14 Dec 2021

1 answer

72 views

Yaxis step size

Hello

I hvae just started to use line chart and i am using demo exmple but y axis looks very bad

@using Kendo.Mvc.UI;

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

 

<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default" style="min-height: 100px;">
                <div class="panel-body index" style="padding: 0px">
                    Todays Totals
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-2">
            <div class="panel panel-default" style="min-height: 500px;">
                <div class="panel-body index" style="padding: 0px">
                    Filters
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="panel panel-default" style="min-height: 500px;">
                <div class="panel-body index" style="padding: 0px">
                    Sales by platform
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="col-lg-12">
                <div class="panel panel-default" style="min-height: 400px;">
                    <div class="panel-body index" style="padding: 0px">
                        <div class="k-content wide">
        
                            @(Html.Kendo().Chart()
     .Name("chart1")
     .Title("Internet Users")
     .Legend(legend => legend
         .Position(ChartLegendPosition.Bottom)
     )
     .Series(series =>
     {
         series.Line(new double[] { 15.7, 16.7, 20, 23.5, 26.6 }).Name("World");
         series.Line(new double[] { 67.96, 68.93, 75, 74, 78 }).Name("United States");
     })
     .CategoryAxis(axis => axis
         .Categories("2005", "2006", "2007", "2008", "2009")
         .MajorGridLines(lines => lines.Visible(false))
     )
     .ValueAxis(axis => axis
         .Numeric().Labels(labels => labels.Format("{0}%"))
     )
)

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="panel panel-default" style="min-height: 270px;">
                    <div class="panel-body index" style="padding: 0px">
                        Grid
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>