ComponentOne
Web API Explorer ASP.NET Web API Explorer
MVCFlexChart

MVCFlexChart

TrendLine

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

Features

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

Settings

Export
Export Format : Height :
Width :
Export Name :

Description

This sample demonstrates how to export a MVC FlexChart TrendLine 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 TrendLine()
        {
            var mPoints = MathPoint.GetMathPointList(10);
            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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
@using C1.Web.Mvc.Chart
@model List<MathPoint>
@{
    ImageExportOptions optionsModel = ViewBag.Options;
    ViewBag.DemoSettings = true;
}
<script>
    var checkboxShowEquation, fitTypeMenu, orderCon, chart, trendLine, lineMarker;
 
    c1.documentReady(function () {
        checkboxShowEquation = document.getElementById('checkboxShowEquation');
        fitTypeMenu = wijmo.Control.getControl('#fitTypeMenu');
        orderCon = document.getElementById('orderCon');
        chart = wijmo.Control.getControl('#@(optionsModel.ControlId)');
        if (chart) {
            trendLine = chart.series[1];
            lineMarker = c1.getExtender(chart, 'LineMarker');
        }
    });
 
    function itemClicked(arg) {
        if (!fitTypeMenu || !chart || !trendLine) {
            return;
        }
        fitTypeMenu.header = 'FitType: <b>' + arg + '</b>';
 
        if (orderCon) {
            if (arg === 'Fourier' || arg === 'Polynomial') {
                orderCon.style.display = '';
            } else {
                orderCon.style.display = 'none';
            }
        }
 
        chart.beginUpdate();
        trendLine.fitType = arg;
        chart.endUpdate();
    }
 
    function orderChanged(host) {
        if (!checkValue(host)) {
            return;
        }
 
        if (!chart || !trendLine) {
            return;
        }
 
        chart.beginUpdate();
        trendLine.order = host.value;
        chart.endUpdate();
    }
 
    function getContent() {
        if (!chart || !trendLine || !trendLine.getEquation) {
            return 'TrendLine';
        }
        return trendLine.getEquation();
    }
 
    function showEquation() {
        if (lineMarker) {
            lineMarker.isVisible = checkboxShowEquation.checked;
        }
    }
 
    function checkValue(number) {
        return number.value >= number.min && number.value <= number.max;
    }
</script>
@(Html.C1().FlexChart().Id(optionsModel.ControlId).Height(300)
.Bind("X", Model)
.AxisY(ay => ay.Min(0).Max(100))
.Legend(Position.Right)
.LegendToggle(true)
.Series(ss =>
{
    ss.Add(ChartType.Scatter, "Base Data").Binding("Y");
    ss.AddTrendLine("Trend Line").Binding("Y").SampleCount(100).TrendLineOrder(4);
})
.AddLineMarker(lm => lm.Id("LineMarker").Lines(LineMarkerLines.None).Interaction(LineMarkerInteraction.None).Content("getContent")))
 
 
@section Settings{
    <div class="container-fluid well">
        <div class="row">
            <div class="col-sm-3 col-xs-12">
                <label id="labelShowEquation" for="checkboxShowEquation">@Html.Raw(Resources.MVCFlexChart.TrendLine_ShowEquation)</label>
                <input type="checkbox" id="checkboxShowEquation" onchange="showEquation()" checked="checked" />
            </div>
            <div class="col-sm-4 col-xs-12">
                @(Html.C1().Menu().Id("fitTypeMenu").Header("FitType: <b>Linear</b>")
                .Command("itemClicked")
                .MenuItems(items =>
                {
                    items.Add("Linear", "Linear");
                    items.Add("Exponential", "Exponential");
                    items.Add("Logarithmic", "Logarithmic");
                    items.Add("Power", "Power");
                    items.Add("Fourier", "Fourier");
                    items.Add("Polynomial", "Polynomial");
                    items.Add("MinX", "MinX");
                    items.Add("MinY", "MinY");
                    items.Add("MaxX", "MaxX");
                    items.Add("MaxY", "MaxY");
                    items.Add("AverageX", "AverageX");
                    items.Add("AverageY", "AverageY");
                }))
            </div>
            <div id="orderCon" class="col-sm-5 col-xs-12" style="display: none">
                <label id="labelOrder" class="order" for="orderInput">@Html.Raw(Resources.MVCFlexChart.TrendLine_Order)</label>
                @(Html.C1().InputNumber().Id("orderInput").Value(4).Step(1).Format("n0").Min(1).Max(9).OnClientValueChanged("orderChanged"))
            </div>
        </div>
    </div>
    @Html.Partial("_ImageExportOptions", optionsModel)
}
 
@section Description{
    @Html.Raw(Resources.MVCFlexChart.TrendLine_Text0)
}