Or should I say “How to deliver charts for Technical analysis” and then throw in a little bit of understanding for a good measure. So, we are technical people, no? Then technical analysis shouldn’t sound so distant? Yeah, well, in the field of finance it kind of does… It’s used for forecasting the direction of prices, a discipline in security analysis (probably not the kind of security you would think about first). There’s also quite a bit of theory behind this, but put shortly it’s about making assumptions based on study of past prices and volumes. Still, being able to understand what you are doing is essential, so I’ll try to cover just a little bit – I have the feeling many don’t quite get those and will find it rather interesting. The analysis involves a whole set of values (business opening and closing prices, high and low reached, all for a set time frame and often complemented by volumes). That much data calls for more specialized types of series. Fortunately, the Ignite UI Data Chart has got you covered! Well, at least the technical part, so you can make the finance crowd happy and leave the analysis part to them. The chart control comes with the Financial Price Series in OHLC mode and Candlestick mode and the recent addition of over 35 financial overlay and indicator series to support those.

Get to know the Financial Price Series

These series are a combination of line and bar charts, where each point in the chart is actually a representation of all those 4 price values. But first things first, the data – all the four major values have to do with stock trading price – the high and low are pretty self explanatory, while the open and close are the trading prices agreed upon at the start and end of the business day or whatever time frame is to be plotted. These are all nicely indicated in a single OHLC bar:

It has a certain continuity to it so I figured it’d be nice to start with and easy to understand. Besides the bar like OHLC, another way of representing stock trades has been the Japanese Candlestick. While they provide the same information, the difference is in the degree of focus on some or all aspects.

Bulls and Bears

It’s beyond me how exactly these two animals came to represent market sentiment / trend, which is exactly the reason to use such type of charting - because “all boats float or sink with the tide”, they say, and also "the trend is your friend". The bull and bear describe upward or downward market trends and with them come the bullish and bearish bars in the charts that help identify trends.

The OHLC has the open and close on specific sides of the high-low bar, so all the data is equally visible, but there is no immediate focus on whether the open was lower than the close or the other way around (note the Ignite UI Data Chart provides color-coding for bullish/bearish). The Candlesticks, on the other hand, put a lot of emphasis on the opening and closing prices and make it quite easily visible and accessible – with both OHLC and bearishness/bullishness explained this should be pretty clear:

The candlesticks’ body is symmetrical, but to indicate bullishness it is empty (or differently color-coded), while the bearish is filled (or just darker):

Again it's the same data, but rearranged and it's a matter of preference, really. There's also a nice technical side effect from this as I'll describe below. In addition, Candlesticks are much more complicated than this - what I pictured above are actually a Big White and Big Black Candle patterns, but there are the most simple and a lot more advanced patterns used to read/predict trends and if you are interested check out this Candlestick pattern article.

The technical stuff

After the brief theory, we reach the part most of you would be interested in. So the series accept high, low, open and close values in the respective member path property. The bonus I mentioned about the data being equal between OHLC and Candlestick is that you can effortlessly switch between them – there’s a reason why they are two modes of the same series - all you have to do is set the “displayType” property to either “candlestick” or “ohlc” and the chart will automatically react to changes! An example switch code:

$("#priceChart").igDataChart("option", "series", [{
    name: "stockSeries",
    displayType: "ohlc"
}]);

Following in the footsteps

While looking for a nice data source for my sample I looked into the amazing Finance Dashboard showcase (you can also download the WPF Finance Dashboard). I loved the sample and I wanted to at least partially create something similar for Ignite UI, since the Ignite UI Data Chart comes from the XAML control. Oh, and I totally stole the sample Yahoo! Pipes source, which if I may add is pretty awesome! So with the data out of the way, setting up a chart is rather easy:

$("#priceChart").igDataChart({
    dataSource: ds.dataView(),
    axes: [{
        type: "categoryX",
        label: "Date",
        name: "xAxis"
      }, {
        type: "numericY",
        name: "yAxis"
    }],
    series: [{
        type: "financial",
        displayType: "candlestick",
        closeMemberPath: "Close",
        highMemberPath: "High",
        lowMemberPath: "Low",
        openMemberPath: "Open",
        xAxis: "xAxis",
        yAxis: "yAxis",
        name: "stockSeries",
        title: "Price Data",
        trendLineType: "simpleAverage",
        trendLinePeriod: 50
    }]
});

As the Financial Series are often displayed with trend line from a variation of a moving averages, do note that as above the “simpleAverage” and the others (exponential, modified, cumulative, weighted) are all moving averages right there at your disposal and can have their period customized.

I also added that accompanying Volume series below in a similar way and a third chart with indicators. Then I figured it’ll also be nice to have some sort of synchronization between the charts to imitate that zoombar’s functionality and event though it’s not quite the same thing, you can easily manipulate them via the World Rectangle. I chose to just use an event from the main stock chart, but this can easily be controlled from a range slider or something similar as well:

$("#priceChart").igDataChart({
            windowRectChanged: function (evt, ui) {
            // Keep the other two charts in sync
                $("#indicatorChart").add("#volumeChart").igDataChart("option", "windowRect", {
                    left: ui.newLeft,
                    top: ui.newTop,
                    width: ui.newWidth,
                    height: ui.newHeight
                });
            }
        });

As a note, this event is fired a lot so if you intend to use it I suggest you also use the “windowResponse” set to "deferred" on the controlling chart. Careful with cross-linking charts this way – setting new values will also fire the respective charts’ events, just so you know.. and yes the chart is smart enough to ignore values if nothing is really different, but still be mindful.

Update: Easier and better synchronization

Following up a tip from one of our Chart experts, Graham Murray, it turns out I completely overlooked the fact Ignite UI Data Chart also has built-in synchronization! In this case the above code can be completely replaced by these lines:

$("#priceChart").igDataChart({
    syncChannel: "channel1",
    synchronizeVertically: false,
    syncrhonizeHorizontally: true
});

You set the other charts to the same sync channel and settings and you are good to go! This takes care of all the possible issues with the method above and also provides a cool bonus – the zoom preview shown on the main chart (when response is deferred) is also displayed on the other sync’d charts! The JSFiddle demo has been updated, check the link below!

Notes and tips

I actually have a decent set of other “good to know” stuff along the way, so here’s some:

• Update: The “resolution” series property has an interesting effect on the Financial Price Series – it determines how many records can be coalesced into a single Candlestick/OHLC bar when there isn’t enough room. Of course, details are revealed when you zoon in. This can be very awesome for huge data sets or really tiny spaces (hello mobile dashboard!). There’s an alternative demo right here.
• Don’t shy away from using the power of the underlying igDataSource to mold the incoming data to your needs and reduce potentially hulking requests to get filtered sub-sets. As you will be able to see in the demo I’m pre-sorting the data as it comes with the latest first in the array, which would totally make for a backwards plotting if not sorted. The igDataSource got the tools for the job.
• The “outline” brush property will affect both the outline for candle stick and the shadows (they are drawn in the same stroke with the outline, just so know). However, the outline has nothing to do with the OHLC bars – they, like other line-based series, have no outline.
• The OHLC bars are, however, affected by the “brush” – in both series the main brush color will be used to indicate bullish candles(the fill)/bars. If you want both empty candlesticks and the ability to switch between modes on the same series, make sure you change the brush color when going to OHLC as the bullish bars there might be left almost invisible!
• In both series, the the “negativeBrush” property color will be used to indicate bearish candles(the fill)/bars.
• All the brush properties can be altered at runtime just like changing modes, you can also style the chart using themes!
• The Financial Indicator/Overlay series are actually 36 in number - an impressive number to chew through. Keep in mind each has a set of required data-binding properties(out of the the already familiar High, Low, Close and Volume) and the some. I’ll go in much greater detail below.
• Note that with the Data Chart you have freedom to position your indicator series – either as separate charts, or with the main Financial Series using multiple axes.

Financial Indicators

“These indicators are used to help assess whether an asset is trending, and if it is, the probability of its direction and of continuation. Technicians also look for relationships between price/volume indices and market indicators”. Often found above, below and on top of the financial charts. They can be used the same way as any other series found in the igDataChart control and require specific data mapping to stock price values and stock volume. That last part is where it gets extra interesting…

The Ignite UI Data Chart does inherit most of it’s features from the XAML Data Chart, so many things true for the latter and also true for the jQuery one. This means you can also check out the XAML documentation or possibly re-use previous experience with the control. I have, however, went the extra mile on this one to provide you with a complete reference (Ignite UI jQuery API style) of all the Financial Indicator and Overlay series types, descriptions and their relevant data-binding and setting properties! I give you the:

Ignite UI Data Chart Financial Indicators and Overlays (WARNING! Massive, huge table Inside!)

After all, it 36 series and I slightly failed on finding better arrangement, but hey – you are welcome!

Also note all the specific properties like periods and such have defaults in case you are wondering what happens if you skip them. For the demo I picked just a few series with a period (usually defaults to 14, with some exceptions I’ve marked in brackets) so I can safely share settings and let you play with them.

Oh and the full view?

It’s not quite like the Dashboard I was after, but this is as far as I had the time to get it to and there’s still plenty of polishing to do. At the very least this is all real data (one year span) and functional enough to play with and give you a good idea what you can do with the Data Chart.

Resources

So besides all the links sprinkled all over, here’s a quick and useful list of info and demos:

• Documentation for the igDataChart

• Financial Series sample. You can also check out this sample with all Financial Indicators available!

• The Demo Finance Dashboard is on JSFiddle (link is to the result, as this is meant to be viewed in full screen). Top right for a link to the edit page. And in case you want to save this one there’s a pieced-together html file right here. Yeah, no ASP.NET demo, at least not yet.

• Update: Alternative demo with charts coalescing up to two weeks of data in one bar to fit in smaller spaces and expanding to normal when zoomed.

• And finally.. Go get yours:

I’d love to hear some thoughts, so leave a comment down below or @DamyanPetev.

And as always, you can follow us on Twitter @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!