ASP.NET Core MVC Controls | ComponentOne
Working with Controls / Financial Charts / Work with Financial Charts / Financial Charts Indicators / Williams %R Indicator
In This Topic
    Williams %R Indicator
    In This Topic

    Williams %R indicator for the FinancialChart is a momentum indicator, which compares the current asset price to the highest price over the look back period. Its look-back is typically 14 periods. The indicator fluctuates between 0 and -100. It is the inverse of a fast Stochastic Oscillator. While the Williams %R displays the level of a stock's close relative to the highest high for the look-back period, the Stochastic Oscillator shows the level of a stock's close relative to the lowest low. Both the indicators show same lines, however scaling is different.

    It finds application in determining Overbought/Oversold levels, providing buy and sell signals, and momentum confirmations.

    The image below shows how FinancialChart appears when the Williams %R indicator is added to the chart, and Period is set to 14.

    The following code example demonstrates how to add Williams %R indicator to the FinancialChart. This example uses data from BoxData.cs model, and box.json file.

    In Code

    Add a BoxData.cs class to the Models folder.

    Model

    BoxData.cs
    Copy Code 
    public static class BoxData
{
    private static List<FinanceData> _jsonData;
    public static List<FinanceData> GetDataFromJson()
    {
        if (_jsonData != null)
        {
            return _jsonData;
        }

        string path = HttpContext.Current.Server.MapPath("~/Content/box.json");
        string jsonText = new StreamReader(path, System.Text.Encoding.Default).ReadToEnd();
        JArray ja = (JArray)JsonConvert.DeserializeObject(jsonText);
        List<FinanceData> list = new List<FinanceData>();
        foreach (var obj in ja)
        {
            DateTime date = Convert.ToDateTime(obj["date"]);
            double high = Convert.ToDouble(obj["high"].ToString());
            double low = Convert.ToDouble(obj["low"].ToString());
            double open = Convert.ToDouble(obj["open"].ToString());
            double close = Convert.ToDouble(obj["close"].ToString());
            double volume = Convert.ToDouble(obj["volume"].ToString());
            list.Add(new FinanceData { X = date, High = high, Low = low, Open = open, Close = close, Volume = volume });
        }
        _jsonData = list;
        return list;
    }

    private static List<string> _annotationToolTips;
    public static List<string> GetAnnotationTooltips()
    {
        if (_annotationToolTips != null)
        {
            return _annotationToolTips;
        }
        _annotationToolTips = new List<string>{
     "<b>Why the hot IPO market is cooling off?</b>",
     "<b>Tech IPO market healthy?</b>",
     "<b>Center for Sustainable Energy Leverages Box to Power California Clean Vehicle Rebate Project</b>"
     +"<br>Box today announced that the Center for Sustainable Energy, a nonprofit organization committed to accelerating the transition to a sustainable world powered by clean energy, is leveraging the Box platform to power a cloud-based document submission and review process as part of the Clean Vehicle Rebate Project.",
     "<b>Box to Present at the J.P. Morgan Technology, Media and Telecom Conference</b>"+
     "<br>Box today announced that Aaron Levie, co-founder and CEO, will participate in the J.P. Morgan Technology, Media and Telecom Conference in Boston on Monday, May 18, 2015.",
     "<b>BD Receives FDA Clearance for a Novel Infusion Set with BD FlowSmart™ Technology to Enhance the Use of Insulin Pumps</b>"+
     "<br>Unique Side-Ported Catheter Designed to Offer Consistent Insulin Delivery and Fewer Flow Interruptions including Silent Occlusions Infusion Set Developed in Collaboration with JDRF and Helmsley Charitable ...",
     "<b>Wall Street tech debutant Box dismisses doubters</b>",
     "<b>BD Board Declares Dividend</b>"+
     "<br>The Board of Directors of BD (Becton, Dickinson and Company) (NYSE: BDX) has declared a quarterly dividend of 60.0 cents per common share payable on June ...",
     "<b>Box Sets Date to Announce First Quarter Fiscal 2016 Financial Results</b>"+
     "<br>Box today announced that it will report financial results for its first quarter which ended April 30, 2015, following the close of the market on Wednesday, June 10, 2015.",
     "<b>Making Money With Charles Payne: 05/21/15</b>",
     "<b>Best Buy to move sideways: Analyst</b>",
     "<b>Macquarie Upgrades Hercules Technology, Likes Dividend</b>"+
     "<br>In a report published Tuesday, Macquarie analysts upgraded their rating on Hercules Technology Growth Capital, Inc. (NYSE: HTGX), with a price target of $14. The analysts believe that the company's dividend ...",
     "<b>The U.S. Department of Justice Selects Box to Enable Enterprise File Sharing</b>"+
     "<br>Box today announced that it is working with the U.S. Department of Justice to deliver file sharing and information management to the agency’s workforce. After rigorous assessment, Box will receive an agency Authorization to Operate this week, allowing the DOJ to leverage the platform across all its component agencies.",
     "<b>Box Enables Improved Collaboration and Content Sharing at the ASPCA</b>"+
     "<br>Box today announced that the ASPCA® , the first humane society established in North America, is bringing Box’s cloud content sharing and collaboration platform to its employees."
     };

        return _annotationToolTips;
    }
}

     Also add a box.json file to your project, and paste the below content in it.

    box.json

    box.json
    Copy Code 
    [
    { "date": "01/23/15", "open": 20.2, "high": 24.73, "low": 20.16, "close": 23.23, "volume": 42593223 },
    { "date": "01/26/15", "open": 23.67, "high": 24.39, "low": 22.5, "close": 22.6, "volume": 8677164 },
    { "date": "01/27/15", "open": 22, "high": 22.47, "low": 21.17, "close": 21.3, "volume": 3272512 },
    { "date": "01/28/15", "open": 21.62, "high": 21.84, "low": 19.6, "close": 19.78, "volume": 5047364 },
    { "date": "01/29/15", "open": 19.9, "high": 19.95, "low": 18.51, "close": 18.8, "volume": 3419482 },
    { "date": "01/30/15", "open": 18.47, "high": 19.48, "low": 18.22, "close": 18.81, "volume": 2266439 },
    { "date": "02/02/15", "open": 19.18, "high": 19.3, "low": 18.01, "close": 18.02, "volume": 2071168 },
    { "date": "02/03/15", "open": 18.22, "high": 18.64, "low": 18.12, "close": 18.24, "volume": 1587435 },
    { "date": "02/04/15", "open": 18.2, "high": 18.35, "low": 17, "close": 17.1, "volume": 2912224 },
    { "date": "02/05/15", "open": 17.3, "high": 17.31, "low": 16.41, "close": 16.66, "volume": 2682187 },
    { "date": "02/06/15", "open": 17.39, "high": 18.88, "low": 17.21, "close": 18.12, "volume": 3929164 },
    { "date": "02/09/15", "open": 18.86, "high": 19.95, "low": 18.45, "close": 19.6, "volume": 3226650 },
    { "date": "02/10/15", "open": 20.5, "high": 21, "low": 19.63, "close": 20.99, "volume": 2804409 },
    { "date": "02/11/15", "open": 20.89, "high": 21, "low": 20.2, "close": 20.96, "volume": 1698365 },
    { "date": "02/12/15", "open": 20.66, "high": 20.85, "low": 19.75, "close": 20.17, "volume": 1370320 },
    { "date": "02/13/15", "open": 20.19, "high": 20.68, "low": 20, "close": 20.18, "volume": 711951 },
    { "date": "02/17/15", "open": 19.5, "high": 20.1, "low": 18.8, "close": 19.05, "volume": 2093602 },
    { "date": "02/18/15", "open": 18.31, "high": 18.5, "low": 17.96, "close": 18, "volume": 1849490 },
    { "date": "02/19/15", "open": 18.33, "high": 19.25, "low": 17.91, "close": 18.96, "volume": 1311518 },
    { "date": "02/20/15", "open": 18.68, "high": 19.3, "low": 18.65, "close": 18.85, "volume": 1001692 },
    { "date": "02/23/15", "open": 18.8, "high": 18.89, "low": 18.11, "close": 18.21, "volume": 670087 },
    { "date": "02/24/15", "open": 18.46, "high": 19, "low": 18.27, "close": 18.83, "volume": 759263 },
    { "date": "02/25/15", "open": 18.83, "high": 19.48, "low": 18.47, "close": 18.67, "volume": 915580 },
    { "date": "02/26/15", "open": 18.64, "high": 19.2, "low": 18.64, "close": 18.94, "volume": 461283 },
    { "date": "02/27/15", "open": 18.8, "high": 19.12, "low": 18.55, "close": 18.66, "volume": 617199 },
    { "date": "03/02/15", "open": 18.66, "high": 19.09, "low": 18.65, "close": 18.79, "volume": 519605 },
    { "date": "03/03/15", "open": 18.79, "high": 19.21, "low": 18.45, "close": 18.59, "volume": 832415 },
    { "date": "03/04/15", "open": 18.64, "high": 19.05, "low": 18.32, "close": 19, "volume": 539688 },
    { "date": "03/05/15", "open": 19.2, "high": 19.2, "low": 18.8, "close": 19.14, "volume": 486149 },
    { "date": "03/06/15", "open": 19.03, "high": 19.1, "low": 18.7, "close": 18.91, "volume": 685659 },
    { "date": "03/09/15", "open": 18.98, "high": 20.15, "low": 18.96, "close": 19.4, "volume": 1321363 },
    { "date": "03/10/15", "open": 19.3, "high": 19.8, "low": 18.85, "close": 19.64, "volume": 615743 },
    { "date": "03/11/15", "open": 20.08, "high": 20.65, "low": 19.24, "close": 20.53, "volume": 2167167 },
    { "date": "03/12/15", "open": 17.17, "high": 18.2, "low": 16.76, "close": 18.2, "volume": 6837638 },
    { "date": "03/13/15", "open": 18.05, "high": 18.05, "low": 17.3, "close": 17.88, "volume": 1715629 },
    { "date": "03/16/15", "open": 17.91, "high": 18, "low": 17.01, "close": 17.13, "volume": 1321313 },
    { "date": "03/17/15", "open": 17.28, "high": 17.37, "low": 16.6, "close": 17.12, "volume": 1272242 },
    { "date": "03/18/15", "open": 17.1, "high": 17.27, "low": 16.91, "close": 17.01, "volume": 530063 },
    { "date": "03/19/15", "open": 17, "high": 17.28, "low": 17, "close": 17.06, "volume": 536427 },
    { "date": "03/20/15", "open": 17.13, "high": 17.24, "low": 16.88, "close": 17.21, "volume": 1320237 },
    { "date": "03/23/15", "open": 17.21, "high": 17.23, "low": 17.01, "close": 17.11, "volume": 509798 },
    { "date": "03/24/15", "open": 17.02, "high": 17.18, "low": 16.82, "close": 17, "volume": 962149 },
    { "date": "03/25/15", "open": 16.92, "high": 16.99, "low": 16.82, "close": 16.97, "volume": 565673 },
    { "date": "03/26/15", "open": 16.83, "high": 17.56, "low": 16.83, "close": 17.54, "volume": 884523 },
    { "date": "03/27/15", "open": 17.58, "high": 18.3, "low": 17.11, "close": 18.3, "volume": 705626 },
    { "date": "03/30/15", "open": 18.5, "high": 19.4, "low": 18.4, "close": 19.05, "volume": 1151620 },
    { "date": "03/31/15", "open": 19.08, "high": 20.58, "low": 18.4, "close": 19.75, "volume": 2020679 },
    { "date": "04/01/15", "open": 19.69, "high": 19.69, "low": 18.55, "close": 18.65, "volume": 961078 },
    { "date": "04/02/15", "open": 18.56, "high": 18.66, "low": 17.85, "close": 17.9, "volume": 884233 },
    { "date": "04/06/15", "open": 17.78, "high": 17.94, "low": 17.51, "close": 17.66, "volume": 605252 },
    { "date": "04/07/15", "open": 17.62, "high": 17.9, "low": 17.53, "close": 17.61, "volume": 591988 },
    { "date": "04/08/15", "open": 17.64, "high": 17.85, "low": 17.32, "close": 17.36, "volume": 618855 },
    { "date": "04/09/15", "open": 17.33, "high": 17.54, "low": 17.1, "close": 17.1, "volume": 761855 },
    { "date": "04/10/15", "open": 17.08, "high": 17.36, "low": 17, "close": 17.05, "volume": 568373 },
    { "date": "04/13/15", "open": 17.24, "high": 17.26, "low": 16.81, "close": 17.1, "volume": 667142 },
    { "date": "04/14/15", "open": 17.1, "high": 17.89, "low": 17.02, "close": 17.52, "volume": 870138 },
    { "date": "04/15/15", "open": 17.6, "high": 17.99, "low": 17.5, "close": 17.69, "volume": 530456 },
    { "date": "04/16/15", "open": 17.95, "high": 18, "low": 17.6, "close": 17.82, "volume": 548730 },
    { "date": "04/17/15", "open": 17.75, "high": 17.79, "low": 17.5, "close": 17.79, "volume": 446373 },
    { "date": "04/20/15", "open": 17.63, "high": 17.98, "low": 17.52, "close": 17.93, "volume": 487017 },
    { "date": "04/21/15", "open": 17.96, "high": 17.98, "low": 17.71, "close": 17.92, "volume": 320302 },
    { "date": "04/22/15", "open": 17.88, "high": 18.33, "low": 17.57, "close": 18.29, "volume": 644812 },
    { "date": "04/23/15", "open": 18.29, "high": 18.61, "low": 18.18, "close": 18.28, "volume": 563879 },
    { "date": "04/24/15", "open": 18.5, "high": 18.5, "low": 17.61, "close": 17.75, "volume": 650762 },
    { "date": "04/27/15", "open": 17.97, "high": 18.05, "low": 17.45, "close": 17.57, "volume": 437294 },
    { "date": "04/28/15", "open": 17.65, "high": 17.79, "low": 17.39, "close": 17.5, "volume": 224519 },
    { "date": "04/29/15", "open": 17.68, "high": 17.68, "low": 17.1, "close": 17.21, "volume": 495706 },
    { "date": "04/30/15", "open": 17.22, "high": 17.3, "low": 17, "close": 17.11, "volume": 391040 },
    { "date": "05/01/15", "open": 17.11, "high": 17.55, "low": 16.85, "close": 17.5, "volume": 563075 },
    { "date": "05/04/15", "open": 17.56, "high": 17.85, "low": 17.3, "close": 17.4, "volume": 253138 },
    { "date": "05/05/15", "open": 17.68, "high": 17.68, "low": 17.09, "close": 17.43, "volume": 290935 },
    { "date": "05/06/15", "open": 17.48, "high": 17.48, "low": 17, "close": 17.04, "volume": 313662 },
    { "date": "05/07/15", "open": 17.05, "high": 17.19, "low": 16.92, "close": 17.04, "volume": 360284 },
    { "date": "05/08/15", "open": 17.13, "high": 17.21, "low": 16.91, "close": 17.1, "volume": 297653 },
    { "date": "05/11/15", "open": 17.16, "high": 17.44, "low": 17.13, "close": 17.31, "volume": 268504 },
    { "date": "05/12/15", "open": 17.28, "high": 17.44, "low": 16.99, "close": 17.24, "volume": 376961 },
    { "date": "05/13/15", "open": 17.24, "high": 17.3, "low": 17.06, "close": 17.2, "volume": 244617 },
    { "date": "05/14/15", "open": 17.24, "high": 17.25, "low": 17.02, "close": 17.08, "volume": 252526 },
    { "date": "05/15/15", "open": 17.06, "high": 17.16, "low": 16.95, "close": 16.95, "volume": 274783 },
    { "date": "05/18/15", "open": 16.95, "high": 17.01, "low": 16.76, "close": 16.87, "volume": 418513 },
    { "date": "05/19/15", "open": 16.93, "high": 16.94, "low": 16.6, "close": 16.83, "volume": 367660 },
    { "date": "05/20/15", "open": 16.8, "high": 16.9, "low": 16.65, "close": 16.86, "volume": 297914 },
    { "date": "05/21/15", "open": 16.9, "high": 17.08, "low": 16.79, "close": 16.88, "volume": 229346 },
    { "date": "05/22/15", "open": 16.9, "high": 17.05, "low": 16.85, "close": 17, "volume": 253279 },
    { "date": "05/26/15", "open": 17.03, "high": 17.08, "low": 16.86, "close": 17.01, "volume": 212640 },
    { "date": "05/27/15", "open": 17.01, "high": 17.99, "low": 16.87, "close": 17.75, "volume": 857109 },
    { "date": "05/28/15", "open": 17.77, "high": 17.77, "low": 17.44, "close": 17.62, "volume": 338482 }
]

    WilliamsRController.cs
    C#
    Copy Code 
    // GET: /WilliamsR/

public ActionResult WilliamsRIndex()
{
    var model = BoxData.GetDataFromJson();
    return View(model);
}
    HTML
    Copy Code 
    @using MVCFinancialChart.Models

@model List<FinanceData>

<script>
    // function used for displaying XYV data in tooltips
    function tooltip(ht) {
        var date, content;

        if (!ht || !ht.item) {
            return '';
        }

        date = ht.item.X ? ht.item.X : null;

        if (wijmo.isDate(date)) {
            date = wijmo.Globalize.formatDate(date, 'MM/dd/yy');
        }

        content =
                '<b>' + ht.name + '</b><br/>' +
                'Date: ' + date + '<br/>' +
                'Y: ' + wijmo.Globalize.format(ht.y, 'n2');
        if (ht.item.Volume) {
            content +=
            '<br/>' +
            'Volume: ' + wijmo.Globalize.format(ht.item.Volume, 'n0');
        }

        return content;
    }
</script>

               <c1-financial-chart binding-x="X" rendered="chartRendered">
                   <c1-items-source source-collection="Model"></c1-items-source>
                   <c1-financial-chart-series binding="Close"></c1-financial-chart-series>
                   <c1-flex-chart-tooltip content="tooltip"></c1-flex-chart-tooltip>
               </c1-financial-chart>

               <c1-financial-chart height="200px" binding-x="X">
                   <c1-items-source source-collection="Model"></c1-items-source>
                   <c1-flex-chart-williams-r binding="High,Low,Open,Close" period="14"></c1-flex-chart-williams-r>
                   <c1-flex-chart-tooltip content="tooltip"></c1-flex-chart-tooltip>
               </c1-financial-chart>