This is a migrated thread and some comments may be shown as answers.
How can i change data and line color at client side or alternative in ajax partial view
1 Answer 20 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Dominic
Top achievements
Rank 1
Dominic asked on 30 Aug 2012, 11:57 AM
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.

1 Answer, 1 is accepted

Sort by
0
Dominic
Top achievements
Rank 1
answered on 30 Aug 2012, 12:34 PM
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);
    });
  });
});

Tags
Chart
Asked by
Dominic
Top achievements
Rank 1
Answers by
Dominic
Top achievements
Rank 1
Share this question
or