Analytics

The wijmo.chart.analytics module contains classes that extend the Series class to provide extra information about the data including: trend lines, moving averages, error bars, box and waterfall plots, and function plots.

The chart below has a regular series and two analytics series, a TrendLine and a MovingAverage:

Raw DataTrendLineMovingAverage51015202530354045204060
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
// This file locates: "Scripts/Lesson/C1FlexChart/Analytics.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
 
    theChart.itemsSource = getData();
 
    // create a TrendLine and add it to the chart
    var trendLine = new wijmo.chart.analytics.TrendLine();
    trendLine.name = 'TrendLine';
    trendLine.binding = 'y';
    trendLine.fitType = 'Polynomial';
    trendLine.order = 2;
    trendLine.style = { stroke: 'darkred', strokeWidth: 3 };
    theChart.series.push(trendLine);
   
    // create a MovingAverage and add it to the chart
    var movAvg = new wijmo.chart.analytics.MovingAverage();
    movAvg.name = 'MovingAverage';
    movAvg.binding = 'y';
    movAvg.period = 6;
    movAvg.style = { stroke: 'orange', strokeWidth: 3 };
    theChart.series.push(movAvg);
 
    // data sources
    function getData() {
        var arr = [],
                cnt = 50,
            a = Math.random(),
            b = .2 + 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
11
12
13
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: Analytics
        public ActionResult Analytics()
        {
            return View();
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<h1>
    @Html.Raw(Resources.C1FlexChart.Analytics_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexChart.Analytics_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.Analytics_Text2)
</p>
 
@(Html.C1().FlexChart().Id("theChart")
    .ChartType(C1.Web.Mvc.Chart.ChartType.Scatter)
    .BindingX("x")
    .Series(sb=>sb.Add().Binding("y").Name("Raw Data"))
)