ASP.NET Core MVC Controls | ComponentOne
Working with Controls / Financial Charts / Work with Financial Charts / Financial Charts Indicators / Moving Average Convergence Divergence
In This Topic
    Moving Average Convergence Divergence
    In This Topic

    Moving Average Convergence Divergence (MACD) indicator for the FinancialChart is a trend-following momentum indicator. It reveals changes in the strength, direction, duration and momentum of price of an asset. MACD is efficient in helping the users spot short-term price momentum.

    MACD momentum oscillator displays a relationship between 26 day exponential moving average and 12 day exponential moving average. As the two moving averages converge, cross and diverge, they make the MACD oscillator to fluctuate above and below the zero line. A "signal line" is plotted on the top of the oscillator. It is a 9 day exponential moving average of MACD, which serves as a trigger for buy and sell signals.

    MACD Histogram

    MACD Histogram is an oscillator which measures the difference between the fast MACD line and the signal line. Just like MACD indicator, histogram also fluctuates above and below zero line. A positive histogram indicates that MACD is above its signal line, while MACD going below its signal line makes a negative histogram.  

    The image below shows how FinancialChart appears when Moving Average Convergence Divergence indicator and Moving Average Convergence Divergence histogram oscillator are used, with Fast Period set to 12, Slow Period set to 26 and Signal Smoothing Period set to 9.

    The following code example demonstrates how to add Moving Average Convergence Divergence indicator and Moving Average Convergence Divergence Histogram Oscillator 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 }
]

    MACDController.cs
    C#
    Copy Code 
    // GET: /MACD/
public ActionResult MACDIndex()
{
    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;
    }

    function chartRendered(sender, args) {
        // set min/max for indicator chart to match main chart
        var indicatorChart = wijmo.Control.getControl('#indicator'),
            chart = wijmo.Control.getControl('#financeChart');

        if (chart && indicatorChart) {
            indicatorChart.axisX.min = chart.axisX.actualMin;
            indicatorChart.axisX.max = chart.axisX.actualMax;
        }
    };
</script>

               <c1-financial-chart binding-x="X" rendered="chartRendered" id="financeChart">
                   <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" id="indicator" rendered="chartRendered">
                   <c1-items-source source-collection="Model"></c1-items-source>
                   <c1-flex-chart-macd binding="Close" fast-period="12" slow-period="26" smoothing-period="9">
                       <c1-flex-chart-line-style c1-property="macdLine" stroke="#bfa554"></c1-flex-chart-line-style>
                       <c1-flex-chart-line-style c1-property="signalLine" stroke="#bf8c54"></c1-flex-chart-line-style>
                   </c1-flex-chart-macd>
                   <c1-flex-chart-macd-histogram binding="Close" fast-period="12" slow-period="26" smoothing-period="9"></c1-flex-chart-macd-histogram>
                   <c1-flex-chart-tooltip content="tooltip"></c1-flex-chart-tooltip>
               </c1-financial-chart>