FinancialChart - Range Selector

Features

Range Selector

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

Features

Chart Types

Interaction

Analytics

Sample
Source
Documentation

Description

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

RangeSelectorController.cs
RangeSelector.cshtml

using FinancialChartExplorer.Models; 
using Microsoft.AspNetCore.Mvc; 
  
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); 
        } 
    } 
} 

@model List<FinanceData> 
@{ 
    ViewBag.DemoSettings = false; 
    var 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>
  
<c1-financial-chart id="@demoSettingsModel.ControlId" symbol-size="6" binding-x="X" chart-type="@chartType"> 
    <c1-items-source source-collection="@Model"></c1-items-source> 
    <c1-financial-chart-series binding="High,Low,Open,Close,Volume" name="BOX"></c1-financial-chart-series> 
    <c1-flex-chart-tooltip content="financialTooltip"></c1-flex-chart-tooltip> 
</c1-financial-chart> 
  
@Html.Partial("_RangeSelector") 
  
@section Description{ 
    <p>@Html.Raw(Home.RangeSelector_Text0)</p> 
} 
@section Summary{ 
    <p>@Html.Raw(Home.RangeSelector_Text1)</p> 
} 