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.
- C1FlexChart/AnalyticsTrendLines.js
- C1FlexChart/AnalyticsTrendLines.css
- AnalyticsTrendLinesController.cs
- AnalyticsTrendLines.cshtml
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 | // 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; } }); |
1 2 3 4 5 6 7 8 9 10 | // 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; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1FlexChartController : Controller { // GET: AnalyticsTrendLines public ActionResult AnalyticsTrendLines() { 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 | @ { 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" )) ) |