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.
- C1FlexChart/AnalyticsMovingAverages.js
- AnalyticsMovingAveragesController.cs
- AnalyticsMovingAverages.cshtml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | // 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; } }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1FlexChartController : Controller { // GET: AnalyticsMovingAverages public ActionResult AnalyticsMovingAverages() { return View(); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | @ { 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" )) ) |