Hi ,
i am in learning phase of asp.net mvc charts. i am able to see data in controller but it is not displayed in view. can you please help. thanks in advance
controller code
[HttpPost]
public ActionResult DisplayChart([DataSourceRequest]DataSourceRequest request, string item)
{
var result = Enumerable.Range(0, 50).Select(i => new Chart
{
bytes = i.ToString(),
OS = "Android" + i.ToString(),
protocol = "SMTP" + i.ToString(),
Device = i.ToString(),
IP = "10.97.216." + i.ToString(),
Location = "Location" + i.ToString(),
Network = "Telstra " + i,
VLAN = "VLAN " + i.ToString(),
ChartNumber1 = 10 + i,
ChartNumber2 = 20 + i.ToString(),
ChartNumber3 = 30 + i,
Year = "201"+ i.ToString()
});
if (item != null)
{
var children = result
.Where(p => p.Location == item)
.ToList();
return Json(children.ToDataSourceResult(request));
}
else
{
var children = result
.ToList();
return Json(children.ToDataSourceResult(request));
}
}
and cshtml code is
<div class="row">
<div class="col-xs-18 col-md-12">
<div class="demo-section k-content wide">
@(Html.Kendo().Chart<TelerikMvcApp1.Models.Chart>()
.Name("chart2")
.Title(" Sample Chart")
.Legend(legend => legend
.Position(ChartLegendPosition.Top)
)
.ChartArea(chartArea => chartArea
.Background("transparent")
)
.DataSource(ds => ds.Read(read => read.Action("DisplayChart", "Chart")))
.Series(series =>
{
series.Column(model => model.ChartNumber1).Name("ChartNumber1").CategoryField("Year");
series.Column(model => model.ChartNumber2).Name("ChartNumber2").CategoryField("Year");
series.Column(model => model.ChartNumber3).Name("ChartNumber3").CategoryField("Year");
})
.CategoryAxis(axis => axis
.Categories(model => model.Year)
)
.AutoBind(true)
.ValueAxis(axis => axis.Numeric()
.Labels(labels => labels.Format("{0:N0}"))
.MajorUnit(10)
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= series.name #: #= value #")
)
.Events(events => events
.SeriesClick("onSeriesClick")
.SeriesHover("onSeriesHover")
.DataBound("onDataBound")
.AxisLabelClick("onAxisLabelClick")
.PlotAreaClick("onPlotAreaClick")
.PlotAreaHover("onPlotAreaHover")
.Render("onRender")
.LegendItemClick("onLegendItemClick")
.LegendItemHover("onLegendItemHover")
.DragStart("onDragStart")
.Drag("onDrag")
.DragEnd("onDragEnd")
.ZoomStart("onZoomStart")
.Zoom("onZoom")
.ZoomEnd("onZoomEnd")
)
)
</div>
</div>
</div>
<script>
function onSeriesClick(e) {
console.log(kendo.format("Series click :: {0} ({1}): {2}",
e.series.name, e.category, e.value));
}
function onSeriesHover(e) {
console.log(kendo.format("Series hover :: {0} ({1}): {2}",
e.series.name, e.category, e.value));
}
function onDataBound(e) {
console.log("Data bound");
}
function onAxisLabelClick(e) {
console.log(kendo.format("Axis label click :: {0} axis : {1}",
e.axis.type, e.text));
}
function onPlotAreaClick(e) {
console.log(kendo.format("Plot area click :: {0} : {1:N0}",
e.category, e.value
));
}
function onPlotAreaHover(e) {
console.log(kendo.format("Plot area hover :: {0} : {1:N0}",
e.category, e.value
));
}
function onRender(e) {
console.log("Render");
}
function onLegendItemClick(e) {
console.log(kendo.format("Legend item click :: {0}",
e.text));
}
function onLegendItemHover(e) {
console.log(kendo.format("Legend item hover :: {0}",
e.text));
}
function onDragStart(e) {
console.log("Drag start");
}
function onDrag(e) {
console.log("Drag");
}
function onDragEnd(e) {
console.log("Drag end");
}
function onZoomStart(e) {
console.log("Zoom start");
}
function onZoom(e) {
console.log(kendo.format("Zoom :: {0}", e.delta));
// Prevent scrolling
e.originalEvent.preventDefault();
}
function onZoomEnd(e) {
console.log("Zoom end");
}
//$(function () {
// $(document).bind("kendo:skinChange", updateTheme);
//});
//function updateTheme() {
// $("#chart2").getKendoChart().setOptions({ theme: kendoTheme });
//}
</script>
6 Answers, 1 is accepted
Rank 1
Rank 1
Rank 1
Rank 1
is there no support from telerik on the issue as advertised on website.can anyone please respond to below query ?
just figured out that if i pass array directly to chart it appears but if i pass model which contains arrays then nothing displayed.
below is my model
namespace TelerikMvcApp1.Models
{
public class Sales
{
public int[] Year { get; set; }
public int[] production { get; set; }
public int[] production2 { get; set; }
}
}
controller:
public ActionResult Chat([DataSourceRequest]DataSourceRequest request)
{
Sales salesData = new Sales();
salesData.production = new int[5] { 11, 2, 15, 3, 80 };
salesData.production2 = new int[5] { 1, 21, 35, 3, 8 };
salesData.Year = new int[5] { 2004, 2005, 2006, 2008, 2010 };
return Json(salesData);
}
and cshtml:
@(Html.Kendo().Chart<TelerikMvcApp1.Models.Sales>()
.Name("chart3")
.Title("Gross domestic product growth \n /GDP annual %/")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.ChartArea(chartArea => chartArea
.Background("transparent")
)
.DataSource(ds => ds.Read(read => read.Action("Chat", "Chart2")))
.SeriesDefaults(seriesDefaults =>
seriesDefaults.Line().Style(ChartLineStyle.Smooth)
)
.Series(series =>
{
series.Line(model => model.production).Name("Production");
})
.CategoryAxis(axis => axis
.Categories("2004", "2005", "2006", "2008", "2010")
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric().Labels(labels => labels.Format("{0}%"))
.Line(line => line.Visible(false))
.AxisCrossingValue(-10)
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}%")
)
.Events(events => events
.DataBound("chart_onDataBound")
.SeriesClick("chart_onSeriesClick")
)
)
The initial issue occurs because the ToDataSource result method is used. This method is applying additional formatting on the response and the Chart is not able to parse it.
Also, the Chart is working with numeric values in its value axis, as for example the string "some string" cannot be correctly displayed on the value based axis.
I made an example based on the provided code and attached it for reference.
=====================================
As for the response time, the forum does not have a set specific response time, we usually try to respond within two business days, but this can vary depending on the current tasks.
More details on the response time can be found here:
https://www.telerik.com/purchase/support-plans
If there is a different place on our website, that different response times are advertised we will be happy to share it with us, so we can remove the misleading information.
Thank you in advance for the cooperation.
Regards,
Stefan
Progress Telerik
Rank 1