Period selector in Stock Chart Control

26 Oct 20226 minutes to read

The period selector allows to select a range with specified periods. By default the period selector is enabled in stock chart.

Periods

Periods is an array of objects that allows users to specify the range of periods. The interval property specifies the count value of the button, and the text property specifies the text to be displayed on button. The intervalType property allows users to customize the intervals of the buttons. The intervalType property supports the following interval types:

  • Auto
  • Years
  • Quarter
  • Months
  • Weeks
  • Days
  • Hours
  • Minutes
  • Seconds
<ejs-stockchart id="stockchart" load="stockload" title="AAPL Stock Price" exportType="new List<Object>() { }" seriesType="new List<Object>() { }" indicatorType="new List<Object>() { }" trendlineType="new List<Object>() { }">
                <e-stockchart-series-collection>
                    <e-stockchart-series type='Line' xName="x" yName="y" name="google"> </e-stockchart-series>
                </e-stockchart-series-collection>
                <e-stockchart-primaryxaxis>
                    <e-majorgridlines color="transparent"></e-majorgridlines>
                </e-stockchart-primaryxaxis>
                <e-stockchart-primaryyaxis>
                    <e-linestyle color="transparent"></e-linestyle>
                    <e-majorticklines color="transparent" width="0"></e-majorticklines>
                </e-stockchart-primaryyaxis>
                <e-stockchart-stockchartperiods>
                    <e-stockchart-stockchartperiod interval="1" intervalType="Minutes" text="1m"></e-stockchart-stockchartperiod>
                    <e-stockchart-stockchartperiod interval="30" intervalType="Minutes" text="30m"></e-stockchart-stockchartperiod>
                    <e-stockchart-stockchartperiod interval="1" intervalType="Hours" text="1H"></e-stockchart-stockchartperiod>
                    <e-stockchart-stockchartperiod interval="12" intervalType="Hours" text="12H" selected="true"></e-stockchart-stockchartperiod>
                </e-stockchart-stockchartperiods>
                <e-stockchart-crosshairsettings enable="true">
                </e-stockchart-crosshairsettings>
            </ejs-stockchart>

    <script>
        var series1 = [];
        var point1;
        var value = 80;
        var i;

        for (i = 1; i < 500; i++) {
            if (Math.random() > .5) {
                value += Math.random();
            } else {
                value -= Math.random();
            }
            point1 = { x: new Date(2000, 1, 1, 0, i), y: value.toFixed(1) };
            series1.push(point1);
        }

        var data = series1;
        function stockload(args) {
            args.stockChart.series[0].dataSource = data;
        }
    </script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.StockChart
{
    public partial class StockChartController : Controller
    {
        public IActionResult Default()
        {
            return View();
        }
    }
}

Visibility of period selector

The enablePeriodSelector property allows users to toggle the visibility of period selector.

<ejs-stockchart id="stockchart" load="stockload" title="AAPL Stock Price" enablePeriodSelector="false">
                <e-stockchart-series-collection>
                    <e-stockchart-series type='Candle' xName="x"> </e-stockchart-series>
                </e-stockchart-series-collection>
            </ejs-stockchart>

    <script src="~/scripts/chart/financial-data.js"></script>
    <script>
        var data = chartData;
        function stockload(args) {
            args.stockChart.series[0].dataSource = data;
        }
    </script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.StockChart
{
    public partial class StockChartController : Controller
    {
        public IActionResult Default()
        {
            return View();
        }
    }
}