i'm trying to show value labels at top of the my chart's columns. I use Kendo UI.
I find this example but i havent done it. It's example:
Label Example
How can i show 100 and 20 values like in the example chart?
I have tried this code but i failed.
.Labels(labels => labels
.Visible(true).Format("C").Position(ChartBarLabelsPosition.OutsideEnd)
)
Here is my chart code. What can i do? Thanks for your help.
#(Html.Kendo().Chart(Model.TarihVM)
.Name("chart")
.Title(title => title
.Text("my chart title")
.Position(ChartTitlePosition.Top))
.Legend(legend => legend
.Visible(true)
.Position(ChartLegendPosition.Top))
.Series(series =>
{
series
.Column(model => model.deneme, categoryExpression: model => model.date).Name("deneme")
.Aggregate(ChartSeriesAggregate.Count);
series
.Column(model => model.digerdeneme, categoryExpression: model => model.date).Name("digerdeneme")
.Aggregate(ChartSeriesAggregate.Count);
series
.Column(model => model.KapsamDisi, categoryExpression: model => model.date).Name("Kapsam Dışı Dosyalar")
.Aggregate(ChartSeriesAggregate.Count);
})
.CategoryAxis(axis => axis
.Date()
.BaseUnit(ChartAxisBaseUnit.Months)
.MajorGridLines(lines => lines.Visible(true))
)
.Theme("metro")
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= series.name #: #= value #"))
)
Please try below code in the label to resolve the issue:
.Labels(label => label.Visible(true)
.Format("{0:C0}")
.Position(ChartBarLabelsPosition.OutsideEnd))
Here is the answer thank you #D_Learning and #Nitin Mall!
Here is the solution if someone needs it:
.Series(series =>
{
series
.Column(model => model.deneme, categoryExpression: model => model.EvrakTarih)
.Name("deneme")
.Aggregate(ChartSeriesAggregate.Count)
.Labels(labels => labels.Visible(true).Format("C").Position(ChartBarLabelsPosition.OutsideEnd);
);
Related
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.
If I'm not mistaken you want a Date axis, right? If so you can also specify that via the CategoryAxis configuration:
#(Html.Kendo().Chart<Report>()
.CategoryAxis(axis => axis
.Date()
.BaseUnit(ChartAxisBaseUnit.Days)
.Labels(labels => labels.Format("MM/dd"))
)
...
)
Passing some sample data renders the Chart - example
I have a kendo chart with date time series on x-axis as below but i wanted to fix the number of labels on the axis. Could you please help me on this how to acheive.
#(Html.Kendo().Chart(Model.ParameterValueList)
.Name("chart")
.Title("Chart Title")
.DataSource(ds => ds
.Group(group => group.Add(model => model.Parameter.Name))
)
.Series(series =>
{
series.Line(Model.ParameterValueList).CategoryField("ReceiveTime").Field("Value").Stack(false);
})
.CategoryAxis(axis => axis
.Categories(model => model.ReceiveTime).Date().RoundToBaseUnit(true)
.Labels(l => l.Rotation(-45).Format("dd MMM yyyy hh:mm:ss").Step(2))
.MajorGridLines(x=>x.Step(5))
.MajorTicks(x=>x.Size(5))
)
.Legend(legend => legend
.Visible(true).Position(ChartLegendPosition.Right)
)
.ChartArea(a => a.Width(800).Height(250))
.Tooltip(t => t.Visible(true).Template("${series.name} : ${value}"))
)
In the Kendo Grid there is a foreign key column, and I retrieve the select list from ViewData. Grid's edit mode is InLine.
When I want to add a new record, the first item is selected. If I don't change it and don't select anything else, column's value will be null on the server side.
How can I specify a default value for this column? Please note that ID's are user-generated and I'm not able to guess which Id will the first Item.
This is the Grid:
#(Html.Kendo().Grid<InvtMat>()
.Name("BOM")
.Columns(columns =>
{
columns.ForeignKey(x => x.CGoodCode, (IEnumerable)ViewData["Goods"], "Id", "Text");
// removed for brevity
columns.Command(command => { command.Edit(); command.Destroy(); });
})
.ToolBar(toolbar =>
{
toolbar.Create();
})
.Editable(edit => edit.Mode(GridEditMode.InLine))
.DataSource(ds =>
ds.Ajax()
.Model(model =>
{
model.Id(x => x.CGoodCode);
model.Id(x => x.CGoodCode1);
})
)
)
You can set default value for Grid's model inside DataSource.Model section.
Here is an example:
.DataSource(ds =>
ds.Ajax()
.Model(model =>
{
model.Id(x => x.CGoodCode);
model.Field(x => x.CGoodCode).DefaultValue(0);
})
)
Because you don't know what default value you must write there, then you should find it first before you define the Grid. I suppose you have something like this in your controller:
var goods = // get goods from DB.
var goodsDV= goods.First().Id;
ViewData["Goods"] = goods;
ViewData["GoodsDefaultValue"] = goodsDV;
Or you could also perform this in razor view
#{
var firstGood = ((IEnumerable<Good>)ViewData["Goods"]).First();
ViewData["GoodsDefaultValue"] = firstGood.Id;
}
Then use it like this
model.Field(x => x.CGoodCode).DefaultValue(ViewData["GoodsDefaultValue"]);
Easy right?!
I am a new babie for Kendo UI for MVC, I am trying to customise row color when doing batch editing for a grid, I looked in the internet but couldn't find any info. After editing a cell for batch editing grid by default Kendo add a small red spot at the top left hand side of the cell , what I want to achieve after editing any cell the whole row for that record change change it color. I would like to change the row to green for example to give the user more visibility what row have been edited before click save. I would really app if someone could help me.
code
#(Html.Kendo().Grid<MvcKendo.Models.Availablity>().Name("grid")
.Columns( columns => {
columns.Bound(c => c.Id);
columns.Bound(c => c.TimeFrom);
columns.Bound(c => c.TimeTo);
})
.DataSource(datasource => datasource.Ajax().PageSize(5)
.Read("GetDataAvailablity","Home"))
.ClientDetailTemplateId("template")
)
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().TabStrip()
.Name("tabStrip_#=Id#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("TimeSheet Details").Content(#<text>#TimeSheetDetails()</text>);
})
.ToClientTemplate()
)
#helper TimeSheetDetails()
{
#(Html.Kendo().Grid<MvcKendo.Models.TimeSheet>()
.Name("grid_#=Id#")
.Events(e => {
e.DataBound("onDataBound");
e.Change("ChangeEvent");
})
.Columns(columns =>
{
columns.Bound(t => t.Id);
columns.Bound(t => t.WardName);
})
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
.Editable(editable => editable.Mode(GridEditMode.InCell))
.ToolBar(tb=>tb.Save())
.DataSource(dataSource => dataSource
.Ajax().Batch(true)
.PageSize(5)
.Model(model=>model.Id(x=>x.Id))
.Read(read => read.Action("GetDataTimeSheet", "Home", new { Id = "#=Id#" }))
.Update(update => update.Action("Editing_Update", "Home"))
.Events(events => events.Error("error_handler"))
)
.Pageable().Sortable().ToClientTemplate()
)
![enter image description here][2]}
You can make use of the save event in Kendo grid to achieve this
C#
.Events(events => events.Save("onSave")
Javascript
function(e) {
$(e.container).closest("tr").css("background-color","lightgreen");
}
Here's the fiddle for the sample in JS
I'm trying to display a Kendo dataviz piechart with the following information.
I'm passing 'results' back from my controller to my view.
My view contains the piechart:
#(Html.Kendo().Chart<PropertyViewModel>()
.Name("chart")
.Title("Properties")
.Legend(legend => legend
.Position(ChartLegendPosition.Top)
)
.DataSource(ds => ds.Read(read => read.Action("GetPropertiesChart", "Home")))
.Series(series => {
series.Pie(model => model.Address.State, model => model.Address.State.Count().ToString());
})
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0:N0}")
)
)
I get nothing but a blank area on my page where the piechart should be.
Controller code:
public ActionResult GetPropChart()
{
var allProps = PService.GetAll();
var props = allProps.Cast<PropViewModel>().ToList();
var results = props
.GroupBy(item => item.Address.State)
.Select(g => new
{
State = g.Key,
Count = g.Select(l => l.Address.State).Count()
});
return Json(results);
}
The model you return is as follows:
.Select(g => new
{
State = g.Key,
Count = g.Select(l => l.Address.State).Count()
}
However your series definition are different (there is no Adress property)
series.Pie(model => model.Address.State)
Also binding to methods (such as model.Address.State.Count().ToString()) is Not supported - created regular property which holds the value instead.