ComponentOne
Web API Explorer ASP.NET Web API Explorer
Wijmo5FlexChart

Wijmo5FlexChart

MovingAverage

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

Features

Overview
Header and Footer
Labels
Bubble
Financial Chart
TrendLine
MovingAverage
YFunctionSeries
ParametricFunctionSeries
Box & Whisker
ErrorBar
Waterfall
OriginMA246810121416182022242628303234363840050
Period:

Settings

Export
Export Format : Height :
Width :
Export Name :

Description

This sample demonstrates how to export a Wijmo 5 FlexChart MovingAverage series to image file.
1
2
3
4
5
6
7
8
9
10
11
12
13
using System.Web.Mvc;
 
namespace WebApiExplorer.Controllers
{
    public partial class Wijmo5FlexChartController : Controller
    {
        public ActionResult MovingAverage()
        {
            ViewBag.Options = _flexChartModel;
            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
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
@using WebApiExplorer.Models
@{
    ImageExportOptions optionsModel = ViewBag.Options;
    ViewBag.DemoSettings = true;
}
 
<div id="@(optionsModel.ControlId)"></div>
<select id="typeMenu">
    <option value="0" selected="selected">Simple</option>
    <option value="1">Weighted</option>
    <option value="2">Exponential</option>
    <option value="3">Triangular</option>
</select>
<b>@Html.Raw(Resources.Wijmo5FlexChart.MovingAverage_Period)</b> <input id="periodInput" type="text" />
 
@section Settings{
    @Html.Partial("_ImageExportOptions", optionsModel)
}
 
<script>
    var movingAverageChart = new wijmo.chart.FlexChart('#@(optionsModel.ControlId)'),
        typeMenu = new wijmo.input.Menu('#typeMenu'),
        periodInput = new wijmo.input.InputNumber('#periodInput'),
        movingAverage;
 
    //set inputnumber
    periodInput.value = 2;
    periodInput.min = 2;
    periodInput.max = 29;
    periodInput.step = 1;
    periodInput.format = "n0";
 
    // initialize FlexChart's properties
    movingAverageChart.initialize({
        itemsSource: getData(40),
        bindingX: 'x',
        series: [{
            name: 'Origin',
            binding: 'y',
            chartType: wijmo.chart.ChartType.Scatter
        }]
    });
 
    //create MovingAverage
    movingAverage = new wijmo.chart.analytics.MovingAverage();
    movingAverage.name = 'MA';
    movingAverage.binding = 'y';
    movingAverage.sampleCount = 100;
    movingAverageChart.series.push(movingAverage);
 
    // update the menus' headers
    updateMenuHeader();
 
    typeMenu.selectedIndexChanged.addHandler(function () {
        if (typeMenu.selectedValue) {
            // update MovingAverage's type
            movingAverage.type = parseInt(typeMenu.selectedValue);
 
            // update menu header
            updateMenuHeader();
        }
    });
 
    periodInput.valueChanged.addHandler(function () {
        // update MovingAverage's period
        movingAverage.period = periodInput.value;
    });
 
    // helper function for Menu headers
    function updateMenuHeader() {
        typeMenu.header = '<b>@(Resources.Wijmo5FlexChart.MovingAverage_Type)</b>: ' + typeMenu.text;
    }
</script>
 
@section Description{
    @Html.Raw(Resources.Wijmo5FlexChart.MovingAverage_Text0)
}