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

Send data in chart controller

6 Answers 738 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Константин
Top achievements
Rank 1
Константин asked on 18 Aug 2017, 11:42 AM

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

 

6 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 22 Aug 2017, 08:47 AM
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.
0
Meypar
Top achievements
Rank 1
answered on 13 Jun 2019, 03:04 PM

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

0
Tsvetina
Telerik team
answered on 14 Jun 2019, 02:10 PM
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.
0
Meypar
Top achievements
Rank 1
answered on 17 Jun 2019, 01:40 PM

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

0
Alex Hajigeorgieva
Telerik team
answered on 19 Jun 2019, 02:29 PM
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.
0
Meypar
Top achievements
Rank 1
answered on 19 Jun 2019, 03:13 PM

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

Tags
Chart
Asked by
Константин
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Meypar
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or