ComponentOne
Web API Explorer ASP.NET Web API Explorer
Wijmo5FlexChart

Wijmo5FlexChart

TrendLine

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

Features

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

Settings

Export
Export Format : Height :
Width :
Export Name :

Description

This sample demonstrates how to export a Wijmo 5 FlexChart TrendLine 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 TrendLine()
        {
            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
@using WebApiExplorer.Models
@{
    ImageExportOptions optionsModel = ViewBag.Options;
    ViewBag.DemoSettings = true;
}
 
<div id="@(optionsModel.ControlId)"></div>
<select id="fitTypeMenu">
    <option value="0" selected="selected">Linear</option>
    <option value="1">Exponential</option>
    <option value="2">Logarithmic</option>
    <option value="3">Power</option>
    <option value="4">Fourier</option>
    <option value="5">Polynomial</option>
    <option value="6">MinX</option>
    <option value="7">MinY</option>
    <option value="8">MaxX</option>
    <option value="9">MaxY</option>
    <option value="10">AverageX</option>
    <option value="11">AverageY</option>
</select>
 
@section Settings{
    @Html.Partial("_ImageExportOptions", optionsModel)
}
 
<script>
    var trendLineChart = new wijmo.chart.FlexChart('#@(optionsModel.ControlId)'),
        fitTypeMenu = new wijmo.input.Menu('#fitTypeMenu'),
        trendLine;
 
    // initialize FlexChart's properties
    trendLineChart.initialize({
        itemsSource: appData,
        bindingX: 'x',
        series: [{
            name: 'Origin',
            binding: 'y',
            chartType: wijmo.chart.ChartType.Scatter
        }]
    });
 
    //create TrendLine
    trendLine = new wijmo.chart.analytics.TrendLine();
    trendLine.name = 'Trend Line';
    trendLine.binding = 'y';
    trendLine.sampleCount = 100;
    trendLineChart.series.push(trendLine);
 
    // update the menus' headers
    updateMenuHeader();
 
    fitTypeMenu.selectedIndexChanged.addHandler(function () {
        if (fitTypeMenu.selectedValue) {
            // update TrendLine's fitType
            trendLine.fitType = parseInt(fitTypeMenu.selectedValue);
 
            // update menu header
            updateMenuHeader();
        }
    });
 
    // helper function for Menu headers
    function updateMenuHeader() {
        fitTypeMenu.header = '<b>@(Resources.Wijmo5FlexChart.TrendLine_FitType)</b>: ' + fitTypeMenu.text;
    }
</script>
 
@section Description{
    @Html.Raw(Resources.Wijmo5FlexChart.TrendLine_Text0)
}