Features

Trend Lines

Trend Lines

Trend lines are used to visualize trends in data and to help analyze the problems of prediction.

Features

Chart Types
Interaction
Analytics
BOXTrend Line01/23/1501/27/1501/29/1502/02/1502/04/1502/06/1502/10/1502/12/1502/17/1502/19/1502/23/1502/25/1502/27/1503/03/1503/05/1503/09/1503/11/1503/13/1503/17/1503/19/1503/23/1503/25/1503/27/1503/31/1504/02/1504/07/1504/09/1504/13/1504/15/1504/17/1504/21/1504/23/1504/27/1504/29/1505/01/1505/05/1505/07/1505/11/1505/13/1505/15/1505/19/1505/21/1505/26/1505/28/1520

Settings

Description

Trend lines are used to visualize trends in data and to help analyze the problems of prediction.

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
using System.Collections.Generic;
using FinancialChartExplorer.Models;
using Microsoft.AspNetCore.Mvc;
  
namespace FinancialChartExplorer.Controllers
{
    public partial class HomeController : Controller
    {
        public ActionResult TrendLine()
        {
            var model = BoxData.GetDataFromJson();
            ViewBag.DemoSettingsModel = new ClientSettingsModel() { Settings = CreateTrendLineSettings() };
            return View(model);
        }
  
        private static IDictionary<string, object[]> CreateTrendLineSettings()
        {
            var settings = new Dictionary<string, object[]>
            {
                {"Order", new object[]{"2","3","4","5","6","7","8","9"}},
                {"SampleCount", new object[]{"100","120","140","160","180","200"}},
                {"FitType", new object[]{ "Linear", "AverageX","AverageY","Exponential","Fourier","MaxX","MaxY","MinX","MinY","Polynomial"}},
            };
  
            return settings;
        }
  
    }
}
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
@model List<FinanceData>
@{
    ViewBag.DemoSettings = true;
    ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;
}
  
<script type="text/javascript">
    function customChangeOrder(control, value) {
        var trendLine = control.series[1];
        if (trendLine) {
            trendLine.order = +value;
        }
    }
  
    function customChangeSampleCount(control, value) {
        var trendLine = control.series[1];
        if (trendLine) {
            trendLine.sampleCount = +value;
        }
    }
  
    function customChangeFitType(control, value) {
        var trendLine = control.series[1];
        if (trendLine) {
            trendLine.fitType = wijmo.chart.analytics.TrendLineFitType[value];
        }
    }
  
</script>
  
<c1-financial-chart id="@demoSettingsModel.ControlId" binding-x="X" chart-type="Line">
    <c1-items-source source-collection="@Model"></c1-items-source>
    <c1-financial-chart-series binding="Close" name="BOX"></c1-financial-chart-series>
    <c1-flex-chart-trendline binding="Close" fit-type="Linear" name="Trend Line"></c1-flex-chart-trendline>
    <c1-flex-chart-tooltip content="tooltip"></c1-flex-chart-tooltip>
</c1-financial-chart>
  
@section Description{
    <p>@Html.Raw(Home.TrendLine_Text0)</p>
}
@section Summary{
    <p>@Html.Raw(Home.TrendLine_Text1)</p>
}