This is a migrated thread and some comments may be shown as answers.

data not showing up in view of asp.net mvc chart

6 Answers 151 Views
Chart
This is a migrated thread and some comments may be shown as answers.
onjus
Top achievements
Rank 1
onjus asked on 09 May 2018, 06:30 AM

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

Sort by
0
onjus
Top achievements
Rank 1
answered on 09 May 2018, 06:34 AM
Databound and render event are firing successfully. and i can see 50 records in controller. what i am not able to understand is why view is not showing it. am i missing something ?
0
onjus
Top achievements
Rank 1
answered on 09 May 2018, 06:35 AM
databound and render events are fired successfully and i can see 50 records in controller (through breakpoint) what i am not able to understand is why then view is not showing it ?
0
onjus
Top achievements
Rank 1
answered on 10 May 2018, 01:57 AM
Can anybody answer please ?
0
onjus
Top achievements
Rank 1
answered on 10 May 2018, 05:40 AM

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")

                                )
                    )

 

0
Stefan
Telerik team
answered on 10 May 2018, 08:10 AM
Hello, Onjus,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
onjus
Top achievements
Rank 1
answered on 11 May 2018, 05:25 AM
Thanks Paul, that helped.
Tags
Chart
Asked by
onjus
Top achievements
Rank 1
Answers by
onjus
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or