Custom Functions

The wijmo.chart.analytics module contains two classes that allow you to plot arbitrary functions without explicitly generating data points:

  1. YFunctionSeries: Series based on a function that provides Y values as a function of X values within a given range.
  2. ParametricFunctionSeries: Series based on functions that provides X and Y values as a function of domain values within a given range.

The chart below demonstrates:

y = f(x)x = f(t); y = g(t)-10-8-6-4-20246810-0.5000.50
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
// This file locates: "Scripts/Lesson/C1FlexChart/AnalyticsCustomFunctions.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
 
    // create a YFunctionSeries and add it to the chart
    var yFun = new wijmo.chart.analytics.YFunctionSeries();
    yFun.name = 'y = f(x)';
    yFun.min = -10;
    yFun.max = 10;
    yFun.sampleCount = 300;
    yFun.func = function (x) {
        return Math.sin(4 * x) * Math.cos(3 * x);
    };
    theChart.series.push(yFun);
 
    // create a ParametricFunctionSeries and add it to the chart
    var pFun = new wijmo.chart.analytics.ParametricFunctionSeries();
    pFun.name = 'x = f(t); y = g(t)'
    pFun.min = 0;
    pFun.max = 2 * Math.PI;
    pFun.sampleCount = 1000;
    pFun.xFunc = function (t) {
        return 10 * Math.cos(5 * t);
    };
    pFun.yFunc = function (t) {
        return Math.sin(6 * t);
    };
    theChart.series.push(pFun);
});
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: AnalyticsCustomFunctions
        public ActionResult AnalyticsCustomFunctions()
        {
            return View();
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<h1>
    @Html.Raw(Resources.C1FlexChart.AnalyticsCustomFunctions_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexChart.AnalyticsCustomFunctions_Text1)
</p>
<ol>
    <li>
        @Html.Raw(Resources.C1FlexChart.AnalyticsCustomFunctions_Text2)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.AnalyticsCustomFunctions_Text3)
    </li>
</ol>
<p>
    @Html.Raw(Resources.C1FlexChart.AnalyticsCustomFunctions_Text4)
</p>
 
@(Html.C1().FlexChart().Id("theChart")
)