Trend Lines

The TrendLine class extends the regular Series class to provide a calculated series based on the data and parameters you select.

To add trend lines to a chart, follow these steps:

Create one or more TrendLine objects,
Configure the TrendLine objects as you would a regular series, setting their binding, chartType, and style properties for example, and
Set the TrendLine's fitType and order properties to determine the type of trend line you want to create.

Trendline Type:
Order:

Equation:

Randomize Data

// This file locates: "Scripts/Lesson/C1FlexChart/AnalyticsTrendLines.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
    var fitType = wijmo.Control.getControl('#fitType');
    var order = wijmo.Control.getControl('#order');
 
    theChart.itemsSource = getData();
 
    // show the equation on the chart
    var equation = document.getElementById('equation');
 
    // create a TrendLine and add it to the Chart series collection
    var trendLine = new wijmo.chart.analytics.TrendLine();
    trendLine.binding = 'y';
    trendLine.style = { stroke: 'darkred', strokeWidth: 3 };
    trendLine.visibility = 'Hidden';
    theChart.series.push(trendLine);
 
    // select trendline order
    order.valueChanged.addHandler(function (s, e) {
        if (s.value > 0) {
            trendLine.order = s.value;
            showEquation();
        }
    });
 
    // select fit type
    fitType.textChanged.addHandler(function (s, e) {
        trendLine.name = s.text;
        if (s.text) { // show trendline
            trendLine.fitType = s.text;
            trendLine.visibility = 'Visible';
        } else { // hide trendline
            trendLine.visibility = 'Hidden';
        }
        switch (s.text) { // enable/disable order input
            case 'Polynomial':
            case 'Fourier':
                order.isDisabled = false;
                break;
            default:
                order.isDisabled = true;
                break;
        }
        showEquation();
    });
 
    // show updated equation on a timeOut since the TrendLine update is async
    function showEquation() {
        equation.innerHTML = '';
        setTimeout(function () {
            equation.innerHTML = trendLine.getEquation();
        }, 100);
    }
 
    // randomize the data
    document.getElementById('btnRandomize').addEventListener('click', function () {
        theChart.itemsSource = getData();
        showEquation();
    });
 
    // data sources
    function getData() {
        var arr = [],
                cnt = 50,
            a = Math.random(),
            b = Math.random(),
                x = 1;
        for (var i = 1; i < cnt; i++) {
            arr.push({
                x: i,
                y: a + i * b + i * (Math.random() - .5)
            });
        }
        return arr;
    }
});

// This file locates: "Content/css/Lesson/C1FlexChart/AnalyticsTrendLines.css".
.equation {
  display: inline-block;
  font-style: italic;
  font-size: 80%;
}
.wj-combobox, .wj-inputnumber {
  width: 120px;
  margin-right: 12px;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: AnalyticsTrendLines
        public ActionResult AnalyticsTrendLines()
        {
            return View();
        }
    }
}

@{
    var fitTypes = new[] { "Linear", "Exponential", "Logarithmic", "Power", "Fourier", "Polynomial", "MinX", "MinY", "MaxX", "MaxY", "AverageX", "AverageY" };
}
 
<h1>
    @Html.Raw(Resources.C1FlexChart.AnalyticsTrendLines_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexChart.AnalyticsTrendLines_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.AnalyticsTrendLines_Text2)
</p>
<ol>
    <li>
        @Html.Raw(Resources.C1FlexChart.AnalyticsTrendLines_Text3)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.AnalyticsTrendLines_Text4)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.AnalyticsTrendLines_Text5)
    </li>
</ol>
 
<div class="demo-settings">
    <label for="fitType">@Html.Raw(Resources.C1FlexChart.AnalyticsTrendLines_Text6) </label>
    @Html.C1().ComboBox().Id("fitType").Bind(fitTypes).IsRequired(false).Placeholder(Resources.C1FlexChart.AnalyticsTrendLines_Text7).Text("")
    <br />
    <label for="order">@Html.Raw(Resources.C1FlexChart.AnalyticsTrendLines_Text8) </label>
    @Html.C1().InputNumber().Id("order").Value(2).Step(1).Min(1).Max(6).IsDisabled(true)
    <br />
    <label>@Html.Raw(Resources.C1FlexChart.AnalyticsTrendLines_Text9) </label>
    <div id="equation" class="equation"></div><br />
    <label for="btnRandomize">@Html.Raw(Resources.C1FlexChart.AnalyticsTrendLines_Text10)</label>
    <button id="btnRandomize" class="btn btn-default">
        @Resources.Resource.Btn_Go
    </button>
</div>
 
@(Html.C1().FlexChart().Id("theChart")
    .ChartType(C1.Web.Mvc.Chart.ChartType.Scatter)
    .AxisY(y => y.AxisLine(true))
    .BindingX("x")
    .Series(sb => sb.Add().Binding("y").Name("Raw Data"))
)