All Components

StockChart Overview

The StockChart is a specialized control for visualizing the price movement of any financial instrument over a certain period of time.

It includes extensive touch support and a navigator pane for easy browsing of extended time periods. Generally, the StockChart extends the 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 title="The Boeing Company\nNYSE:BA">
              <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 { JsonpModule } from '@angular/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 'rxjs/add/operator/map';
import 'hammerjs';


@NgModule({
    bootstrap:    [ AppComponent ],
    declarations: [ AppComponent ],
    imports:      [ BrowserModule, BrowserAnimationsModule, JsonpModule, StockChartModule ],
    providers:    [ StockDataService ]
})
export class AppModule {}
import { Injectable }    from '@angular/core';
import { Jsonp, URLSearchParams, RequestOptionsArgs } from '@angular/http';

@Injectable()
export class StockDataService {
    private url = 'https://demos.telerik.com/kendo-ui/service/StockData';

    constructor(private jsonp: Jsonp) {
    }

    public get(filter?: any): Promise<any[]> {
        return new Promise<any[]>((resolve: Function) => {
            this.jsonp.get(this.url, this.getOptions(filter))
                .map(res => res.json())
                .subscribe(result => resolve(result));
        });
    }

    private getOptions(filter: any): RequestOptionsArgs {
        const params = new URLSearchParams();
        const options: RequestOptionsArgs = {
            search: params
        };

        params.append('callback', `JSONP_CALLBACK`);

        if (filter) {
            const filters = {
                logic: 'and',
                filters: [{
                    field: 'Date',
                    operator: 'gte',
                    value: filter.from
                }, {
                    field: 'Date',
                    operator: 'lt',
                    value: filter.to
                }]
            };
            params.append('filter', JSON.stringify(filters));
        }

        return options;
    }
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Configuration

The StockChart supports all components and options of the Chart.

Features

The StockChart also delivers the following features:

Navigator

The StockChart navigator represents a pane placed at the bottom of the chart which can be used to change the date interval that is shown in the main panes. The navigator can be configured by using the kendo-chart-navigator component and its child components or through the navigator option.

Loading on Demand

You can also load the main series data on demand for the selected period in the navigatorFilter event. To prevent the navigator from being redrawn in this case, you can use the skipNavigatorRedraw method.

The following example demonstrates the loading of the series data on demand.

import { Component } from '@angular/core';
import { StockDataService } from './stock-data.service';

@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>
              <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>
    `
})
export class AppComponent {

    public seriesData: any[] = [];
    public navigatorData: any[] = [];
    public from: Date = new Date('2009/02/05');
    public to: Date = new Date('2011/10/07');

    constructor(private service: StockDataService) {
        // Loading low resolution data for the navigator series and detailed data for the main series
        service.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
            // We just need to change the data in the main series.
            e.sender.skipNavigatorRedraw();

            this.seriesData = data;
        });
    }
}
import { NgModule } from '@angular/core';
import { JsonpModule } from '@angular/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 'rxjs/add/operator/map';
import 'hammerjs';

@NgModule({
    bootstrap:    [ AppComponent ],
    declarations: [ AppComponent ],
    imports:      [ BrowserModule, BrowserAnimationsModule, JsonpModule, StockChartModule ],
    providers:    [ StockDataService ]
})
export class AppModule {}
import { Injectable }    from '@angular/core';
import { Jsonp, URLSearchParams, RequestOptionsArgs } from '@angular/http';

@Injectable()
export class StockDataService {
    private url = 'https://demos.telerik.com/kendo-ui/service/StockData';

    constructor(private jsonp: Jsonp) {
    }

    public get(filter?: any): Promise<any[]> {
        return new Promise<any[]>((resolve: Function) => {
            this.jsonp.get(this.url, this.getOptions(filter))
                .map(res => res.json())
                .subscribe(result => resolve(result));
        });
    }

    public getAll(filter: any): Promise<any> {
        return Promise.all([this.get(), this.get(filter)]);
    }

    private getOptions(filter: any): RequestOptionsArgs {
        const params = new URLSearchParams();
        const options: RequestOptionsArgs = {
            search: params
        };

        params.append('callback', `JSONP_CALLBACK`);

        if (filter) {
            const filters = {
                logic: 'and',
                filters: [{
                    field: 'Date',
                    operator: 'gte',
                    value: filter.from
                }, {
                    field: 'Date',
                    operator: 'lt',
                    value: filter.to
                }]
            };
            params.append('filter', JSON.stringify(filters));
        }

        return options;
    }
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);
In this article