How can i change data and line color at client side or alternative in ajax partial view

[Dominic]

Hello,

is there any solution or sample how i can bind a query result and change the color and visibility of the line.

My Code:

$(function () {
  $('form').submit(function (e) {
    e.preventDefault();
    $.ajax({
      url: this.action,
      type: this.method,
      data: $(this).serialize(),
      success: function (result) {
        var chart = $("#chart").data("tChart");
        var options = chart.options;
          for (var i = 0; i < 1; i++) {
            options.series[i].data = result[i];
          }
          chart.refresh();
        }
      });
 });

With this code the data will to load but the chart stays empty.

My second test is a PartialView, which seems good.

PartialView:

@model TelerikMVC3Test.Controllers.Selection

@{ Html.Telerik().Chart(Model.StatisticData)
    .Name("chart")
    .SeriesDefaults(series => series.ScatterLine().Tooltip(true).Width(2))
    .Series(series =>
    {
        series.ScatterLine(d => d.TimeHourValue, d => d.Total).Name("Total").Color(Model.TotalColor);
    })
  .XAxis(x => x.Numeric().Title("Prozent").Labels(l => l.Format("{0:00}:00"))
 .AxisCrossingValue(7, 19).Labels(l => l.Format("{0:00}:00")).Min(7).Max(19).MajorUnit(1)
    )
  .YAxis(y => y.Numeric().Title("Total"))
        .YAxis(y => y.Numeric("percent").Title("Percent").Min(0.0).Max(1.0).Labels(l => l.Format("{0:P0}")))
        .Render();
}

Javascript:

<div id="abc"></div>
<script type="text/javascript">
    $(function () {
        $('form').submit(function (e) {
            e.preventDefault();
            $('#abc').load('@Url.Action("_ChartsPartialView", "Home")');
        });
    });
</script>

The Partial View shows the data but if i try to change the color this will always be the same initial color.

[Dominic]

Ok the partial view problem is solved. I changed the javascript to:

$(function () {
  $('form').submit(function (e) {
    e.preventDefault();
    $.post('@Url.Action("_ChartsPartialView", "Home")', $(this).serialize(), function (data) {
      $('#abc').html(data);
    });
  });
});