ChartWatchers

Hello Fellow ChartWatchers!

Chip Anderson

Chip Anderson

President, StockCharts.com

The markets moved lower last week with some disturbingly large downward movements. As you can see in the chart below, last week's losses put the Nasdaq Composite into negative territory for the year - the first of the major averages to get there.

(Did you notice the cool Performance chart that SharpCharts2 can now create? StockCharts member's can click the chart to see exactly how it was constructed.)

At this point, the small caps are still leading the other averages as they have all year, but recent strength in the Dow Industrials could change that soon.

BETTER, STRONGER, FASTER SHARPCHARTS2 CHARTS

We're continuing to listen to everyone's feedback on SharpCharts2. Thanks again to everyone that has sent in a suggestion for improvement. Rest assured that we are always working on ways to make our site even better. The other day we got a complaint from a user about his charts being hard to read and slow to download. The solution to this particular complaint may surprise you.

"Reader X" (not his real name ;-)) sent in a message saying that some of his saved charts were taking a long time to download and looked pretty bad once they arrived. Here's one of the charts he was referring to:

Wow. What a mess. But it turns out there's a good, valid reason for the way this chart looks. Without realizing it, the user was asking to fit 2 years worth of 60 minute candlesticks into a chart that was only 620 pixels wide. Let's think about the math involved in that request:

  1. There are seven 60-minute candlesticks in a normal trading day.
  2. There are ~250 trading days per year.
  3. In order to create a complete candlestick, we need a space at least 3 pixels wide (one for the left edge, one for the middle area, and one for the right edge).

So the minimum width (in pixels) that we need to create this chart is:

7 times 250 = 1750 (candlesticks per year)
1750 times 2 = 3500 (candlesticks for 2 years)
3500 times 3 = 10,500 (pixels per chart)

So, we'd need an area at least 10,500(!) pixels wide to display all of that information in a clean accurate way. (I don't know about you, but my computer screen is only 1280 pixels wide - not quite big enough!) However remember that "Reader X" told us to fit all of those candlesticks into a space only 620 pixels wide. In other words, we have to fit 3500 candles into a space that can only hold at most (620/3=) 216. Yikes!

So, how do we do that? In this case, we use a combination of two approaches: shrinking the candles and selectively omitting some candles from the chart. First off, we shrink the candles down to 1 pixel wide lines. That causes them to lose their "filled/unfilled" information, but we really don't have a choice. Even then, with 1 pixel wide candlesticks, we still need to fit 3500 candles into a 620 pixel wide chart. At that point, we get more drastic - we only plot every 6th candle (roughly). 2800 data points are thrown out in order to fit things into the 620 pixel space the user specified. With all that missing and scrunched data, it's no wonder things look so messy.

So that explains the poor visual quality of the chart, but what about the slowness?

The more data points that go into creating a chart, the longer it will take for our servers to generate that chart. So how many data points does this chart need? 3500, right? Wrong! This chart actually needs 4300 data points from our database. Can you spot the reason why?

The culprit is that 200-period EMA. In order to plot the EMA correctly on the left side of the chart, we need to pull additional data from our database that doesn't even appear on the chart. The amount of additional data depends on the type of indicators on the chart and their durations.

Now, if this chart contained just a 200-period Simple Moving Average, we'd only need to pull 200 additional data points. Unfortunately, Exponential Moving Averages are calculated in a very different way (which I've written about in previous newsletters). EMAs require much more data than SMAs do - it turns out that to accurately calculate a 200-period EMA, you need at least 800-periods of data. Thus we pull over 4300 data points from our database when creating this chart.

In addition, the "crunched" look of the candlesticks reduce the efficiency of the compression routine that we use to shrink down the chart - thus making the chart's file size larger and, as you probably know, the larger the file size, the longer the download.

SOLUTIONS

There are several things that "Reader X" could do to this chart to improve it.

  1. He could change the range from "2 Years" to "Fill the Chart". "Fill the Chart" will ensure that all of his candlesticks aren't scrunched. It is perfect for people that are mostly interested in the most recent information on the right side of the chart.
  2. He could change the duration of the chart from "2 Years" to something shorter. Anything more than about 30 trading days will result in some "scrunched" candles, but anything less than 2 years will be an improvement.
  3. He could increase the width of his chart. The more space we have, the less "scrunching" we have to do. Keep in mind however that wider charts mean larger file sizes and thus slower download times.
  4. He could change the period from 60-minute bars to daily bars. Then we'd only need to plot 500 candles in the 620 pixels available. There'd still be some scrunching, but not nearly as much. The only "gotcha" with this approach is that he'd also have to reduce the period of his EMA by a factor of seven (since there are seven 60-minute bars in one day). Thus, he'd need to change it from a 200-period EMA to a 28-period EMA.
  5. He could change from a "Candlestick" chart to a "Line (thin)" chart. A line chart only needs one pixel per data point and thus can fit more data into the same amount of space without scrunching. In this case there would still be lots of omitted data points, however this suggestion can be combined with some of the above suggestions to improve the final result.
  6. Finally, if "Reader X" is using a slow internet connection, he may want to disable the "Line Smoothing" option on the chart to further decrease it's size.

When contacted about this chart and its settings, "Reader X" replied "Wow, I didn't even think about that. I never really paid much attention to the settings and things look much better now that I've adjusted things based on your suggestions."

Here's a example of a chart that incorporates many of the above suggestions:

Reader X's original chart was 99K in size. This new chart is only 19K in size. That's more than 80% smaller than the original and actually MORE readable. In addition, the new chart only needed 1300 data points from our database, over 70% fewer data points than before. Now that's what I call a "win-win" situation!

So remember, use discretion when creating your charts. Think about the amount of data involved and the screen real estate required. Hopefully, "Reader X's" lessons will help you improve your charting experience also.

- Chip Anderson

 

 

Chip Anderson
About the author: is the founder and president of StockCharts.com. He founded the company after working as a Windows developer and corporate consultant at Microsoft from 1987 to 1997. Since 1999, Chip has guided the growth and development of StockCharts.com into a trusted financial enterprise and highly-valued resource in the industry. In this blog, Chip shares his tips and tricks on how to maximize the tools and resources available at StockCharts.com, and provides updates about new features or additions to the site. Learn More