ASP.NET MVC Controls | ComponentOne
Working with Controls / Financial Charts / Work with Financial Charts / Indicators / Average True Range Indicator
In This Topic
    Average True Range Indicator
    In This Topic

    Average True Range (ATR) indicator for FinancialChart is a technical indicator for price volatility of an asset. It is typically based on 14 periods, and could be calculated intra daily, daily, weekly or monthly basis. It gives information about the degree of price volatility, and gives no indication of price trends. Stocks having high volatility will have a higher ATR, whereas low volatility stocks will have a lower ATR.

    The image below shows how FinancialChart appears when the Average True Range indicator is added to the chart, and Period is set to 14.

    Average True Range indicator added to the financial chart

    The following code example demonstrates how to add Average True Range Index 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 }
    ]
    

    ATRController.cs
    C#
    Copy Code
    // GET: /ATR/
    public ActionResult ATRIndex()
    {
        var model = BoxData.GetDataFromJson();
        return View(model);
    }
    
    Razor
    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>
    
    @(Html.C1().FinancialChart()
    .Bind(Model)
    .BindingX("X")
    .Series(sers =>
    {
        sers.Add().Binding("Close");
    })
    .Tooltip(t => t.Content("tooltip"))
    )
    
    @(Html.C1().FinancialChart().Height(200)
    .Bind(Model)
    .BindingX("X")
    .Series(sers =>
    {
        sers.AddATR().Binding("High,Low,Open,Close").Period(14).Name("ATR");
    })
    .Tooltip(t => t.Content("tooltip"))
    )