Design of graphs. Part two. Lines
Second part of a two-chapter story about designing computer graphs for financial systems
When the coordinate axes have been finished, it is time to design the body of the graph. In finance, the graph most often has the form of a line, but Japanese candlesticks are also popular.
Line charts
Charts represented by line are called graphs. This is the most popular mathematical model, that is familiar to everyone since school.
The most important thing is to choose the proper line weight. In this matter personal taste plays a big role. Author uses 1.3-pixel lines, because he is used to the airy lightness in interfaces. If Reader is used to the thick graphs generated by Excel, thin lines may seem hard to read.
It is worth explaining that fractional pixels do exist. Roughly speaking, when drawing a 1.3-pixel line, the graphic system draws a 1-pixel line and adds a 1-pixel stroke of 30 % opacity. This makes the line appear thinner.
The second parameter of lines is joins rounding. This is especially noticeable on thick lines, but there is a belief that human eye reads any neat details, and this affects perception.
Multiple lines
Two graphs are often compared with each other. For instance, it could be a stock and a market index. If the second graph is simply added on top with a different color, both graphs become hard to read.
For this reason, a gradient shadow should be added to the first graph. The topmost color of the gradient should have an opacity of about 15 %. The gradient should descend to the horizontal axis until zero opacity.
Lines should be given a white stroke of the same weight. This will help to avoid color noise at the junction of two lines of different colors.
In some cases, one has to compare three graphs. More graphs are almost never compared at the same time.
Scanner and spreads
From the static graph, only the last value can be quickly read, because it is highlighted and labeled on the vertical axis.
A scanner can be used to find out values at any point of the graph. Scanner is a vertical line that is drawn over the graph and follows the mouse cursor. A dot is placed at the intersection of the scanner with the graph, to the right of which displayed the value at this point. Below the scanner, on the time axis, labeled the date at that point.
Such scanner works well for multiple graphs as well. Values are displayed on a colored background, where each color corresponds to the color of the line.
When comparing two graphs, it is often needed to know the spread, i. e. the difference between the lines at a particular point. The spread can be displayed on the scanner, to the right of the price, with a plus or minus sign.
The spread is highlighted with a colored background, and the color corresponds to the line up to which the spread is calculated.
Indicators
It is not much convenient to work with spread in a numerical form. One has to move the cursor along the entire length of the graph to see the spread at each point.
Financial systems use indicators. These are mini-charts that are placed below the main chart. Indicators are not always line graphs; a bar chart is used most often.
Spread can be represented as an indicator. In this form, analyst will be able to see the spread chart for the entire range.
The most popular indicator in finance is trading volume. This indicator is so important that it is displayed by default within the area of the main chart.
Trading volume is displayed as a bar chart. Bars are green if price was going up at this date, and red if price was going down.
Traders use dozens of indicators. One of the most popular is the RSI, relative strength indicator.
For each point on the graph, the ratio of (the average price increase) to (the average price decrease) is calculated for over the last 15 days. The indicator draws a graph of the calculated values. A colored zone is allocated in the range from 30 to 70 conventional units.
It is believed that if the RSI line goes beyond the color zone up, then the price is too high and the asset needs to be sold. If the line goes beyond the colored zone down, then the asset is too cheap and worth buying.
Candlestick charts
The standard of any financial system is Japanese candlestick chart.
Japanese candlesticks is a special kind of bar chart, where bars are not attached to the bottom, but soar in the middle of the chart. Each candle consists of a body and a wick. The body is drawn in the form of a rectangle, the wick has the form of a line that pierces through the body and sticks out from above and below.
The body of the candle shows how the price has changed over the period. The wick shows how the price tried to change, but rolled back.
Let us say the stock price was $200 in the morning and $300 in the evening. Then the body of the candle should be drawn from 200 to 300 dollars, and there will be no wicks.
Let us assume that the price reached $400 in the afternoon, but in the evening it still dropped to $300. Then the candle will have the top wick.
Finally, imagine that the price dropped to $100 in the afternoon, but returned to $300 in the evening. Then the candle will have two wicks.
The first price of a period is called the opening price, and the last price is called the closing price. So far, the candle was green because the closing price of $300 is higher than the opening price of $100. If it were the opposite, the candle would be red.
The Japanese candlestick chart is considered the standard for displaying price changes. It is used by almost all analysts, since candles show price fluctuations within the day with some nuances in a concise manner.
To explain these nuances, the scanner should display four values: the opening and closing prices, the minimum and maximum prices.
As a conclusion, an example of technical analysis. Modern systems are able to detect trends, find patterns and waves automatically. It is worth introducing such tool for automatic technical analysis of the chart. The analyst will only need to turn on the results of the analysis, like an indicator.
