Your search did not match any results.
Range Selector

Logarithmic Scale

Documentation
In this demo, a logarithmic axis is used to select a range within a set of rapidly-growing values.
<div id="range-selector-demo"> @{ 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) ) .ValueAxis(va => va.Add().PlaceholderSize(50)) .Series(s => s.Add()) .Legend(l => l.Visible(false)) ) @(Html.DevExtreme().RangeSelector() .ID("range-selector") .Size(s => s.Height(120)) .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.CallValueChanged(ValueChangedCallMode.OnMoving); b.SnapToTicks(false); }) .OnValueChanged("rangeSelector_valueChanged") ) </div> <script> function rangeSelector_valueChanged(e) { var zoomedChart = $("#zoomed-chart").dxChart("instance"); zoomedChart.zoomArgument(e.value[0], e.value[1]); } </script>
using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class RangeSelectorController : Controller { public ActionResult LogarithmicScale() { return View(); } } }
#range-selector-demo { height: 480px; width: 100%; } #zoomed-chart{ height: 335px; margin: 0 0 15px; } #range-selector { height: 80px; }