Moving Average

The MovingAverage class extends the regular Series class to provide a series of averages of different subsets of the full data set.

To add moving averages to a chart, follow these steps:

Create one or more MovingAverage series,
Configure the MovingAverage series as you would regular series, setting their binding, chartType, and style properties for example, and
Set the MovingAverage's type and period properties to determine the type of moving average you want to create.

MovingAverage Type:
Period:

// This file locates: "Scripts/Lesson/C1FlexChart/AnalyticsMovingAverages.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
    var period = wijmo.Control.getControl('#period');
    var type = wijmo.Control.getControl('#type');
 
    theChart.itemsSource = getData();
 
    // create a MovingAverage and add it to the Chart series collection
    var movingAvg = new wijmo.chart.analytics.MovingAverage();
    movingAvg.name = 'Moving Average';
    movingAvg.itemsSource = theChart.itemsSource;
    movingAvg.binding = 'sales';
    movingAvg.period = 6;
    movingAvg.style = { stroke: 'darkred', strokeWidth: 3 };
    theChart.series.push(movingAvg);
 
    // select moving average period
    period.valueChanged.addHandler(function (s, e) {
        movingAvg.period = s.value;
    });
 
    // select moving average type
    type.textChanged.addHandler(function (s, e) {
        movingAvg.type = s.text;
    });
 
    // generate some random data
    function getData() {
        var arr = [],
                today = new Date(),
            sales = 1000;
        for (var i = 100; i >= 0; i--) {
            arr.push({
                date: wijmo.DateTime.addDays(today, -i),
                sales: sales
            });
            sales += Math.round(Math.random() * 300 - 130);
        }
        return arr;
    }
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: AnalyticsMovingAverages
        public ActionResult AnalyticsMovingAverages()
        {
            return View();
        }
    }
}

@{ 
    var types = new[] { "Simple", "Weighted", "Exponential", "Triangular" };
}
 
<h1>
    @Html.Raw(Resources.C1FlexChart.AnalyticsMovingAverages_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexChart.AnalyticsMovingAverages_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.AnalyticsMovingAverages_Text2)
</p>
<ol>
    <li>
        @Html.Raw(Resources.C1FlexChart.AnalyticsMovingAverages_Text3)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.AnalyticsMovingAverages_Text4)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.AnalyticsMovingAverages_Text5)
    </li>
</ol>
 
<div class="demo-settings">
    <label for="type">@Html.Raw(Resources.C1FlexChart.AnalyticsMovingAverages_Text6) </label>
    @Html.C1().ComboBox().Id("type").Bind(types)
    <br />
    <label for="period">@Html.Raw(Resources.C1FlexChart.AnalyticsMovingAverages_Text7) </label>
    @Html.C1().InputNumber().Id("period").Value(6).Step(1).Min(2).Max(20)
</div>
 
@(Html.C1().FlexChart().Id("theChart")
    .BindingX("date")
    .ChartType(C1.Web.Mvc.Chart.ChartType.Line)
    .AxisY(y=>y.Min(0))
    .Series(sb=>sb.Add().Binding("sales").Name("Sales"))
)