Point and Figure charting in ASP.NET MVC

Point and Figure charting technique, a new addition to our ASP.NET MVC FinancialChart control, is a classical charting techniques that's gaining popularity in the new internet era. In this blog we'll look at how to implement this intuitive stock chart in ASP.NET MVC.

Consisting of columns of X's and O's that represent filtered price movements, the Point and Figure chart uses only the price action of the stock, not time. X-Columns represent rising prices, and O-Columns represent falling prices.

The chart gives a buy signal when a column of X moves upwards and crosses top price point of previous column of X:

Similarly, a sell signal is given when a column of O moves downwards and crosses the bottom price point of previous column of O’s. This objectivity of price makes this chart easy to understand and use:

Other Point and Figure elements that matter are size of the box and price change consideration for trend reversal:

Scaling for size of a Point and Figure box

The size of the box indicates the intervals of price movements; each box represents a specific value that price must reach for an X or an O to be drawn. The box size can be based on different scaling techniques: it could be be based on percentage, average true range, or the traditional scaling as used in such charts. ComponentOne's FinancialChart control supports three types: traditional, user-defined, and defined by average true range.

Here's a look at traditional scaling for Point and Figure charts:

Trend reversal in Point and Figure charts

Trend reversal—that is, for a stock to move from uptrend to downtrend or vice versa—is indicated by three box price changes in the opposite direction of the current trend. As shown in the "Point and Figure chart" above, in this case, the last trend was a downtrend (column of O’s) that has just reversed, with price moving upwards by three box values. Three-box reversal is traditional, and it's up to you if you want to change it.

To learn more about Point and Figure charting, you may refer Thomas Dorsey's Point and Figure Charting and Jeremy du Plessis' The Definitive Guide to Point and Figure.

Now that we understand the basics of a Point and Figure chart, let's dive into plotting one with ASP.NET MVC Core Point and Figure Financial Charts.

Building the model

For the model, we'll take the standard stock data of open, high, low, close. In this example, we're reading this from JSON:

private static List<FinanceData> _jsonData;

        private static List<FinanceData> _rsData;
        public static List<FinanceData> GetDataFromJson()
        {
            if (_jsonData != null)
            {
                return _jsonData;
            }

            string path = HttpContext.Current.Server.MapPath("~/Content/fb.json");
            string jsonText = new StreamReader(path, System.Text.Encoding.Default).ReadToEnd();

            JObject jo = (JObject)JsonConvert.DeserializeObject(jsonText);
            var jDataset = (JObject)jo.GetValue("dataset");
            var jColumns = (JArray)jDataset.GetValue("column_names");
            var columnNames = new List<string>();
            foreach (var column in jColumns)
            {
                columnNames.Add(column.ToString());
            }
            var dateIndex = columnNames.IndexOf("Date"); //0
            var openIndex = columnNames.IndexOf("Open"); //1
            var highIndex = columnNames.IndexOf("High"); //2
            var lowIndex = columnNames.IndexOf("Low"); //3
            var closeIndex = columnNames.IndexOf("Close"); //4
            var volumeIndex = columnNames.IndexOf("Volume"); //5

            var jData = (JArray)jDataset.GetValue("data");
            List<FinanceData> list = new List<FinanceData>();
            foreach (JArray jItem in jData)
            {
                string date = jItem[dateIndex].ToString();
                double open = Convert.ToDouble(jItem[openIndex].ToString());
                double high = Convert.ToDouble(jItem[highIndex].ToString());
                double low = Convert.ToDouble(jItem[lowIndex].ToString());
                double close = Convert.ToDouble(jItem[closeIndex].ToString());
                double volume = Convert.ToDouble(jItem[volumeIndex].ToString());
                list.Add(new FinanceData { X = date, High = high, Low = low, Open = open, Close = close, Volume = volume });
            }
            _jsonData = list;
            return list;
        }

}

Create the controller

Here, simply set the stock prices collection in a ViewBag to be accessible in the View:

public ActionResult PointAndFigure()
        {
            ViewBag.FbData = FbData.GetDataFromJson();

            return View();
        }

Create the view

Declare the c1-financial-chart and set respective fields:

IEnumerable<FinanceData> fbData = ViewBag.FbData;

<c1-items-source id="cv" source-collection="@fbData"></c1-items-source>

<c1-financial-chart id="pfx " chart-type="PointAndFigure" items-source-id="cv"
                    point-and-figure-fields="HighLow" point-and-figure-reversal="3" point-and-figure-scaling="Traditional">
    <c1-financial-chart-series binding="High,Low,Open,Close" name="FB" style="chartStyle" alt-style="chartAltStyle"></c1-financial-chart-series>
    <c1-flex-chart-tooltip content="{x:d}<br/>{y}"></c1-flex-chart-tooltip>
</c1-financial-chart>

Set the items-source of the chart to the defined items-source “cv,” whose source-collection is populated with data returned by the model.

We're taking High and Low values to plot the chart, so point-and-figure-fields are set to HighLow; alternatively, Close can also be considered. Having used the traditional box-size, we can set the point-and-figure-box-size for fixed or a user-based case, or use ATR by setting point-and-figure-period.

Next, add a financial-chart-series whose binding is set High,Low,Open,Close. Then set the chart style and tooltip.

We've configured the chart! When we run the application, the Point and Figure Chart uses Facebook's data to show objective price movements from the point of an investor.

Demo: Explore FinancialChart for ASP.NET MVC

Try ComponentOne Studio today