Period selector in Vue Range navigator component

13 Jun 202419 minutes to read

The period selector allows to select a range with specified periods.

Periods

An array of objects that allows the users to specify pre-defined time intervals. The interval property specifies the count value of the button, and the text property specifies the text to be displayed on the button. The intervaltype property allows the users to customize the interval type, and it supports the following types:

  • Auto
  • Years
  • Quarter
  • Months
  • Weeks
  • Days
  • Hours
  • Minutes
  • Seconds
<template>
  <div id="app">
    <ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat'
      :periodSelectorSettings='periodSelectorSettingsTop'>
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series :dataSource='data' type='Area' xName='x' yName='y' width=2>
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { RangeNavigatorComponent as EjsRangenavigator, RangenavigatorSeriesDirective as ERangenavigatorSeries, RangenavigatorSeriesCollectionDirective as ERangenavigatorSeriesCollection, AreaSeries, DateTime, PeriodSelector } from "@syncfusion/ej2-vue-charts";
import { bitCoinData } from "./default_data.js";

const valueType = 'DateTime';
const periodSelectorSettingsTop = {
  periods: [
    { text: "1M", interval: 1, intervalType: "Months" },
    { text: "3M", interval: 3, intervalType: "Months" },
    { text: "6M", interval: 6, intervalType: "Months" },
    { text: "1Y", interval: 1, intervalType: "Years" },
    { text: "2Y", interval: 2, intervalType: "Years", selected: true },
    { text: "ALL" }
  ],
  position: "Top"
};
const value = [new Date('2017-09-01'), new Date('2018-02-01')];
const labelFormat = 'MMM-yy';
const data = bitCoinData;

provide('rangeNavigator', [DateTime, AreaSeries, PeriodSelector]);

</script>
<template>
  <div id="app">
    <ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat'
      :periodSelectorSettings='periodSelectorSettingsTop'>
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series :dataSource='data' type='Area' xName='x' yName='y' width=2>
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  </div>
</template>
<script>

import { RangeNavigatorComponent, RangenavigatorSeriesDirective, RangenavigatorSeriesCollectionDirective, AreaSeries, DateTime, PeriodSelector } from "@syncfusion/ej2-vue-charts";
import { bitCoinData } from "./default_data.js";

export default {
  name: "App",
  components: {
    "ejs-rangenavigator": RangeNavigatorComponent,
    "e-rangenavigator-series-collection": RangenavigatorSeriesCollectionDirective,
    "e-rangenavigator-series": RangenavigatorSeriesDirective
  },
  data() {
    return {
      valueType: 'DateTime',
      periodSelectorSettingsTop: {
        periods: [
          { text: "1M", interval: 1, intervalType: "Months" },
          { text: "3M", interval: 3, intervalType: "Months" },
          { text: "6M", interval: 6, intervalType: "Months" },
          { text: "1Y", interval: 1, intervalType: "Years" },
          { text: "2Y", interval: 2, intervalType: "Years", selected: true },
          { text: "ALL" }
        ],
        position: "Top"
      },
      value: [new Date('2017-09-01'), new Date('2018-02-01')],
      labelFormat: 'MMM-yy',
      data: bitCoinData
    };
  },
  provide: {
    rangeNavigator: [DateTime, AreaSeries, PeriodSelector]
  }
};
</script>

To use the period selector feature, inject the PeriodSelector module using the RangeNavigator.Inject(PeriodSelector) method.

Positioning period selector

The position property allows the users to position the period selector at the Top or Bottom.

<template>
  <div id="app">
    <ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat'
      :periodSelectorSettings='periodSelectorSettingsTop'>
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series :dataSource='data' type='Area' xName='x' yName='y' width=2>
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { RangeNavigatorComponent as EjsRangenavigator, RangenavigatorSeriesDirective as ERangenavigatorSeries, RangenavigatorSeriesCollectionDirective as ERangenavigatorSeriesCollection, AreaSeries, DateTime, PeriodSelector } from "@syncfusion/ej2-vue-charts";
import { bitCoinData } from "./default_data.js";

const valueType = 'DateTime';
const periodSelectorSettingsTop = {
  periods: [
    { text: "1M", interval: 1, intervalType: "Months" },
    { text: "3M", interval: 3, intervalType: "Months" },
    { text: "6M", interval: 6, intervalType: "Months" },
    { text: "1Y", interval: 1, intervalType: "Years" },
    { text: "2Y", interval: 2, intervalType: "Years", selected: true },
    { text: "ALL" }
  ],
  position: "Bottom"
};
const value = [new Date('2017-09-01'), new Date('2018-02-01')];
const labelFormat = 'MMM-yy';
const data = bitCoinData;
provide('rangeNavigator', [DateTime, AreaSeries, PeriodSelector]);

</script>
<template>
  <div id="app">
    <ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat'
      :periodSelectorSettings='periodSelectorSettingsTop'>
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series :dataSource='data' type='Area' xName='x' yName='y' width=2>
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  </div>
</template>
<script>

import { RangeNavigatorComponent, RangenavigatorSeriesDirective, RangenavigatorSeriesCollectionDirective, AreaSeries, DateTime, PeriodSelector } from "@syncfusion/ej2-vue-charts";
import { bitCoinData } from "./default_data.js";

export default {
  name: "App",
  components: {
    "ejs-rangenavigator": RangeNavigatorComponent,
    "e-rangenavigator-series-collection": RangenavigatorSeriesCollectionDirective,
    "e-rangenavigator-series": RangenavigatorSeriesDirective
  },
  data() {
    return {
      valueType: 'DateTime',
      periodSelectorSettingsTop: {
        periods: [
          { text: "1M", interval: 1, intervalType: "Months" },
          { text: "3M", interval: 3, intervalType: "Months" },
          { text: "6M", interval: 6, intervalType: "Months" },
          { text: "1Y", interval: 1, intervalType: "Years" },
          { text: "2Y", interval: 2, intervalType: "Years", selected: true },
          { text: "ALL" }
        ],
        position: "Bottom"
      },
      value: [new Date('2017-09-01'), new Date('2018-02-01')],
      labelFormat: 'MMM-yy',
      data: bitCoinData
    };
  },
  provide: {
    rangeNavigator: [DateTime, AreaSeries, PeriodSelector]
  }
};
</script>

Height

The height property allows the users to specify the height of the period selector. The default value of the height property is 43px.

<template>
  <div id="app">
    <ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat'
      :periodSelectorSettings='periodSelectorSettingsTop'>
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series :dataSource='data' type='Area' xName='x' yName='y' width=2>
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { RangeNavigatorComponent as EjsRangenavigator, RangenavigatorSeriesDirective as ERangenavigatorSeries, RangenavigatorSeriesCollectionDirective as ERangenavigatorSeriesCollection, AreaSeries, DateTime, PeriodSelector } from "@syncfusion/ej2-vue-charts";
import { bitCoinData } from "./default_data.js";

const valueType = 'DateTime';
const periodSelectorSettingsTop = {
  periods: [
    { text: "1M", interval: 1, intervalType: "Months" },
    { text: "3M", interval: 3, intervalType: "Months" },
    { text: "6M", interval: 6, intervalType: "Months" },
    { text: "1Y", interval: 1, intervalType: "Years" },
    { text: "2Y", interval: 2, intervalType: "Years", selected: true },
    { text: "ALL" }
  ],
  position: "Top",
  height: 65
};
const value = [new Date('2017-09-01'), new Date('2018-02-01')];
const labelFormat = 'MMM-yy';
const data = bitCoinData;

provide('rangeNavigator', [DateTime, AreaSeries, PeriodSelector]);

</script>
<template>
    <div id="app">
        <ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat'
        :periodSelectorSettings='periodSelectorSettingsTop' >
            <e-rangenavigator-series-collection>
                <e-rangenavigator-series :dataSource='data' type='Area' xName='x' yName='y' width=2>
                </e-rangenavigator-series>
            </e-rangenavigator-series-collection>
        </ejs-rangenavigator>
    </div>
</template>
<script>

import {  RangeNavigatorComponent, RangenavigatorSeriesDirective, RangenavigatorSeriesCollectionDirective, AreaSeries, DateTime, PeriodSelector } from "@syncfusion/ej2-vue-charts";
import { bitCoinData } from "./default_data.js";

export default {
name: "App",
components: {
    "ejs-rangenavigator": RangeNavigatorComponent,
    "e-rangenavigator-series-collection": RangenavigatorSeriesCollectionDirective,
    "e-rangenavigator-series": RangenavigatorSeriesDirective
},
  data() {
    return {
     valueType: 'DateTime',
      periodSelectorSettingsTop: {
        periods: [
          { text: "1M", interval: 1, intervalType: "Months" },
          { text: "3M", interval: 3, intervalType: "Months" },
          { text: "6M", interval: 6, intervalType: "Months" },
          { text: "1Y", interval: 1, intervalType: "Years" },
          { text: "2Y", interval: 2, intervalType: "Years", selected: true },
          { text: "ALL" }
        ],
        position: "Top",
        height: 65
      },
     value: [new Date('2017-09-01'), new Date('2018-02-01')],
     labelFormat: 'MMM-yy',
     data: bitCoinData
    };
  },
  provide: {
    rangeNavigator: [DateTime, AreaSeries, PeriodSelector]
  }
};
</script>

Visibility of range navigator

The disableRangeSelector property allows the users to display only the period selector and not the Range Selector.

<template>
  <div id="app">
    <ejs-rangenavigator :valueType='valueType' labelPosition='Outside' :dataSource='data' xName='x' yName='Close'
      :periodSelectorSettings='periodSelectorSettingsTop' disableRangeSelector=true>
    </ejs-rangenavigator>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { RangeNavigatorComponent as EjsRangenavigator, AreaSeries, PeriodSelector, DateTime } from "@syncfusion/ej2-vue-charts";
import { chartData } from "./default_data.js";


const valueType = 'DateTime';
const periodSelectorSettingsTop = {
  periods: [
    { text: "1M", interval: 1, intervalType: "Months" },
    { text: "3M", interval: 3, intervalType: "Months" },
    { text: "6M", interval: 6, intervalType: "Months" },
    { text: "1Y", interval: 1, intervalType: "Years" },
    { text: "2Y", interval: 2, intervalType: "Years", selected: true },
    { text: "ALL" }
  ],
  position: "Top"
};
const data = chartData;

provide('rangeNavigator', [DateTime, AreaSeries, PeriodSelector]);

</script>
<template>
  <div id="app">
    <ejs-rangenavigator :valueType='valueType' labelPosition='Outside' :dataSource='data' xName='x' yName='Close'
      :periodSelectorSettings='periodSelectorSettingsTop' disableRangeSelector=true>
    </ejs-rangenavigator>
  </div>
</template>
<script>

import { RangeNavigatorComponent, AreaSeries, PeriodSelector, DateTime } from "@syncfusion/ej2-vue-charts";
import { chartData } from "./default_data.js";

export default {
  name: "App",
  components: {
    "ejs-rangenavigator": RangeNavigatorComponent
  },
  data() {
    return {
      valueType: 'DateTime',
      periodSelectorSettingsTop: {
        periods: [
          { text: "1M", interval: 1, intervalType: "Months" },
          { text: "3M", interval: 3, intervalType: "Months" },
          { text: "6M", interval: 6, intervalType: "Months" },
          { text: "1Y", interval: 1, intervalType: "Years" },
          { text: "2Y", interval: 2, intervalType: "Years", selected: true },
          { text: "ALL" }
        ],
        position: "Top"
      },
      data: chartData
    };
  },
  provide: {
    rangeNavigator: [DateTime, AreaSeries, PeriodSelector]
  }
};
</script>

See Also