I am using Kendo UI Chart, I want to draw a chart with multiple colors.
I am using code like:
#(Html.Kendo().Chart()
.Name("chart")
.Title("D I S C")
.Legend(legend => legend
.Visible(false)
)
.Series(series =>
{
series.Column(new int[] { 94,66,12,12 }).Color("#ff0000");
})
.CategoryAxis(axis => axis
.Name("series-axis")
.Categories("94","66","12","12")
//.Categories
.Line(line => line.Visible(false))
)
)
but its showing one color for each bar.
i want to show different color in every bar.
Please help me to create chart with multiple color.
I'm not familiar with kendo ui chart api, but it seem like you may need to specify more series of data, like this:
.Series(series =>
{
series.Column(new int[] { 94 }).Color("#ff0000");
series.Column(new int[] { 66 }).Color("#ffff00");
series.Column(new int[] { 12 }).Color("#00ff00");
})
I have a Kendo UI grid (using MVC) created with the snippet here.
#(Html.Kendo().Grid<EntityResultTypeWhichDoesntMatter>().Name("searchresults")
.Events(events => events.DataBound("onDataBound"))
.Pageable()
.Scrollable(s => s.Height("auto"))
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Driver_Read", "Driver").Data("getSearchCriteria"))
.PageSize(10)
).Columns(s =>
{
s.Bound(p => p.HiddenIdField).Visible(false);
s.Bound(p => p.FirstName).Title("First Name").Width(150);
s.Bound(p => p.LastName).Title("Last Name").Width(150);
s.Bound(p => p.EmployeeNumber).Title("Employee Number").Width(170);
s.Bound(p => p.ExtraField1).Title("Extra Field1").Width(180);
s.Bound(p => p.ExtraField2).Title("Extra Field2").Width(170);
s.Command(command => command.Custom(Edit).Click("edit")).Width(80).Visible(Model.CanEdit);
}).Filterable().Resizable(e=>e.Columns(true)))
As you can see, the columns are specified with explicit "width" properties and also the grid is "Resizable" too.
The issue that I'm facing is that when dragging the mouse to resize the grid, it shows like the below one
the blue box in the middle of the first column heading represents the position of the mouse pointer while dragging. It's kind of an odd experience as the resize is not running along with the mouse position. I saw this solution but it didn't seem to work for me. Any idea? Thanks.
The column widths are too small and their sum is less than the total Grid width. This leads to "jumping" of the currently resized column. The documentation explains more:
http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#columns
I am trying to get my initial column widths correct for my Kendo Grid. This is driving me crazy!
My grid is like the following...
<table class="MyTableClass">
<thead>
<tr>
<th>
#(Html.Kendo().Grid(Model.MyModel).Name("myGrid").HtmlAttributes(new { #class = "shadow", style = "height:40%;width:100%" })
.Extra(false)
.Operators(...)
.Resizable(resize => resize.Columns(true))
.Sortable().Scrollable().Pageable().Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
.DataSource(dataSource => dataSource.Ajax().ServerOperation(false).PageSize(25))
.Columns(columns =>
columns.Bound(p => p.Property1).Title("MyProperty1").ClientTemplate("...");
columns.Bound(p => p.Property2).Title("MyProperty2").ClientTemplate("...").Width(100);
columns.Bound(p => p.Property3).Title("MyProperty3").ClientTemplate("...");
columns.Bound(p => p.Property4).Title("MyProperty4").ClientTemplate("...").Width(100);
...
as you can see I have set widths for all but two of the columns which I want to take up the rest of whatever the width is. This works great except when the width is small the two columns without the explicit width setting are basically zero width and therefore seems missing.
I am trying to set a minimum width on the columns (that don't have the width explicit) where if it is less than 100 then it sets the width to 100.
I've tried everything I can think of and got close with calling the following on document load...
function setColumnMinimumWidths() {
$("#myGrid colgroup col").each(function () {
if ($(this).width() < 100) {
$(this).css("width", "100px");
}
})
}
this does the trick but then after resizing the window all the other columns now resize evenly (ignoring the explicit widths).
any kendo or javascript experts out there that have any ideas?
If you have in your grid some columns that have fixed grid and some doesn't, columns with width property will have provided width and rest of the columns will take rest of the place divided equally.
The simplest thing you can do is set minimum width of the grid in css:
#grid{
min-width: 400px;
}
Check this example: http://dojo.telerik.com/OHOku
I have a Kendo Pivot Grid that has only one row, one column and one measure. I have it set up to display the dates on the top of the grid, the time intervals down the left side (rows) and the "Value" column should be the grid cell values. I am able to get the dates to display across the top and I am able to get the measure to display in the grid but I am not able to get the Time intervals to display down the left side as a row. My model is set up exactly as the data is in SQL (ForecastDate - Date, Forecast Interval - TimeSpan, Value - Decimal). As seen in the Pivot Grid Screen Shot I am getting [object Object] next to the Forecast Interval. I need to get the interval values to display. How can I do this?
SQL Data
Pivot Grid Screen Shot
#(Html.Kendo().PivotGrid<BluePrint.Models.ForecastFactor_Select_Result>()
.Name("arpPivot")
.ColumnWidth(75)
.Height(300)
.DataSource(ds => ds
.Ajax()
.Transport(transport => transport.Read(r => r.Action("Interval_PivotGridRead", "ForecastFactorDataMaintenance").Data("pivotParameters")))
.Schema(s => s
//.Model(m => m.Field(f => f.ForecastDate))
.Cube(c => c
.Dimensions(d =>
{
d.Add(m => m.ForecastDate).Caption("Forecast Date");
d.Add(m => m.ForecastInterval).Caption("Forecast Interval");
})
.Measures(m =>
{
m.Add("Value").Field("Value").AggregateName("average");
})
)
)
.Columns(c =>
{
c.Add("ForecastDate").Expand(true);
})
.Rows(r =>
{
r.Add("ForecastInterval").Expand(true);
})
.Measures(m =>
{
m.Values(v =>
{
v.Add().Name("Value").Type("Value");
});
})
.Events(e => e.Error("onError"))
)
.ColumnHeaderTemplate("#= columnHeaders(tuple, member) #")
//.RowHeaderTemplate("#= rowHeaders(tuple, member) #")
// .DataCellTemplate("<span style='float:right' class='#= getDataCellClass(columnTuple, rowTuple, dataItem, measure) #'>#= (dataItem.value!='') ? kendo.parseFloat(kendo.toString(dataItem.value,'n2')):'-' #</span>")
//.DataCellTemplate("<span style='float:right' class='#= getDataCellClass(columnTuple, rowTuple, dataItem, measure) #'>#= (dataItem.value!='') ? (showtotal(rowTuple,dataItem)? kendo.parseFloat(kendo.toString(dataItem.value,'n2')):'-'):'-' #</span>")
)
I am currently trying to evaluate the Kendo UI asp.net mvc 6 ("asp.net core") widgets. I downloaded the example project Kendo.Mvc.Examples project, which can be found here: http://docs.telerik.com/kendo-ui/aspnet-mvc/aspnetmvc-apps/mvc-6/introduction
The example project works just fine. Now I am trying to create my own skeleton project as follows:
Created a new Visual Studio project using ASP.NET 5 Web Application template
Added "Kendo.Mvc": "2016.1.301"dependency in my project json.
Added services.AddKendo(); in Startup.ConfigureServices()
Modified my Index.chtml to include Kendo UI controls:
#using Kendo.Mvc.UI
#{
ViewData["Title"] = "My Things Dashboard";
}
#ViewData["Title"]
Currently Running Things
#(Html.Kendo().Button()
.Name("iconTextButton")
.HtmlAttributes(new { type = "button" })
.Icon("ungroup")
.Content("Kendo UI Button"))
#(Html.Kendo().Chart()
.Name("chart")
.Title("Gross domestic product growth \n /GDP annual %/")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.ChartArea(chartArea => chartArea
.Background("transparent")
)
.SeriesDefaults(seriesDefaults =>
seriesDefaults.Area().Line(line => line.Style(ChartLineStyle.Smooth))
)
.Series(series =>
{
series.Area(new double[] { 3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855 }).Name("India");
})
.CategoryAxis(axis => axis
.Categories("2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011")
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Labels(labels => labels.Format("{0}%"))
.AxisCrossingValue(-10)
.Line(line => line.Visible(false))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}%")
.Template("#= series.name #: #= value #")
)
)
When I run the app, the button is displayed correctly but the chart does not appear. However, viewing the html source I can see that the chart is being generated:
Currently Running Things
Kendo UI ButtonjQuery(function(){jQuery("#iconTextButton").kendoButton({"icon":"ungroup"});});
<div id="chart" name="chart"></div><script>jQuery(function(){jQuery("#chart").kendoChart({"categoryAxis":[{"categories":["2002","2003","2004","2005","2006","2007","2008","2009","2010","2011"],"majorGridLines":{"visible":false}}],"chartArea":{"background":"transparent"},"legend":{"position":"bottom"},"series":[{"name":"India","type":"area","data":[3.907,7.943,7.848,9.284,9.263,9.801,3.89,8.238,9.552,6.855]},{"name":"World","type":"area","data":[1.988,2.733,3.994,3.464,4.001,3.939,1.333,-2.245,4.339,2.727]},{"name":"Haiti","type":"area","data":[-0.253,0.362,-3.519,1.799,2.252,3.343,0.843,2.877,-5.416,5.59]}],"title":{"text":"Gross domestic product growth \n /GDP annual %/"},"tooltip":{"format":"{0}%","template":"#= series.name #: #= value #","visible":true},"valueAxis":[{"axisCrossingValue":[-10],"labels":{"format":"{0}%"},"line":{"visible":false},"type":"numeric"}],"seriesDefaults":{"area":{"line":{"style":"smooth"}}}});});</script>
Not sure what I am doing wrong....thanks for any help!
OK solved the problem thanks to the following Telerik troubleshooting link: http://docs.telerik.com/kendo-ui/troubleshoot/troubleshooting-common-issues#kendo-ui-widgets-are-unavailable-or-undefined
jquery was referenced after the kendo ui scripts in the page. Make sure to include jquery before kendo ui