dynamic change of series

[Anton]

Hello,
I try to implement dynamic change of series in chart by javascript, but they just disappear.

Build chart ASP.NET MVC Razor:

<div id="chartWrapper"><br>                    @{<br>                        var x = new List<object>();<br>                        x.Add(new { Dt = DateTime.Parse("2017-01-01 01:00:00.000"), Value = 1 });<br>                        x.Add(new { Dt = DateTime.Parse("2017-01-01 02:00:00.000"), Value = 3 });<br>                        x.Add(new { Dt = DateTime.Parse("2017-01-01 03:00:00.000"), Value = 2 });<br>                        x.Add(new { Dt = DateTime.Parse("2017-01-01 04:00:00.000"), Value = 1 });<br>                        var y = new List<object>();<br>                        y.Add(new { Dt = DateTime.Parse("2017-01-01 01:00:00.000"), Value = 0 });<br>                        y.Add(new { Dt = DateTime.Parse("2017-01-01 02:00:00.000"), Value = 3 });<br>                        y.Add(new { Dt = DateTime.Parse("2017-01-01 02:10:00.000"), Value = 1 });<br>                        y.Add(new { Dt = DateTime.Parse("2017-01-01 02:20:00.000"), Value = 3 });<br>                        y.Add(new { Dt = DateTime.Parse("2017-01-01 02:30:00.000"), Value = 2 });<br>                        y.Add(new { Dt = DateTime.Parse("2017-01-01 03:00:00.000"), Value = 3 });<br>                        y.Add(new { Dt = DateTime.Parse("2017-01-01 04:00:00.000"), Value = 1 });<br>                        var z = new List<object>();<br>                        z.Add(new { Dt = DateTime.Parse("2017-01-01 01:00:00.000"), Value = 6 });<br>                        z.Add(new { Dt = DateTime.Parse("2017-01-01 02:00:00.000"), Value = 1 });<br>                        z.Add(new { Dt = DateTime.Parse("2017-01-01 02:05:00.000"), Value = 2 });<br>                        z.Add(new { Dt = DateTime.Parse("2017-01-01 02:10:00.000"), Value = 3 });<br>                        z.Add(new { Dt = DateTime.Parse("2017-01-01 02:15:00.000"), Value = 4 });<br>                        z.Add(new { Dt = DateTime.Parse("2017-01-01 02:20:00.000"), Value = 5 });<br>                        z.Add(new { Dt = DateTime.Parse("2017-01-01 02:25:00.000"), Value = 4 });<br>                        z.Add(new { Dt = DateTime.Parse("2017-01-01 02:30:00.000"), Value = 3 });<br>                        z.Add(new { Dt = DateTime.Parse("2017-01-01 03:00:00.000"), Value = 2 });<br>                        z.Add(new { Dt = DateTime.Parse("2017-01-01 04:00:00.000"), Value = 1 });<br>                    }<br>                    <div class="demo-section k-content wide"><br>                        @(Html.Kendo().Chart()<br>                      .Name("chartTest")<br>                      .HtmlAttributes(new { style = "height: 550px; width: 700px; z-index: 0;" })<br>                      .Title("test")<br>                      .Legend(legend => legend.Position(ChartLegendPosition.Top))<br>                      .SeriesDefaults(seriesDefaults => seriesDefaults.Column().Stack(true))<br>                      .PlotArea(area => area.Background("#f0f0f0").Opacity(0.1))<br>                      .Series(series =><br>                      {<br>                          series.Line(x).CategoryField("Dt").Field("Value").Name("X").Color("#F00").DashType(ChartDashType.Solid).MissingValues(ChartLineMissingValues.Interpolate).Markers(m => m.Visible(false));<br>                          series.Line(y).CategoryField("Dt").Field("Value").Name("Y").Color("#0F0").DashType(ChartDashType.Solid).MissingValues(ChartLineMissingValues.Interpolate).Markers(m => m.Visible(false));<br>                          series.Line(z).CategoryField("Dt").Field("Value").Name("Z").Color("#00F").DashType(ChartDashType.Solid).MissingValues(ChartLineMissingValues.Interpolate).Markers(m => m.Visible(false));<br>                      })<br>                      .CategoryAxis(axis => axis<br>                          .Date()<br>                          .BaseUnit(ChartAxisBaseUnit.Minutes)<br>                          .Labels(labels => labels.DateFormats(formats => formats.Hours("HH:mm")).Rotation(-45).Step(60))<br>                          .MinorGridLines(lines => lines.Visible(false))<br>                          .MinorTicks(t => t.Step(60).Visible(false))<br>                          .MajorGridLines(lines => lines.Step(60).Visible(true))<br>                          .MajorTicks(t => t.Step(60).Visible(true))<br>                          .Crosshair(c => c.Visible(true))<br>                          .PlotBands(bands =><br>                          {<br>                              bands.Add().From(DateTime.Parse("2017-01-01 01:00:00.000")).To(DateTime.Parse("2017-01-01 02:08:00.000")).Color("#b0e1fc").Opacity(0.2);<br>                          })<br>                      )<br>                      .ValueAxis(axis => axis<br>                          .Numeric()<br>                          .Line(line => line.Visible(true))<br>                          .MinorGridLines(lines => lines.Visible(false))<br>                          .MinorTicks(t => t.Step(2).Visible(false))<br>                          .MajorGridLines(lines => lines.Step(1).Visible(true))<br>                          .MajorTicks(t => t.Step(1).Visible(true))<br>                      )<br>                        )<br>                    <br>                    </div><br>                </div>

Javascrip that erase series:

var chart = $("#chartTest").data("kendoChart");<br>chart.refresh();<br>

In my case chart.refresh(); - just clear data, I try to change chart.options.series to new data with the same result, there is no series after refresh.

[Anton]

I found the solution.

After change series[i].data and chart.options.categoryAxis.categories

I have to use chart.redraw(); instead of chart.refresh( );

[Anton]

Just chart.redraw(); - brokes the tooltip. So there is no solution found.

Why I can add objects ({Value, Datetime }) to series via C# code and get correct chart, but chart.refresh( ); via Javascript deletes all series data?

When I use arrays of values [val1, val2, val3 ...] on axis X and datetimes [dt1, dt2, dt3, ...] on axis Y chart.refresh( ); not deletes series data. In my case I need to use arrays of objects, because there is no оne-to-one correspondence between values and datetimes.

Can anyone help me?

[Tsvetina]

Hello Anton,

I would suggest that we continue our communication on the issue in the support thread you opened. When we reach a solution for your case, if you would like, you can share some details here.

Regards,
Tsvetina
Progress Telerik