ComponentOne
Web API Explorer ASP.NET Web API Explorer
MVCFlexChart

MVCFlexChart

MovingAverage

This sample demonstrates how to export a MVC FlexChart MovingAverage series to image file.

Features

Overview
Header and Footer
Labels
Bubble
Financial Chart
TrendLine
MovingAverage
YFunctionSeries
ParametricFunctionSeries
Box & Whisker
ErrorBar
Waterfall
Base DataSMA24681012141618202224262830020406080

Settings

Export
Export Format : Height :
Width :
Export Name :

Description

This sample demonstrates how to export a MVC FlexChart MovingAverage series to image file.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
using System.Web.Mvc;
using WebApiExplorer.Models;
 
namespace WebApiExplorer.Controllers
{
    public partial class MVCFlexChartController : Controller
    {
        public ActionResult MovingAverage()
        {
            var mPoints = MathPoint.GetMathPointList(30);
            ViewBag.Options = _flexChartModel;
            return View(mPoints);
        }
    }
}
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
@using C1.Web.Mvc.Chart
@model List<MathPoint>
@{
    ImageExportOptions optionsModel = ViewBag.Options;
    ViewBag.DemoSettings = true;
}
 
@(Html.C1().FlexChart().Id(optionsModel.ControlId).Bind("X", Model).Height(300)
    .Legend(Position.Right)
    .Series(ses =>
    {
        ses.Add(ChartType.Line, "Base Data").Binding("Y");
        ses.AddMovingAverage("SMA").Binding("Y").Type(MovingAverageType.Simple).Period(2);
    }))
 
@section Settings{
    <script>
        var typeMenu, chart, movingAverage;
        c1.documentReady(function () {
            typeMenu = wijmo.Control.getControl('#typeMenu');
            chart = wijmo.Control.getControl('#@(optionsModel.ControlId)');
            if (chart) {
                movingAverage = chart.series[1];
            }
        });
 
        function itemClicked(arg) {
            if (!typeMenu || !chart || !movingAverage) {
                return;
            }
            typeMenu.header = 'Type: <b>' + arg + '</b>'
            chart.beginUpdate();
            movingAverage.type = arg;
            movingAverage.name = arg[0] + 'MA';
            chart.endUpdate();
        }
 
        function periodChanged(host) {
            if (!checkValue(host)) {
                return;
            }
 
            if (!chart || !movingAverage) {
                return;
            }
 
            chart.beginUpdate();
            movingAverage.period = host.value;
            chart.endUpdate();
        }
 
        function checkValue(number) {
            return number.value >= number.min && number.value <= number.max;
        }
    </script>
<div class="container-fluid well">
    <div class="row">
        <div class="col-sm-3 col-xs-12">
            @(Html.C1().Menu().Id("typeMenu").Header("Type: <b>Simple</b>")
            .Command("itemClicked")
                .MenuItems(items =>
                {
                    items.Add("Simple", "Simple");
                    items.Add("Weighted", "Weighted");
                    items.Add("Exponential", "Exponential");
                    items.Add("Triangular", "Triangular");
                }))
        </div>
        <div class="col-sm-5 col-xs-12">
            <label id="labelPeriod" for="inputPeriod">@Html.Raw(Resources.MVCFlexChart.MovingAverage_Period)</label>
            @(Html.C1().InputNumber().Id("periodInput").Value(2).Min(2).Max(29).Step(1).Format("n0").OnClientValueChanged("periodChanged"))
        </div>
    </div>
</div>
 
    @Html.Partial("_ImageExportOptions", optionsModel)
}
 
@section Description{
    @Html.Raw(Resources.MVCFlexChart.MovingAverage_Text0)
}