StockChart Overview
The StockChart is a specialized control for visualizing the price movement of a financial instrument over a certain period of time.
Stockcharts include extensive touch support and a navigator pane for easy browsing of extended time periods. Generally, the StockChart extends the Kendo UI Chart component and shares most of its features.
Basic Usage
The following example demonstrates the StockChart in action.
import { Component } from '@angular/core';
import { StockDataService } from './stock-data.service';
@Component({
selector: 'my-app',
template: `
<kendo-stockchart>
<kendo-chart-title text="The Boeing Company\nNYSE:BA">
</kendo-chart-title>
<kendo-chart-series>
<kendo-chart-series-item
type="candlestick"
[data]="data"
openField="Open"
closeField="Close"
lowField="Low"
highField="High"
categoryField="Date">
</kendo-chart-series-item>
</kendo-chart-series>
<kendo-chart-navigator>
<kendo-chart-navigator-select [from]="from" [to]="to">
</kendo-chart-navigator-select>
<kendo-chart-navigator-series>
<kendo-chart-navigator-series-item type="area" [data]="data" field="Close" categoryField="Date">
</kendo-chart-navigator-series-item>
</kendo-chart-navigator-series>
</kendo-chart-navigator>
</kendo-stockchart>
`
})
export class AppComponent {
public data: any[] = [];
public from: Date = new Date('2009/02/05');
public to: Date = new Date('2011/10/07');
constructor(private service: StockDataService) {
this.service.get().then((data) => {
this.data = data;
});
}
}
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { StockChartModule } from '@progress/kendo-angular-charts';
import { AppComponent } from './app.component';
import { StockDataService } from './stock-data.service';
import 'hammerjs';
@NgModule({
bootstrap: [ AppComponent ],
declarations: [ AppComponent ],
imports: [ BrowserModule, BrowserAnimationsModule, HttpClientModule, HttpClientJsonpModule , StockChartModule ],
providers: [ StockDataService ]
})
export class AppModule {}
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
@Injectable()
export class StockDataService {
private url = 'https://demos.telerik.com/kendo-ui/service/StockData';
constructor(private http: HttpClient) {
}
public get(filter?: any): Promise<any[]> {
return new Promise<any[]>((resolve: Function) => {
this.http.jsonp(this.url + this.getOptions(filter), 'callback')
.subscribe(result => resolve(result));
});
}
private getOptions(filter: any): string {
let params = new HttpParams();
if (filter) {
const filters = {
logic: 'and',
filters: [{
field: 'Date',
operator: 'gte',
value: filter.from
}, {
field: 'Date',
operator: 'lt',
value: filter.to
}]
};
params = params.append('filter', JSON.stringify(filters));
}
return params.keys.length ? '&' + params.toString() : '';
}
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
Features and Functionalities
In addition to its individual features, the StockChart supports all configuration options of the Chart.
Navigator
The StockChart navigator represents a pane that is placed at the bottom of the chart and which can be used to change the date interval in the main panes.
To limit the range that is displayed by the Chart, refer to the article on appearance.
To configure the navigator, either:
- Use the
kendo-chart-navigatorcomponent and its child components, or - Set the
navigatoroption.
To load the main series data for the selected period on demand, use the navigatorFilter event. In this case, you can prevent the navigator from being redrawn by using the skipNavigatorRedraw method.
import { Component } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
@Component({
selector: 'my-app',
template: `
<kendo-stockchart (navigatorFilter)="onNavigatorFilter($event)">
<kendo-chart-series>
<kendo-chart-series-item
type="candlestick"
[data]="seriesData"
openField="Open"
closeField="Close"
lowField="Low"
highField="High"
categoryField="Date">
</kendo-chart-series-item>
</kendo-chart-series>
<kendo-chart-navigator
[categoryAxis]="categoryAxisOptions"
[hint]="hintOptions"
[pane]="paneOptions"
[visible]="isVisible">
<kendo-chart-navigator-select [from]="from" [to]="to">
</kendo-chart-navigator-select>
<kendo-chart-navigator-series>
<kendo-chart-navigator-series-item type="area" [data]="navigatorData" field="Close" categoryField="Date">
</kendo-chart-navigator-series-item>
</kendo-chart-navigator-series>
</kendo-chart-navigator>
</kendo-stockchart>
<br /><br />
<button class="k-button" (click)="isVisible = !isVisible">Toggle Navigator</button>
`
})
export class AppComponent {
private url = 'https://demos.telerik.com/kendo-ui/service/StockData';
public seriesData: any[] = [];
public navigatorData: any[] = [];
public from: Date = new Date('2009/02/05');
public to: Date = new Date('2011/10/07');
public isVisible = true;
public categoryAxisOptions = {
axisCrossingValue: 5,
baseUnit: 'months',
background: '#000',
color: '#fff'
};
public hintOptions = {
format: '{0:dd MMM, yyyy}'
};
public paneOptions = {
background: 'rgba(209, 242, 78, 0.2)',
border: {
color: 'black',
dashType: 'longDashDot',
width: 2
},
height: 150,
title: 'Pane title'
};
constructor(private http: HttpClient) {
// Load low resolution data for the navigator series and detailed data for the main series.
this.getAll({ from: this.from, to: this.to }).then((data) => {
this.navigatorData = data[0];
this.seriesData = data[1];
});
}
public onNavigatorFilter(e) {
// Get the data for the selected period.
this.service.get({ from: e.from, to: e.to }).then((data) => {
// Prevent the navigator from being redrawn because of the change in the options.
// You only need to change the data in the main series.
e.sender.skipNavigatorRedraw();
this.seriesData = data;
});
}
public get(filter?: any): Promise<any[]> {
return new Promise<any[]>((resolve: Function) => {
this.http.jsonp(this.url + this.getOptions(filter), 'callback')
.subscribe(result => resolve(result));
});
}
public getAll(filter: any): Promise<any> {
return Promise.all([this.get(), this.get(filter)]);
}
private getOptions(filter: any): string {
let params = new HttpParams();
if (filter) {
const filters = {
logic: 'and',
filters: [{
field: 'Date',
operator: 'gte',
value: filter.from
}, {
field: 'Date',
operator: 'lt',
value: filter.to
}]
};
params = params.append('filter', JSON.stringify(filters));
}
return params.keys.length ? '&' + params.toString() : '';
}
}
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { StockChartModule } from '@progress/kendo-angular-charts';
import { AppComponent } from './app.component';
import { StockDataService } from './stock-data.service';
import 'hammerjs';
@NgModule({
bootstrap: [ AppComponent ],
declarations: [ AppComponent ],
imports: [ BrowserModule, BrowserAnimationsModule, HttpClientModule, HttpClientJsonpModule, StockChartModule ],
providers: [ StockDataService ]
})
export class AppModule {}
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
@Injectable()
export class StockDataService {
private url = 'https://demos.telerik.com/kendo-ui/service/StockData';
constructor(private http: HttpClient) {
}
public get(filter?: any): Promise<any[]> {
return new Promise<any[]>((resolve: Function) => {
this.http.jsonp(this.url + this.getOptions(filter), 'callback')
.subscribe(result => resolve(result));
});
}
public getAll(filter: any): Promise<any> {
return Promise.all([this.get(), this.get(filter)]);
}
private getOptions(filter: any): string {
let params = new HttpParams();
if (filter) {
const filters = {
logic: 'and',
filters: [{
field: 'Date',
operator: 'gte',
value: filter.from
}, {
field: 'Date',
operator: 'lt',
value: filter.to
}]
};
params = params.append('filter', JSON.stringify(filters));
}
return params.keys.length ? '&' + params.toString() : '';
}
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);