Features

Range Selector

Range Selector

The RangeSelector allows end users to adjust the FinancialChart's visible range of data at runtime.

Features

Chart Types
Interaction
Analytics

Description

The RangeSelector allows end users to adjust the FinancialChart's visible range of data at runtime.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FinancialChartExplorer.Models;

namespace FinancialChartExplorer.Controllers
{
    public partial class HomeController : Controller
    {
        public ActionResult RangeSelector()
        {
            var model = BoxData.GetDataFromJson();
            ViewBag.DemoSettingsModel = new ClientSettingsModel() { };
            ViewBag.ChartType = C1.Web.Mvc.Finance.ChartType.Candlestick;
            return View(model);
        }
    }
}
@using FinancialChartExplorer.Models

@model List<FinanceData>
@{
    ViewBag.DemoSettings = false;
    C1.Web.Mvc.Finance.ChartType chartType = ViewBag.ChartType;
    ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;
}


<script type="text/javascript">
    c1.documentReady(function () {
        c1.getExtender(wijmo.Control.getControl("#rs"), "RangeSelector").min = 47.5;
    });
</script>

@(Html.C1().FinancialChart()
.Id(demoSettingsModel.ControlId)
.Bind(Model)
.BindingX("X")
.SymbolSize(6)
.ChartType(chartType)
.Series(sers =>
    {
        sers.Add().Binding("High,Low,Open,Close,Volume").Name("BOX");
    })
.Tooltip(t => t.Content("financialTooltip")))

@Html.Partial("_RangeSelector")

@section Description{
    <p>
        The RangeSelector allows end users to adjust the FinancialChart's visible range of data at runtime.
    </p>
}
@section Summary{
    <p>
        The RangeSelector allows end users to adjust the FinancialChart's visible range of data at runtime.
    </p>
}