Send data in chart controller

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

    Posted 18 Aug 2017 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
    2481 posts

    Posted 22 Aug 2017 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.
  3. Meypar
    Meypar avatar
    3 posts
    Member since:
    May 2019

    Posted 13 Jun Link to this post

    Hello,

    I'm trying to do this with the Kendo Core Chart, but controller doesn't receive the additional data.

    In this code, the ds.Ajax() method doesn't exists.

    // Controller
    [HttpPost]
    public IActionResult KendoReadMethod([DataSourceRequest] DataSourceRequest request, IKendoChartFilter filter)
    {
        var chartData = new List<Model>();
        return Json(chartData.ToDataSourceResult(request));
    }
     
    // Javascript
    var dashboardViewModel = {
        getFilterData: function () {
            return {
                name = "Ivan"
            };
        }
    };
     
    //Filter Class
    public class IKendoChartFilter
    {
        public string name { get; set; }
    }

     

    // View
    Html.Kendo().Chart<Model>()
        .Name("Chart1")
        .DataSource(ds =>
        {
            ds.Read(read => read.Action("KendoReadMethod", "Dashboard").Data("dashboardViewModel.getFilterData"));
        })

     

    I also tried it using existing datasource, but this does not work either.

    // View
    Html.Kendo().DataSource<Model>()
        .Name("dataSource1")
        .Ajax(dataSource => dataSource
            .Read(read => read.Action("KendoReadMethod", "Dashboard").Data("dashboardViewModel.getFilterData"))
        )
         
    Html.Kendo().Chart<Model>()
        .Name("Chart1")
        .DataSource("dataSource1")
        

     

    Why Ajax() method doesn't appear?

    What is the correct approach to send additional data to controller from client (using asp.net wrappers)?

    Kind regards,

    Ivan

  4. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 14 Jun Link to this post

    Hello Meypar,

    The method signature does not seem to match the type of the parameter you send. If you send the data like this:
    var dashboardViewModel = {
        getFilterData: function () {
            return {
                name = "Ivan"
            };
        }
    };

    The signature of the controller method should look like this:
    public IActionResult KendoReadMethod([DataSourceRequest] DataSourceRequest request, string name)
    {
        var chartData = new List<Model>();
        return Json(chartData.ToDataSourceResult(request));
    }


    Regards,
    Tsvetina
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Meypar
    Meypar avatar
    3 posts
    Member since:
    May 2019

    Posted 17 Jun in reply to Tsvetina Link to this post

    Hello Tsvetina,

    Thank you for your answer, but I wanted to send an object, not only with that property but a set of properties.

    The target is send a set of filters to filter the chart data.

     

    Kind regards,

    Ivan

  6. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    716 posts

    Posted 19 Jun Link to this post

    Hello, Ivan,

    The method is exactly the same.

    I tested with the following:

    .DataSource(ds => ds.Read(read => read.Action("Orders_Read", "Grid").Data("sendAdditionalData").Type(HttpVerbs.Post)))
     
      <script>
          function sendAdditionalData() {
              return { name: "John Doe", id: 2 };
          }
      </script>

    public class KendoChartFilter
    {
       public string name { get; set; }
       public int id { get; set; }
    }



    The model is sent:



    And received:



    Let me know in case you have any other questions or face any difficulties with this approach.

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Meypar
    Meypar avatar
    3 posts
    Member since:
    May 2019

    Posted 19 Jun in reply to Alex Hajigeorgieva Link to this post

    Hello Alex,

    Thank you for your code, I could see the issue!, that was because the name of controller parameter...

    Name "filter" is a reserved word for you (telerik datasource), as you can see in your image from "The model is sent" and because of that I can't use it for this functionality. I changed parameter's name and it works.

     

    Kind Regards,

    Ivan

Back to Top