Send data in chart controller

2 posts, 0 answers
  1. Константин
    Константин avatar
    1 posts
    Member since:
    Jul 2017

    Posted 18 Aug Link to this post

    Hai. So, I have view and I loaded column chart on this view like partial view(chart diagram). And I have a little problem, I can't to send data from controller. I need to load data after sorting data. I send service id and after that, loading chart with data only for this service.
    Load main view => send data in controller with service id => in contoller do query for database => load data in partial chart view => display partial view chart data in main view

    //Partial view
    @Html.Partial("~/Views/Graphs/TableStatementsChart.cshtml", new ViewDataDictionary { { "Id", Model.servicesModel.Id } })
     
    //contoller
    public ActionResult TableStatementsChart(int Id)
            {
                ViewBag.IdService = Id;
     
                return View("~/Views/Graphs/TableStatementsChart.cshtml");
            }
     
            [HttpPost]
            public ActionResult TableStatements_Read(int Id)
            {
                int localId = Id;
     
                return Json(db.TableStatements.Select(tableStatements => new
                {
                    fkIdServices = tableStatements.fkIdServices,
                    Month = tableStatements.Month,
                    Count = tableStatements.Count,
                    DoneCount = tableStatements.DoneCount,
                    TopicalCount = tableStatements.TopicalCount
                }).Where(x=>x.fkIdServices == Id));
            }
    //Chart diagram
    @{
        Layout = "~/Views/Shared/_LayoutKendoUIChart.cshtml";
    }
     
    @(Html.Kendo().Chart<NarkomApp.Models.TableStatements>()
          .Name("chart")
          .Title("Заявки")
          .Legend(legend => legend.Position(ChartLegendPosition.Bottom))
          .Tooltip(tooltip => tooltip.Visible(true))
          .DataSource(ds => ds.Read(read => read.Action("TableStatements_Read", "TableStatementsChart")))     
          .Series(series =>
          {
              series.Column(a => a.Count).Name("Общее").Color("red");
              series.Column(a => a.DoneCount).Name("Выполненные").Color("blue");
              series.Column(a => a.TopicalCount).Name("Актуальные").Color("green");
          })
          .CategoryAxis(axis => axis
          .Categories(model => model.Month).Labels(labels => labels.Rotation(-90)))
    )

     

  2. Tsvetina
    Admin
    Tsvetina avatar
    2107 posts

    Posted 22 Aug Link to this post

    Hi Константин,

    You can pass the ID parameter with the Chart Read method:
    .DataSource(dataSource => dataSource.Ajax()
        .Read(read => read
            .Action("Products_Read", "Home").Data("additionalData")
        )
    )
    // -- Removed for brevity.
    <script>
        function additionalData() {
            return {
                serviceId: 42 //this could be dynamically obtained
            };
        }
    </script>

    and then, the Read method in the controller would look something like this:
    public ActionResult Products_Read([DataSourceRequest] DataSourceRequest request, int serviceId) {...}

    You can then use the Id to obtain the correct set of data for the Chart.

    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top