Send data in chart controller

[Константин]

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

 

[Tsvetina]

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

[Meypar]

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

[Tsvetina]

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

[Meypar]

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

[Alex Hajigeorgieva]

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

[Meypar]

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