Refresh Telerik MVC chart using jquery ajax

Question

I'm using jquery ajax to call action method that will return a ViewModel, how can I refresh Telerik chart to display the returned data?

Here's what I have so far:

Javascript:

<script type="text/javascript">
    $(document).ready(function () {
        $(".GenerateCharts").live('click', function () {
            $("#imgprogress").css("display", "block");
            var monthVar = $("#chartMonth").val();
            var yearVar = $("#chartYear").val();
            //************************************
            $.ajax({
                type: "POST",
                url: '@Url.Action("MyCharts", "Charts")',
                data: JSON.stringify({ selectedMonth: monthVar, selectedYear: yearVar, chartId: 1 }),
                success: function () {
                    $("#TargetChart").data("tChart").refresh(); // <-- Didn't work!
                },
                dataType: "json",
                contentType: "application/json"
            });

            $("#imgprogress").css("display", "none");
        });
    });
</script>

Telerik Chart:

@(Html.Telerik().Chart(Model.QueueTimeViewModel.QueueTimeMonth)
    .Name("TargetChart")
    .Title("Chart[1]")
    .Legend(legend => legend.Position(ChartLegendPosition.Bottom))
    .Series(series =>
             {
              series.Column(model => model.ImmigrationTime).Name(APMS.Resources.InspectionReports.Resource.ImmigrationAverage).Labels(label => label.Visible(true)).Color("#00ff00");
              series.Column(model => model.TransitTime).Name(APMS.Resources.InspectionReports.Resource.TransitAverage).Labels(label => label.Visible(true)).Color("#FF0000");
              series.Column(model => model.StaffTime).Name(APMS.Resources.InspectionReports.Resource.StaffAverage).Labels(label => label.Visible(true)).Color("#F09800");
              series.Column(model => model.TargetTime).Name(APMS.Resources.InspectionReports.Resource.Target).Labels(label => label.Visible(true)).Color("#0000ff");
            })
     .CategoryAxis(axis => axis
                    .Categories(" ")
                    .Line(line => line.Visible(true))
                    .Labels(labels => labels.Padding(0, 0, 0, 0)))
                    .ValueAxis(axis => axis
                    .Numeric().Labels(labels => labels.Format("{0} min")))
      .Tooltip(tooltip => tooltip
                    .Visible(true)
                    .Format("{0}")
                    .Template("<#= series.name #>: <#= value #> min"))
      .HtmlAttributes(new { style = "width: 600px; height: 400px;  z-index:-1;" }))

Answer 1

You need to do something with the ajax response data. Your success function should have a data parameter like so:

success: function (data) {

You can then refresh your chart with that data depending on what it is exactly.

If the plugin doesn't have some way to provide it with new data to refresh the chart with then I would say it would be easier and probably better to re-render the chart on the server and just send back the HTML instead of the data. From a best practice point of view this would be better because it would keep the view logic in the Razor view instead of completely or partially duplicating it on the client with javascript.