Your search did not match any results.

Charts - Polar Chart Zooming and Panning API

To zoom a PolarChart into a specific range on the value axis, specify the PolarChart's visualRange property.

In this demo, this property is bound to the RangeSelector's value. When you move the sliders in the RangeSelector, you change the visualRange and zoom the PolarChart.

Once you set the zoom level, move the selected range left and right to scroll through data.

Backend API
@(Html.DevExtreme().PolarChart() .ID("zoomedChart") .CommonSeriesSettings(c => c .ArgumentField("Argument") .Closed(false) ) .Series(s => { s.Add() .Type(PolarChartSeriesType.Scatter) .Name("Test results") .ValueField("Value") .Point(p => p.Size(8)); s.Add() .Type(PolarChartSeriesType.Line) .Name("Expected average") .ValueField("OriginalValue") .Point(p => p.Visible(false)); }) .ArgumentAxis(a => a .StartAngle(90) .TickInterval(30) ) .ValueAxis(v => v. VisualRange(range => range.StartValue(0).EndValue(8)) ) .Export(e => e.Enabled(true)) .Legend(l => l .HoverMode(ChartLegendHoverMode.ExcludePoints) .HorizontalAlignment(HorizontalAlignment.Center) .VerticalAlignment(VerticalEdge.Top) ) .Title("Stochastic Process") .DataSource(Model) ) @(Html.DevExtreme().RangeSelector() .Size(s => s.Height(100)) .Margin(m => m .Top(10) .Left(60) .Bottom(10) .Right(50) ) .Scale(s => s .StartValue(0) .EndValue(8) .MinorTickInterval(0.1) .TickInterval(1) .MinorTick(mt => mt.Visible(false)) ) .Behavior(b => b.ValueChangeMode(SliderValueChangeMode.OnHandleMove)) .OnValueChanged(@<text> function(e) { var zoomedChart = $("#zoomedChart").dxPolarChart("instance"); zoomedChart.getValueAxis().visualRange(e.value); } </text>) )
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using System; using System.Collections.Generic; using System.Linq; using System.Text.Json; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ChartsController : Controller { public ActionResult PolarChartZoomingAndScrollingAPI() { return View(SampleData.GetStochasticProcessResearchData()); } } }
using System; using System.Collections.Generic; using System.Linq; using DevExpress.Data.Utils; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static IEnumerable<object> GetStochasticProcessResearchData() { var random = NonCryptographicRandom.System; return Enumerable.Range(1, 480).Select(x => { var argument = 0.75 * x; var originalValue = x == 0 ? 0 : Math.Log(argument); return new { Argument = argument, OriginalValue = originalValue, Value = originalValue - (Math.Sin(random.NextDouble() * argument) * x / 480) + (1 - random.NextDouble() * 2) }; }); } } }
#zoomedChart { height: 440px; width: 100%; }