Using Strelit Layout with HighCharts and Yahoo Finance

This tutorial shows how to create a layout with multiple historic stockprice charts using StrelitLayout, HighCharts and data from the Yahoo Finance API. It tries to be a bit more complex, real-worldy use case.

Here's what we're after

Structure

This example consists of three parts:

• A StockDataRequest class that retrieves data from Yahoo Finance using YQL (Yahoo Query Language)
• A StockChartComponent class that handles the interaction between HighCharts, Strelit Layout and the DataProvider
• A bootstrap script to configure and initialise the layout

For this tutorial we'll concentrate on the StockChartComponent class and the layout configuration. If you'd like to learn more about the StockDataRequest class, please have a look at the Codepen above.

Strelit Layout config

Let's start with the configuration for StrelitLayout.

var myLayout = new StrelitLayout({
    content:[{
        type: 'row',
        content: [{
            type: 'component',
            componentName: 'stockChart',
            componentState: {
                companyName: 'Google Inc.',
                tickerSymbol: 'GOOGL',
                color:'#7C7'
            }
        },{
            type: 'component',
            componentName: 'stockChart',
            componentState: {
                companyName: 'Apple Inc.',
                tickerSymbol: 'AAPL',
                color: '#77C' 
            }
        }]
    }]
});

myLayout.registerComponent( 'stockChart', StockChartComponent );
myLayout.init();

It creates a basic layout with two components in a row (if you're not familiar with Strelit Layout configs yet, please have a look at the getting started tutorial). The componentState attribute contains three keys:

• companyName will be used for the chart's title and series description
• tickerSymbol is a standardised way of identifying stocks and will be used to download the right historical prices from Yahoo Finance
• color defines the line-color for the plot

StockChartComponent

The StockChart component is the glue between HighCharts, Strelit Layout and Yahoo Finance. The complete class looks like this:

StockChartComponent = function( container, state ) {
    this._highChartsConfig = {
        title: { text: 'Historic prices for ' + state.companyName },
        series: [],
        plotOptions: { line: { marker: { enabled: false } } },
        xAxis:{ type: 'datetime' },
        yAxis:{ title: 'Price in USD' },
        chart:{ renderTo: container.getElement()[ 0 ] }
    };

    this._container = container;
    this._state = state;
    this._chart = null;

    this._container.setTitle( 'Chart for ' + state.companyName );
    this._container.on( 'open', this._createChart.bind( this ) );
};

StockChartComponent.prototype._createChart = function() {
    this._chart = new Highcharts.Chart( this._highChartsConfig );
    this._chart.showLoading( 'Loading data...' );
    new StockDataRequest( this._state.tickerSymbol, this._onDataReady.bind( this ) );
};

StockChartComponent.prototype._onDataReady = function( highchartsData ) {
    this._chart.addSeries({
        color: this._state.color,
        name: this._state.companyName,
        data: highchartsData
    });

    this._chart.hideLoading();
    this._bindContainerEvents();
};

StockChartComponent.prototype._bindContainerEvents = function() {
    this._container.on( 'resize', this._setSize.bind( this ) );
    this._container.on( 'destroy', this._chart.destroy.bind( this._chart ) );
};

StockChartComponent.prototype._setSize = function() {
    this._chart.setSize( this._container.width, this._container.height );
};

Some bits worth noting

getElement() returns a jQuery element

chart:{ renderTo: container.getElement()[ 0 ] }

container.getElement() returns a jQuery wrapped DOM element, yet HighCharts expects a raw element. container.getElement()[ 0 ] allows to access it.

setting titles

this._container.setTitle( 'Chart for ' + state.companyName );

Every item in Strelit Layout can have a title. Titles are displayed on tabs or on window headers and can either be passed by configuration or set programmatically by calling item.setTitle( title ) or container.setTitle( title )

deferring chart creation until the container is open

this._chart = null;
this._container.on( 'open', this._createChart.bind( this ) );

StockChartComponent.prototype._createChart = function() {
    this._chart = new Highcharts.Chart( this._highChartsConfig );
    ...
}

When Strelit Layout creates the component it is not yet sized or attached to the DOM. This is okay for most cases, but some libraries like HighCharts or SlickGrid measure the size of the element they are placed into and resize themselves accordingly.

To support this, we'll have to wait until the container's open event.

handle resizing

StockChartComponent.prototype._bindContainerEvents = function() {
    this._container.on( 'resize', this._setSize.bind( this ) );
    ...
};

StockChartComponent.prototype._setSize = function() {
    this._chart.setSize( this._container.width, this._container.height );
};

If your component's reflow is purely managed by CSS it will adjust to whatever size its container is. But for many usecases you'd want to resize it programmatically, e.g. to redraw a chart or to add / remove rows from a virtualised grid.

clean up

this._container.on( 'destroy', this._chart.destroy.bind( this._chart ) );

Cleaning up after your components is important to prevent memoryleaks. Especially for apps that allow to add or remove components at runtime.

Community & Support