Telerik MVC Chart - Bind to JSON - json

Question

How do I bind a Telerik ASP.Net MVC Chart (not the Kendo for jQuery version ) to JSON? For example, I would like to bind the following chart (Note: the series are stubbed out with dummy data for now, but hopefully you get the idea) to a JavaScript function that returns JSON. I am having trouble finding an example of how to do this with the Telerik ASP.Net MVC Chart. I do find examples with the Kendo UI for jQuery chart - but I am not using that.
#(Html.Kendo().Chart()
.Name("GallonsPerMonth")
.Title("Total Gallons Per Month")
.Legend(legend => legend
.Position(ChartLegendPosition.Top)
.Visible(true)
)
.Theme("Bootstrap")
.ChartArea(chartArea => chartArea
.Background("transparent")
.Height(600)
)
.Series(series =>
{
series.Column(new double[] { 825, 775, 875, 900, 925, 1111, 1200, 1175, 1100, 1000, 875, 800 }).Name("Estimated");
series.Line(new double[] { 700, 795, 900, 850, 950, 905, 1175, 1100, 1000, 1050, 700, 650 }).Name("Actual").Color("red");
})
.CategoryAxis(axis => axis
.Name("series-axis")
.Line(line => line.Visible(false))
)
.CategoryAxis(axis => axis
.Name("label-axis")
.Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sep", "Oct", "Nov", "Dec")
)
.ValueAxis(axis => axis//.Logarithmic()
.Numeric()
.Labels(labels => labels.Format("{0}"))
// Move the label-axis all the way down the value axis
.AxisCrossingValue(0, int.MinValue)
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}")
.Template("#= series.name #: #= value #")
)
)
dsd

Answer 1

You could create the chart using the MVC helper extension without the series data, so add that using JavaScript when the document is ready.
<script>
$(document).ready(function () {
$.getJSON('your-url', function (data) {
var chart = $("#GallonsPerMonth").data("kendoChart");
var series = chart.options.series;
// first series
series[0].data = data;
chart.redraw();
});
}
</script>
Note I am adding the data to the Fist Series.