Welcome to FinancialChart: Introducing Advanced Stock Trending Visualizations

We're thrilled to announce our newest and greatest control, FinancialChart. If you're already familiar with Wijmo5, you know that we already offer FlexChart, FlexPie, and our Gauge controls. These three controls covered a large percentage of charting requirements on the web. But as websites mature, the demands for charting are becoming increasingly specific and more robust in the web space. As data gathering becomes more common and complete, developers are being tasked with presenting extremely large and complex data sets to our end users for analysis. As a front end control provider, it was our task to make that easier. Our engineering team has been doing a great deal of research into the financial charting market and developed something up to the task.

FinancialChart allows you to instantly create advanced, stock trending visualizations. You can analyze with trend lines, filters, range selectors, and annotations—and accomplish it with minimal code. The control itself is optimized and targeted for the finance industry. Before we take a look at the code, let's walk you through the features of the control, show you how to get started with the control, and introduce and discuss the base class.

Plot Multiple Areas, Optimize your Axes, And Let Us Analyze

We identified some key features of the control you might find helpful. The first set is a collection of built-in features that you can configure or turn off or on. The second set is more of an extensibility point for you as a developer to help your users better analyze the dataset.

Multiple Plot Areas

Most of the time when you're analyzing financial information, it’s tough to get context without comparing one data set to another. The FinancialChart allows you to plot series adjacent to each other, or you can stack areas within a chart, preventing overlapping data.

Smart Axis

The axis of the FinancialChart automatically renders optimized axes. Often with financial charting, you want to bind your chart’s x axis to the datasets date field. The focus of the chart, however, is not on the date, but rather the change or difference in your y axis value. If you're trying to plot logarithmic data you’re in luck, as the FinancialChart will handle this case.

Built-in Analytics

Visualize and analyze data trends with Trend Lines. At the time of this post, we support all of the trend lines that Microsoft Excel supports. This functionality is built-in. You can provide moving averages that allows users to track average trends. These trends are calculated by a average of the original data set either by simple, exponential, weighted, or triangular.

Annotations

We've talked a bit about what the control does for you automatically to help the user understand the data. The FinancialChart also provides an Annotation layer so you can provide context for your data. You can implement your own custom drawing or text or use pre-defined symbols. For instance, you can highlight events related to stock market data. By using the annotation layer, we can mark certain events in time on your chart, like a sharp increase or decrease, and provide more context based on that data point, whether it's a picture, a link, or a textblock.

CrossHairs

When you need to plot hundreds or thousands of datasets, the individual points and the data they contain can often get lost. With the crosshairs, you can precisely locate data points with LineMarkers. You can use horizontal, vertical, or both depending on your need.

ZoomCharts

In additional to crosshairs, you can zoom into a certain data range. You can customize the charts rendered range of data at runtime via the mouse or fingers or the slider control. First class AngularJS support is included.

Getting Started: Adding the AngularJS and Wijmo5 directives

Let's look at how to use the base control.

  1. We need to add the necessary references to our application, including the AngularJS, Wijmo5, and Wijmo5’s AngularJS directives. Note that in this instance, Wijmo5 does not have any third-party dependencies other than AngularJS. If you're using the CDN, you still need to download Wijmo Enterprise to reference the FinancialChart controls. ~~~
~~~

  1. Include the Wijmo5 directive in the app module declaration: 

    var app = angular.module('app', ['wj']);

  2. Add the control host to our markup, provide itemssource and a x axis binding: ~~~

~~~
  1. Define some series and which dataset they will represent: ~~~
~~~

  1. Add a controller to provide some data and logic: 

    app.controller('appCtrl', function appCtrl($scope,$http) {  
 $http.get('data/fb.json')  
  .success(function (data) {  
   $scope.data = data;  
  }).error(function (error) {  
   console.log(error);  
  });  
 $scope.chartProps = {   
  header: 'Facebook, Inc. (FB)',  
 };  
 });

    fb.json is provided in the zip download below.

  2. Add the app name and the app control to our body tag: ~~~
~~~

  1. Add some properties to our Chart: 

     $scope.ctx = {  
  options: { ... }  
};

At this point, we're only missing one thing: which chart type we want to display.

Financial Chart Types

The FinancialChart has eight different charts. You can read more about each one here in a four-part series. For this blog, we'll look at one of each type and demo how to use it. I've attached samples for each one provided via the zip. A sample is provided via download from the zip file .

CandleStick

Wijmo FinancialChart Candlestick Chart In order to display this chart type, use the following definition: 

chart-type="Candlestick"
  • Presents items with high, low, open, and close values.
  • The size of the wick line is determined by the High and Low values, while the size of the bar is determined by the Open and Close values.
  • The bar is displayed using different colors, depending on whether the close value is higher or lower than the open value.
  • The data for this chart type can be defined using the FinancialChart or FinancialSeries binding property as a comma-separated value in the following format: "highProperty, lowProperty, openProperty, closeProperty".

In this example, we can simply define it as the following:

Here's what the candlestick chart should look like. The first time I did this, I switched the high and low values and got a strange-looking chart.

Heikin-Ashi

Wijmo FinancialChart Heikin-Ashi Chart In order to display this chart type, use the following definition: 

  chart-type="HeikinAshi"
  • This chart derived from the candlestick chart and uses information from the current and prior period in order to filter out the noise.
  • These charts cannot be combined with any other series objects.
  • The data for this chart type can be defined using the FinancialChart or FinancialSeries binding property as a comma-separated value in the following format: "highProperty, lowProperty, openProperty, closeProperty".
  • This chart is as simple as changing the type and defining the binding.

The markup is pretty straightforward.

The Heikin-Ashi chart does not contain too many extensibility points—all you really need to watch is the order of the bindings.

Line Break

Wijmo FinancialChart Simple Line Break Chart In order to display this chart type, use the following definition: 

 chart-type="LineBreak"
  • The Line Break chart filters out noise by focusing exclusively on price changes.
  • These charts cannot be combined with any other series objects.
  • The data for this chart type can be defined using the FinancialChart or FinancialSeries binding property as a comma-separated value in the following format: "highProperty, lowProperty, openProperty, closeProperty".
  • This charting control is very similar to the Heikin-Ashi control, in that you only need to do a minimal set of configurations to get the chart to work.

Here's the markup:

The line break chart is similar to the Heikin-Ashi chart in terms of configurations.

Renko

Wijmo FinancialChart Renko Chart In order to display this chart type, use the following definition: 

 chart-type="Renko"

The next two chart types aren’t as simple to configure and will require some additional steps outlined below.

  • This chart ignores time and focuses on price changes that meet a specified amount.
  • These charts cannot be combined with any other series objects.
  • The data for this chart type can be defined using the FinancialChart or FinancialSeries binding property as a comma-separated value in the following format: "highProperty, lowProperty, openProperty, closeProperty".

This configuration is very similar to the candlestick chart, but we need to configure some additional properties, so let's go ahead and add a place in our controller. Here we're going to define some properties for the Renko chart type. The first is the boxSize, the rangeMode, and the fields. 

$scope.ctx = {  
 options: {  
 renko: {  
  boxSize: 2,  
  rangeMode: 'Fixed',  
  fields: 'Close'  
   }  
  }  
 };

Now we need to bind these options to our Renko chart: 

options="ctx.options"

You can take a look at the documentation in the APIs for more details in terms of options. Note that this is the first chart with options. If you're using multiple charts on the same page, you can use the names of the charts to define the options, and keep all of your options in a single controller for simplicity.

Kagi

In order to display this chart type, use the following definition: 

 chart-type="Kagi"

This is the last HLOC charting control that we'll discuss in this blog.

  • The focus of this chart is to ignore time and focus on price action.
  • These charts cannot be combined with any other series objects.
  • The data for this chart type can be defined using the FinancialChart or FinancialSeries binding property as a comma-separated value in the following format: "highProperty, lowProperty, openProperty, closeProperty".
  • At this point, the pattern should begin to repeat itself.

In order to use the Kagi chart type, we need to define some options for it, just like we did for the Renko. 

kagi: {  
  reversalAmount: 1,  
  rangeMode: 'Fixed',  
  fields: 'Close'  
}

This is similar to the Renko in terms of configurations. The params are described fully in the documentation.

Scatter

Wijmo FinancialChart Simple Scatter Chart In order to display this chart type, use the following definition: 

chart-type="Scatter"

Moving away from HLOC charts, let's look at the scatter plot. This chart is pretty standard: it uses X and Y coordinates to show patterns within the data. The scatter plot itself is pretty straightforward. The only new thing we're introducing here are multiple series.

Volume Charts

Wijmo FinancialChart ColumnVolume Chart In order to display this chart type, use the following definition. 

 chart-type="ColumnVolume"

The volume charts configurations are all very similar, so I'm going focus on the ColumnVolume control.

  • It's identical to the standard Column chart, except that the width of each bar is determined by the Volume value.
  • The data for this chart type can be defined using the FinancialChart or FinancialSeries binding property as a comma-separated value in the following format: "yProperty, volumeProperty".
  • This chart type can only be used at the FinancialChart level, and should not be applied on FinancialSeries objects.
  • Only one set of volume data is currently supported per FinancialChart.

Resources

  1. Download Sample (zip)
  2. View ChartType API
  3. Online Financial Chart Demo
  4. Download Wijmo

MESCIUS inc.

comments powered by Disqus