chart.redraw() not working

[Guillermo]

Hi, I have the following chart and I would like to insert a plot band when I click on the chart. I use the same javascript code in the console of the browser and it works, however, it does not work when I do it from my code:

    <script>
        // Hub Settings
        var hub = Global.HubManager.createHub(Global.HubType.BestOrders)
        var hubConnection = hub.connection;
        var hubStart = hub.start;
   
        function onPlotAreaClick(e) {
           console.log(kendo.format("Plot area click :: Timestamp {0} : {1:N0}",
                e.category, e.value
            ));
            
            showVerticalLine();
        }

        function showVerticalLine() {
            console.log("generating vertical line")

            var chart = $("#BestOrdersLive").data("kendoChart");
            var plotbands = chart.options.categoryAxis.plotBands[0];
            console.log(plotbands);
            plotbands = {color: "Red", from: 30, to: 30};
            console.log(plotbands);
            
            chart.redraw();
        }
        
    </script>
   <div id="live-chart">
        @(
            Html.Kendo().Chart<BestOrderViewModel>()
            .Name("BestOrdersLive")
            .AutoBind(true)
            .Theme("Black")
            .Title("Best Orders Live")
            .Legend(true)
            .Events(e => e.PlotAreaClick("onPlotAreaClick"))
            .DataSource(dataSource => dataSource
					.SignalR()
                    .AutoSync(true)
					.Transport(tr => tr
					    .Promise("hubStart")
					    .Hub("hubConnection")
					    .Client(c => c
					        .Read("read")
					        .Create("create")
					        .Update("update")
					        .Destroy("destroy")
					        )
					    .Server(s => s
					        .Read("read")
                            .Create("create")
                            .Update("update")
					        .Destroy("destroy")
					        )
					)
             )
            .Series(series =>
            {
                series.Column(model => model.DealVolume).Name("TradeVolume").CategoryField("ActionTime").Axis("volume").Tooltip(t => t.Visible(true));
                series.Line(model => model.BestBid).Name("BestBid").CategoryField("ActionTime").Color("Yellow");
                series.Line(model => model.BestAsk).Name("BestAsk").CategoryField("ActionTime").Color("Blue");
                series.Line(model => model.DealPricePaid).Name("DealPricePaid").CategoryField("ActionTime").Color("Red").Width(0);
                series.Line(model => model.DealPriceGiven).Name("DealPriceGiven").CategoryField("ActionTime").Color("Green").Width(0);
                series.Line(model => model.DealPriceOTC).Name("DealPriceOTC").CategoryField("ActionTime").Color("Black").Width(0);
                series.Line(model => model.ReferencePrice).Name("ReferencePrice").CategoryField("ActionTime").Color("Grey");
                
            })
            .Transitions(false)
            .CategoryAxis(axis => axis
                .Date()
                .Title("Hora")
                .BaseUnit(ChartAxisBaseUnit.Minutes)
                .Labels(labels => labels.Format("HH:mm:ss").Step(10).Rotation(90))
            .Crosshair(c => c.Visible(true))
            .PlotBands(bands => bands.Add().From(2).To(2).Color("Transparent"))
            )
            .ValueAxis(config =>
                config
                    .Numeric("price")
                    .Visible(true)
                    .Title("Preço (€)")
            )
            .ValueAxis(config =>
                config
                    .Numeric("volume")
                    .Visible(true)
                    .Title("Volume")
            )
            .Zoomable(zoomable => zoomable
            .Mousewheel(mousewheel => mousewheel.Lock(ChartAxisLock.Y))
            .Selection(selection => selection.Lock(ChartAxisLock.Y))
            )
            .Pannable(pannable => pannable
            .Lock(ChartAxisLock.Y)
            )
            )
   </div>

[Anton Mironov]

Hello Guillermo,

Thank you for the code snippet and the details provided.

The redraw method should be working out of the box. Probably there is a JavaScript error before the method is executed. Here is an example of how the redraw method is working in a dojo example:

• https://dojo.telerik.com/@anton.mironov/OkaqOGOF

In order to achieve the desired dynamic set of the plot-band, I would recommend using the approach from the following article:

• https://docs.telerik.com/kendo-ui/knowledge-base/dynamic-plot-bands

Here is a dojo example:

• https://dojo.telerik.com/@anton.mironov/uputoLOW

Give a try to the approach above and let me know if further information or assistance is needed.

 

Kind Regards,
Anton Mironov
Progress Telerik