Add a TrendLine

Building on the Quick Start example, you can add a trend line to your chart using attributes of the seriesList option.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which uses data more suited to a trend line, and adds a trend line to the seriesList option using the following TrendLine attributes:

isTrendLine: Set this value to true to indicate that the series item is a trend line rather than a regular data item.
order: Set this value to 4 to indicate the number of terms to use for the polynom equation (default fitType is polynom).
label: Set this value to "Trend" to display it in the legend (legendEntry is true by default).
data: Set the data y value to domesticData to create the trend line using the numeric data from the chart.

Script	Copy Code
<script id="scriptInit" type="text/javascript"> var datesData = [new Date('1/1/2013'), new Date('2/1/2013'), new Date('3/1/2013'), new Date('4/1/2013'), new Date('5/1/2013'), new Date('6/1/2013'), new Date('7/1/2013'), new Date('8/1/2013'), new Date('9/1/2013'), new Date('10/1/2013'), new Date('11/1/2013'), new Date('12/1/2013')]; var domesticData = [1983, 2343, 2593, 2283, 2574, 2838, 2382, 2634, 2938, 2739, 2983, 3493]; require(["wijmo.wijbarchart"], function () { $(document).ready(function () { $("#wijbarchart").wijbarchart({ data: {x: datesData}, seriesList: [{ label: "Actual", legendEntry: true, data: {y: domesticData} },{ isTrendline: true, order: 4, label: "Trend", data: {y: domesticData} } ] }); }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
        var datesData = [new Date('1/1/2013'), new Date('2/1/2013'), new Date('3/1/2013'), new Date('4/1/2013'), new Date('5/1/2013'), new Date('6/1/2013'), new Date('7/1/2013'), new Date('8/1/2013'), new Date('9/1/2013'), new Date('10/1/2013'), new Date('11/1/2013'), new Date('12/1/2013')];
        var domesticData = [1983, 2343, 2593, 2283, 2574, 2838, 2382, 2634, 2938, 2739, 2983, 3493];
        require(["wijmo.wijbarchart"], function () {
        $(document).ready(function () {
            $("#wijbarchart").wijbarchart({
                data: {x: datesData},
                seriesList: [{
                    label: "Actual",
                    legendEntry: true,
                    data: {y: domesticData}
                  },{
                    isTrendline: true,
                    order: 4,
                    label: "Trend",
                    data: {y: domesticData}
                    }
                ]
            });
        });
        });
</script>

No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the widget.
Save your HTML file and open it in a browser. The widget appears like the one in the live widget below, with the TrendLine added to the chart.

Reference

Concepts

Widgets