MVC FinancialChart: Create a Moving Average

You can now clearly express patterns and trends in FinancialChart for MVC with a moving average trend line. Set the Period property to tell FinancialChart how many data points to average at one time. If you set the Period property to 5, then the chart takes the first five data points, averages them, and creates a point for the trendline. The next trendline data point is created from the average of the next five chart data points, and so on. Averaging data points smooths out the major jumps and dips in many data sets, giving a clearer idea of the true data trends.

The trendline in the above image is an Exponential Moving Average trendline. Its weighting decreases exponentially for each previous value.

You can create a moving average trendline using either MVC Helpers or Tag Helpers:

MVC Helpers

.Series(sers =>  
    {  
        sers.Add().Binding("Close");  
        sers.AddMovingAverage().Binding("Close").Period(5).Type(C1.Web.Mvc.Chart.MovingAverageType.Exponential);  
    })  

Tag Helpers

The following code samples shows the snippets in context:

MVC Helpers

@using MVCFinancialChart.Models  

@model List  


    var tooltipContent = function (ht) {  
        var item = ht.series.collectionView.items[ht.pointIndex];  
        if (item) {  
            return 'Date: ' + wijmo.Globalize.format(ht.x, 'MMM-dd') + '  
' +  
             'High: ' + item.High.toFixed() + '  
' +  
             'Low: ' + item.Low.toFixed() + '  
' +  
             'Open: ' + item.Open.toFixed() + '  
' +  
             'Close: ' + item.Close.toFixed() + '  
'  
        }  
    };  


@(Html.C1().FinancialChart()  
.Bind(Model)  
.BindingX("X")  
.ChartType(C1.Web.Mvc.Finance.ChartType.Line)  
.Series(sers =>  
    {  
        sers.Add().Binding("Close");  
        sers.AddMovingAverage().Binding("Close").Period(5).Type(C1.Web.Mvc.Chart.MovingAverageType.Exponential);  
    })  
.Tooltip(t => t.Content("tooltipContent")))  

Tag Helpers

@using C1.Web.Mvc.Chart;  
@model List  


    var tooltipContent = function (ht) {  
        var item = ht.series.collectionView.items[ht.pointIndex];  
        if (item) {  
            return 'Date: ' + wijmo.Globalize.format(ht.x, 'MMM-dd') + '  
' +  
             'High: ' + item.High.toFixed() + '  
' +  
             'Low: ' + item.Low.toFixed() + '  
' +  
             'Open: ' + item.Open.toFixed() + '  
' +  
             'Close: ' + item.Close.toFixed() + '  
'  
        }  
    };  

Check out the FinancialChart documentation >>

Check out the Read more FinancialChart blog posts >>