Search results

Types of Data in Angular Range Navigator component

14 Apr 2021 / 8 minutes to read

Numeric

Numeric scale is used to represent the numeric values of data in a chart. By default, the valueType of a range navigator is Double.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { double } from 'datasource.ts'

@Component({
    selector: 'app-container',
    template:
    `<ejs-rangenavigator id="rn-container" [value]='value'>
            <e-rangenavigator-series-collection>
                <e-rangenavigator-series [dataSource]='chartData' type='StepLine' xName='x' yName='y' width=2>
                </e-rangenavigator-series>
            </e-rangenavigator-series-collection>
        </ejs-rangenavigator>`
})
export class AppComponent implements OnInit {
    public value: Object[];
    public chartData: Object[];
    ngOnInit(): void {
        this.value = [12,30];
        this.chartData = double;
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts';
import {  StepLineSeriesService} from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule, RangeNavigatorModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ StepLineSeriesService ]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Range

Minimum and maximum of the Range navigator will be calculated automatically based on the provided data. You can also customize the range using the minimum, maximum, and interval properties.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-container',
    template:
    `<ejs-rangenavigator id="rn-container" [value]='value' [minimum]='minimum' [maximum]='maximum' [interval]='interval'>
            <e-rangenavigator-series-collection>
                <e-rangenavigator-series [dataSource]='chartData' type='StepLine' xName='xData' yName='yData' width=2>
                </e-rangenavigator-series>
            </e-rangenavigator-series-collection>
        </ejs-rangenavigator>`
})
export class AppComponent implements OnInit {
    public value: Object[];
    public chartData: Object[];
    public minimum: number;
    public maximum: number;
    public interval: number;
    ngOnInit(): void {
        this.value = [60,100];
        this.chartData = [
                            { xData: 10, yData: 35 }, { xData: 20, yData: 28 },
                            { xData: 30, yData: 34 }, { xData: 40, yData: 32 },
                            { xData: 50, yData: 40 }, { xData: 60, yData: 30 },
                            { xData: 70, yData: 4 }, { xData: 80, yData: 22 },
                            { xData: 90, yData: 30 }, { xData: 100, yData: 43 },
                            { xData: 110, yData: 60 }, { xData: 120, yData: 33 },
                            { xData: 130, yData: 40 }, { xData: 140, yData: 29 },
                            { xData: 150, yData: 10 }, { xData: 160, yData: 16 },
                         ];
        this.minimum= 10;
        this.maximum= 160;
        this.interval= 10;
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts';
import {  StepLineSeriesService} from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule, RangeNavigatorModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ StepLineSeriesService ]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Label Format

Numeric labels can be formatted using the labelFormat property.

Numeric labels support all globalized formats.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { double } from 'datasource.ts'

@Component({
    selector: 'app-container',
    template:
    `<ejs-rangenavigator id="rn-container" [value]='value' labelFormat='n1'>
            <e-rangenavigator-series-collection>
                <e-rangenavigator-series [dataSource]='chartData' type='StepLine' xName='x' yName='y' width=2>
                </e-rangenavigator-series>
            </e-rangenavigator-series-collection>
        </ejs-rangenavigator>`
})
export class AppComponent implements OnInit {
    public value: Object[];
    public chartData: Object[];
    ngOnInit(): void {
        this.value = [12,30];
        this.chartData = double;
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts';
import {  StepLineSeriesService} from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule, RangeNavigatorModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ StepLineSeriesService ]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

The following table describes the result of applying some commonly used label formats on numeric values.

Label Value Label Format property value Result Description
1000 n1 1000.0 The Number is rounded to 1 decimal place
1000 n2 1000.00 The Number is rounded to 2 decimal place
1000 n3 1000.000 The Number is rounded to 3 decimal place
0.01 p1 1.0% The Number is converted to percentage with 1 decimal place
0.01 p2 1.00% The Number is converted to percentage with 2 decimal place
0.01 p3 1.000% The Number is converted to percentage with 3 decimal place
1000 c1 $1,000.0 The Currency symbol is appended to number and number is rounded to 1 decimal place
1000 c2 $1,000.00 The Currency symbol is appended to number and number is rounded to 2 decimal place

Custom Label Format

The range navigator also supports custom label formats using placeholders such as {value}$, in which, the value represent the axis label, e.g. 20$.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { double } from 'datasource.ts'

@Component({
    selector: 'app-container',
    template:
    `<ejs-rangenavigator id="rn-container" [value]='value' labelFormat='{value}
            </div>
            <div></div>
        </div>
</div>
>
            <e-rangenavigator-series-collection>
                <e-rangenavigator-series [dataSource]='chartData' type='StepLine' xName='x' yName='y' width=2>
                </e-rangenavigator-series>
            </e-rangenavigator-series-collection>
        </ejs-rangenavigator>`
})
export class AppComponent implements OnInit {
    public value: Object[];
    public chartData: Object[];
    ngOnInit(): void {
        this.value = [12,30];
        this.chartData = double;
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts';
import {  StepLineSeriesService} from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule, RangeNavigatorModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ StepLineSeriesService ]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Logarithmic Axis

Logarithmic supports logarithmic scale, and it is used to visualize data when the Range navigator has numerical values in both lower (e.g.: 10-6) and higher (e.g.: 106) orders of magnitude.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-container',
    template:
    `<ejs-rangenavigator id="rn-container" [value]='value' valueType='Logarithmic' [interval]='interval'>
            <e-rangenavigator-series-collection>
                <e-rangenavigator-series [dataSource]='chartData' type='StepLine' xName='x' yName='y' width=2>
                </e-rangenavigator-series>
            </e-rangenavigator-series-collection>
        </ejs-rangenavigator>`
})

export class AppComponent implements OnInit {

    public value: Object[];
    public chartData: Object[];
    public interval: number;
    ngOnInit(): void {
        this.value = [4,6];
        this.chartData = [];
        for (let i = 0; i < 100; i++) {
            this.chartData.push({
                x: Math.pow(10, i * 0.1),
                y: Math.floor(Math.random() * (80 - 30 + 1)) + 30
            });
        }
        this.interval = 1;
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts';
import {  StepLineSeriesService, LogarithmicService} from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule, RangeNavigatorModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ StepLineSeriesService, LogarithmicService ]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Note: To use logarithmic scale, inject the LogarithmicService into the @NgModule.providers, and then set the valueType to Logarithmic.

Range

Minimum and maximum of the Range navigator will be calculated automatically based on the provided data. You can also customize the range using the minimum, maximum, and interval properties.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-container',
    template:
    `<ejs-rangenavigator id="rn-container" [value]='value' valueType='Logarithmic' [interval]='interval'>
            <e-rangenavigator-series-collection>
                <e-rangenavigator-series [dataSource]='chartData' type='StepLine' xName='x' yName='y' width=2>
                </e-rangenavigator-series>
            </e-rangenavigator-series-collection>
        </ejs-rangenavigator>`
})

export class AppComponent implements OnInit {
    public value: Object[];
    public chartData: Object[];
    public interval: number;
    ngOnInit(): void {
        this.value = [4,6];
        this.chartData = [];
        for (let i = 0; i < 100; i++) {
            this.chartData.push({
                x: Math.pow(10, i * 0.1),
                y: Math.floor(Math.random() * (80 - 30 + 1)) + 30
            });
        }
        this.interval = 1;
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts';
import {  StepLineSeriesService, LogarithmicService} from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule, RangeNavigatorModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ StepLineSeriesService, LogarithmicService ]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Logarithmic Base

Logarithmic base can be customized using the logBase property. The default value of the logBase property is 10.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-container',
template:
`<ejs-rangenavigator id="rn-container" [value]='value' valueType='Logarithmic' [logBase]='log'>
        <e-rangenavigator-series-collection>
            <e-rangenavigator-series [dataSource]='chartData' type='StepLine' xName='x' yName='y' width=2>
            </e-rangenavigator-series>
        </e-rangenavigator-series-collection>
    </ejs-rangenavigator>`
})

export class AppComponent implements OnInit {

public value: Object[];
public chartData: Object[];
public log: number;
ngOnInit(): void {
    this.value = [4,6];
    this.chartData = [];
    for (let i = 0; i < 100; i++) {
        this.chartData.push({
            x: Math.pow(10, i * 0.1),
            y: Math.floor(Math.random() * (80 - 30 + 1)) + 30
        });
    }
    this.log = 2;
}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts';
import {  StepLineSeriesService, LogarithmicService} from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule, RangeNavigatorModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ StepLineSeriesService, LogarithmicService ]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Date-time

Date-time Range navigator supports date-time scale and displays date-time values as a labels in the specified format.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { datasrc } from 'datasource.ts'

@Component({
selector: 'app-container',
template:
`<ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value'>
        <e-rangenavigator-series-collection>
            <e-rangenavigator-series [dataSource]='chartData' type='Area' xName='x' yName='y' width=2>
            </e-rangenavigator-series>
        </e-rangenavigator-series-collection>
    </ejs-rangenavigator>`
})
export class AppComponent implements OnInit {
public periodsValue: Object[];
public chartData: Object[];
public value: Object[];
ngOnInit(): void {
    this.chartData = datasrc;
    this.value=[new Date("2017-08-13"), new Date("2017-12-28")];
}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts';
import { AreaSeriesService, DateTimeService, StepLineSeriesService} from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule, RangeNavigatorModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ AreaSeriesService, DateTimeService, StepLineSeriesService ]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Note: To use date-time scale, inject the DateTimeService into the @NgModule.providers.

Interval Customization

Date-time intervals can be customized using the interval and intervalType properties of the range navigator. For example, when you set interval as 2 and intervalType as years, the interval is considered as 2 years. Date-time supports the following interval types:

  • Auto
  • Years
  • Quarter
  • Months
  • Weeks
  • Days
  • Hours
  • Minutes
Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { datasrc } from 'datasource.ts'

@Component({
selector: 'app-container',
template:
`<ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value' intervalType='Months' [interval]='interval'>
        <e-rangenavigator-series-collection>
            <e-rangenavigator-series [dataSource]='chartData' type='Area' xName='x' yName='y' width=2>
            </e-rangenavigator-series>
        </e-rangenavigator-series-collection>
    </ejs-rangenavigator>`
})
export class AppComponent implements OnInit {
public chartData: Object[];
public value: Object[];
public interval:number;
ngOnInit(): void {
    this.chartData = datasrc;
    this.value=[new Date("2017-08-13"), new Date("2017-12-28")];
    this.interval = 2;
}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts';
import { AreaSeriesService, DateTimeService, StepLineSeriesService} from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule, RangeNavigatorModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ AreaSeriesService, DateTimeService, StepLineSeriesService ]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Label Format

You can format and parse the date to all globalize format using labelFormat property in an axis.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { datasrc } from 'datasource.ts'

@Component({
selector: 'app-container',
template:
`<ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value' labelFormat='y/M/d'>
        <e-rangenavigator-series-collection>
            <e-rangenavigator-series [dataSource]='chartData' type='Area' xName='x' yName='y' width=2>
            </e-rangenavigator-series>
        </e-rangenavigator-series-collection>
    </ejs-rangenavigator>`
})
export class AppComponent implements OnInit {
public chartData: Object[];
public value: Object[];
ngOnInit(): void {
    this.chartData = datasrc;
    this.value=[new Date("2017-08-13"), new Date("2017-12-28")];
}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts';
import { AreaSeriesService, DateTimeService, StepLineSeriesService} from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule, RangeNavigatorModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ AreaSeriesService, DateTimeService, StepLineSeriesService ]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

The following table describes the result of applying some common date time formats to the labelFormat property

Label Value Label Format Property Value Result Description
new Date(2000, 03, 10) EEEE Monday The Date is displayed in day format
new Date(2000, 03, 10) yMd 04/10/2000 The Date is displayed in month/date/year format
new Date(2000, 03, 10) MMM Apr The Shorthand month for the date is displayed
new Date(2000, 03, 10) hm 12:00 AM Time of the date value is displayed as label
new Date(2000, 03, 10) hms 12:00:00 AM The Label is displayed in hours:minutes:seconds format