Range Selector - Logarithmic Scale

In this demo, a logarithmic axis is used to select a range within a set of rapidly-growing values.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

<div> @{ var dataSource = new List<object>(); var max = 100; var rnd = new System.Random(0); for (var i = 0; i < max; i++) { dataSource.Add(new { arg = Math.Pow(10, i * 0.1), val = Math.Log(i + 1) / Math.Log(0.5) + (rnd.NextDouble() - 0.5) * (100 / (i + 1)) + 10 }); } } @(Html.DevExtreme().Chart() .ID("zoomed-chart") .DataSource(dataSource) .ArgumentAxis(aa => aa .ValueMarginsEnabled(false) .Type(AxisScaleType.Logarithmic) .Label(l => l.Format(Format.Exponential)) .Grid(g => g.Visible(true)) .MinorGrid(mg => mg.Visible(true)) .MinorTickCount(10) ) .ResizePanesOnZoom(true) .Series(s => s.Add()) .Legend(l => l.Visible(false)) ) @(Html.DevExtreme().RangeSelector() .ID("range-selector") .DataSource(dataSource) .Chart(c => c.Series(s => s.Add())) .Scale(s => s .Type(RangeSelectorAxisScaleType.Logarithmic) .Label(l => l.Format(Format.Exponential)) .MinRange(1) .MinorTickCount(10) ) .SliderMarker(sm => sm.Format(Format.Exponential)) .Behavior(b => b .ValueChangeMode(SliderValueChangeMode.OnHandleMove) .SnapToTicks(false) ) .OnValueChanged("rangeSelector_valueChanged") ) </div> <script> function rangeSelector_valueChanged(e) { var zoomedChart = $("#zoomed-chart").dxChart("instance"); zoomedChart.getArgumentAxis().visualRange(e.value); } </script>

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class RangeSelectorController : Controller { public ActionResult LogarithmicScale() { return View(); } } }

#zoomed-chart{ height: 335px; margin: 0 0 15px; } #range-selector { height: 120px; }