Range Selector - Logarithmic Scale

<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>

​