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

[Solved] MVC chart Issue

2 Answers 173 Views
Chart
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Kshitish
Top achievements
Rank 1
Kshitish asked on 23 May 2012, 08:10 PM

We are using licensed version MVC chart  MVC Q2 2011 . I am not able to pass on the parameters to controller method. It does not support .rebind() method. I tried the following, Could not result as expected. I need to have following

1. Should able to pass parameters from view html controls
2. Chart should not be loaded first time



View
@(Html.Telerik().Chart<CollectionDataViewModel>()
    .Name("chart")
    
    .Title("Collections By Projects")
    .Legend(legend => legend
        .Position(ChartLegendPosition.Top)
    )
    .Series(series =>
    {
        series.Column(s => s.TotalAmount).Name("Total Amount");
        series.Column(s => s.AmountCollected).Name("Collected Amount");
        series.Column(s => s.PendingAmount).Name("Pending Amount");
    })
    .CategoryAxis(axis => axis
            .Categories(s => s.Name)
        //.Labels(labels => labels.Rotation(-45))
    )
    .ValueAxis(axis => axis
        .Numeric().Labels(labels => labels.Format("${0:#,##0}"))
    )
    .DataBinding(dataBinding => dataBinding
                .Ajax().Select("_CollectionByProject", "Analysis")
    )
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Format("${0:#,##0}")
              
    )
    .HtmlAttributes(new { style = "width: 670px; height: 300px;" })
    )

Javascript


 <script type="text/javascript">
     var controllerName = '@this.ViewContext.RouteData.Values["Controller"]';
     function getChart() {
         return $("#chart").data("tChart");
     }
     function refresh() {
         $.post('@Url.Content("~/")' + '/' + controllerName + '/_CollectionByProject/',
                { fromdate: '09/01/2011', todate: '02/01/2012' });
         //getChart().refresh();
     }
     function rebind() {
         //         getChart().rebind({ year: $("#year").val() });
      
         getChart().rebind({ year: 2012 });
     }
</script>

Controller Method
 [HttpPost]
        public ActionResult _CollectionByProject(string fromdate, string todate)
        {
           
            List<CollectionDataViewModel> ilist = new List<CollectionDataViewModel>();
            ilist = Repositories.ReportRepository.GetCollectionData("", fromdate, todate);
            return Json(ilist);
           
        }

Model
  public class CollectionDataViewModel : ViewModelBase
    {
        public string RepName { get; set; }
        public string  Name { get; set; }
        public decimal? TotalAmount { get; set; }
        public decimal? AmountCollected { get; set; }
        public decimal? PendingAmount { get; set; }
    }

2 Answers, 1 is accepted

Sort by
0
Kshitish
Top achievements
Rank 1
answered on 24 May 2012, 02:23 PM
Can anybody reply to this please
0
Jon
Top achievements
Rank 1
answered on 20 Jul 2012, 04:55 PM
I ran into the same issue. I needed to reload the MVC helper generated chart with new data based on an event that occurred on the client. To solve it I had to do two things:

1. Set ServerOperation(true) on the datasource.
@(Html.Kendo().Chart<MyTpe>()
       .Name("myChart")
       .Series( ... )
       .DataSource(datasource => datasource
              .Read(read => read
                     .Action("_MyAction", "Home")
                     .Data("myJsFunctionThatGetsClientData")
              )
              .ServerOperation(true)
       )
)

2. Call fetch on the datasource on the client-side.
$("#someElement").change(function () {
    var chart = $("#myChart").data("kendoChart");
    chart.dataSource.fetch();
});


And that did it!
Tags
Chart
Asked by
Kshitish
Top achievements
Rank 1
Answers by
Kshitish
Top achievements
Rank 1
Jon
Top achievements
Rank 1
Share this question
or