HighCharts Realtime Panels

This tutorial shows how to create a layout with multiple historic stockprice charts using StrelitLayout, HighCharts and data from the

. It tries to be a bit more complex, real-worldy use case.

Interactive Example

Architecture & 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 Configuration

Let's start with the configuration for StrelitLayout:

const config = {
  root: {
    type: 'row',
    content: [
      {
        type: 'component',
        componentType: 'stockChart',
        componentState: {
          companyName: 'Google Inc.',
          tickerSymbol: 'GOOGL',
          color: '#22c55e',
        },
      },
      {
        type: 'component',
        componentType: 'stockChart',
        componentState: {
          companyName: 'Apple Inc.',
          tickerSymbol: 'AAPL',
          color: '#38bdf8',
        },
      },
    ],
  },
};

const layoutContainer = document.getElementById('layoutContainer');
const myLayout = new StrelitLayout(layoutContainer);

myLayout.registerComponentConstructor('stockChart', StockChartComponent);
myLayout.loadLayout(config);

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 Implementation

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

class StockChartComponent {
  constructor(container, itemConfig) {
    const state = itemConfig.componentState || {};
    this._container = container;
    this._state = state;
    this._chart = null;

    this._highChartsConfig = {
      title: { text: 'Historic prices for ' + state.companyName },
      series: [],
      plotOptions: { line: { marker: { enabled: false } } },
      xAxis: { type: 'datetime' },
      yAxis: { title: { text: 'Price in USD' } },
      chart: {
        renderTo: container.element, // Native HTMLElement directly supported
      },
    };

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

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

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

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

  _bindContainerEvents() {
    this._container.on('resize', () => this._setSize());
    this._container.on('destroy', () => {
      if (this._chart) this._chart.destroy();
    });
  }

  _setSize() {
    if (this._chart) {
      this._chart.setSize(this._container.width, this._container.height);
    }
  }
}

Some bits worth noting:

Direct Native DOM via container.element

In modern Strelit UI Kit, container.element returns the native HTMLElement directly without requiring jQuery unboxing ([0]). HighCharts attaches directly to renderTo: container.element.

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 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.

Handling 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.

Cleanup & Memory Management

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.