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;" }))

When you say it returns a ViewModel do you mean it is returning a raw data set or is it returning some rendered HTML for displaying the ViewModel? — asymptoticFault, Aug 14 '13 at 14:29
Ok. I am not familiar with the Telerik helpers so does their plugin have some function you can provide the data to? I noticed you are calling `refresh()` on the plugin but what does that do? — asymptoticFault, Aug 14 '13 at 14:36

asymptoticFault · Answer 1 · 2013-08-14T15:02:23.293

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.

Refresh Telerik MVC chart using jquery ajax

1 Answers1