This section explains you the steps required to create a simple range navigator and demonstrate the basic usage of the range navigator control.
System requirements for Syncfusion Vue UI components
Below is the list of minimum dependencies required to use the range navigator component.
|-- @syncfusion/ej2-vue-charts
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-data
|-- @syncfusion/ej2-pdf-export
|-- @syncfusion/ej2-file-utils
|-- @syncfusion/ej2-compression
|-- @syncfusion/ej2-navigations
|-- @syncfusion/ej2-calendars
|-- @syncfusion/ej2-vue-base
|-- @syncfusion/ej2-svg-base
You can use Vue CLI
to setup your vue applications.
To install Vue CLI use the following commands.
npm install -g @vue/cli
npm install -g @vue/cli-init
Start a new Vue application using below Vue CLI command.
vue init webpack-simple quickstart
cd quickstart
npm install
All the available Essential JS 2 packages are published in npmjs.com
registry.
To install range navigator component, use the following command
npm install @syncfusion/ej2-vue-charts --save
The —save will instruct NPM to include the range navigator package inside of the
dependencies
section of thepackage.json
.
You can register the range navigator component in your application by using the Vue.use()
.
Refer to the code example given below.
import { RangeNavigatorPlugin } from '@syncfusion/ej2-vue-charts';
Vue.use(RangeNavigatorPlugin);
Registering
RangeNavigatorPlugin
in vue, will register the range navigator component along with its required child directives globally.
<ejs-rangenavigator>
selector in <template>
section of the App.vue
file.
The below example shows a basic range navigator,<template>
<div id="app">
<ejs-rangenavigator></ejs-rangenavigator>
</div>
</template>
<script>
import Vue from 'vue';
import { RangeNavigatorPlugin } from '@syncfusion/ej2-vue-charts';
Vue.use(RangeNavigatorPlugin);
export default {
data () {
return {
}
}
}
</script>
The quickstart project is configured to compile and run the application in the browser. Use the following command to run the application.
npm run dev
To create range navigator with additional features, inject the required modules. The following modules are used to extend rangenavigator’s basic functionality.
•AreaSeries
- Inject this module to use area series.
•DateTime
- Inject this module to use date time axis.
•RangeTooltip
- Inject this module to show the tooltip.
These modules should be injected to the provide section as follows,
import Vue from "vue";
import { RangeNavigatorPlugin, AreaSeries, DateTime, RangeTooltip } from "@syncfusion/ej2-vue-charts";
Vue.use(RangeNavigatorPlugin);
export default {
provide: {
rangeNavigator: [AreaSeries, DateTime, RangeTooltip]
}
};
</script>
Now, we are going to provide data to the range navigator. Add a series object to the range navigator by using series
property. Now map the field names x and y in the JSON data to the xName
and yName
properties of the series, then set the JSON data to dataSource property. Since the JSON contains Datetime data,
set the valueType
range Navigator to Category
. By default, the axis valueType is Numeric
.
<template>
<div id="app">
<ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat'>
<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 Vue from "vue";
import { RangeNavigatorPlugin, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";
import { bitCoinData } from "./default_data.js";
Vue.use(RangeNavigatorPlugin);
export default {
data() {
return {
valueType: 'DateTime',
value: [new Date('2017-09-01'), new Date('2018-02-01')],
labelFormat: 'MMM-yy',
data: bitCoinData
};
},
provide: {
rangeNavigator: [DateTime, AreaSeries]
}
};
</script>
The tooltip is useful to show the selected data. You can enable tooltip by setting the enable
property as true in tooltip object
and by injecting RangeTooltip
module using provide
method.
<template>
<div id="app">
<ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat' :tooltip='tooltip'>
<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 Vue from "vue";
import { RangeNavigatorPlugin, AreaSeries, DateTime, RangeTooltip } from "@syncfusion/ej2-vue-charts";
import { bitCoinData } from "./default_data.js";
Vue.use(RangeNavigatorPlugin);
export default {
data() {
return {
valueType: 'DateTime',
value: [new Date('2017-09-01'), new Date('2018-02-01')],
tooltip: { enable: true, displayMode: "Always", format: "MM/dd/yyyy" },
labelFormat: 'MMM-yy',
data: bitCoinData
};
},
provide: {
rangeNavigator: [DateTime, AreaSeries, RangeTooltip]
}
};
</script>