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.
label: Set this value to "Trendline" for the legend so that we can distinguish it from the line chart.
order: Set this value to 4 to indicate the number of terms to use for the polynom equation (default fitType is polynom).
data: Bind the data x value to "Year" and the y value to "ThousandUnits" to create the trend line for the data in the chart.

Script	Copy Code
<script id="scriptInit" type="text/javascript"> var data = [{ Year: 1999, ThousandUnits: 39.758 }, { Year: 2000, ThousandUnits: 41.215 }, { Year: 2001, ThousandUnits: 39.855 }, { Year: 2002, ThousandUnits: 41.358 }, { Year: 2003, ThousandUnits: 41.968 }, { Year:2004, ThousandUnits:44.554 }, { Year:2005, ThousandUnits:46.862 },{ Year:2006, ThousandUnits:49.918 },{ Year:2007, ThousandUnits:53.201 },{ Year:2008, ThousandUnits: 52.726 },{ Year:2009, ThousandUnits:47.772 },{ Year:2010, ThousandUnits:58.264 },{ Year:2011, ThousandUnits:59.929 }]; require(["wijmo.wijlinechart"], function () { $(document).ready(function () { $("#wijlinechart").wijlinechart({ dataSource: data, seriesList: [{ label: "World auto production", data: { x: {bind: "Year"}, y: {bind: "ThousandUnits"} } },{ isTrendline: true, label: "Trendline", order: 4, data: { x: {bind: "Year"}, y: {bind: "ThousandUnits"} } } ] }); }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
        var data = [{
            Year: 1999,
            ThousandUnits: 39.758
        }, {
            Year: 2000,
            ThousandUnits: 41.215
        }, {
            Year: 2001,
            ThousandUnits: 39.855
        }, {
            Year: 2002,
            ThousandUnits: 41.358
        }, {
            Year: 2003,
            ThousandUnits: 41.968
        }, {
            Year:2004,
            ThousandUnits:44.554 
        }, {
            Year:2005,
            ThousandUnits:46.862 
        },{
            Year:2006,
            ThousandUnits:49.918 
        },{
            Year:2007,
            ThousandUnits:53.201 
        },{
            Year:2008,
            ThousandUnits: 52.726
        },{
            Year:2009,
            ThousandUnits:47.772 
        },{
            Year:2010,
            ThousandUnits:58.264 
        },{
            Year:2011,
            ThousandUnits:59.929 
        }];
        require(["wijmo.wijlinechart"], function () {
        $(document).ready(function () {
            $("#wijlinechart").wijlinechart({
                dataSource: data,
                seriesList: [{
                    label: "World auto production",
                    data: {
                        x: {bind: "Year"},
                        y: {bind: "ThousandUnits"}
                    }
                  },{
                    isTrendline: true,
                    label: "Trendline",
                    order: 4,
                    data: {
                        x: {bind: "Year"},
                        y: {bind: "ThousandUnits"}
                    }
                  }
                ]
            });
        });
        });
</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.

Concepts

Widgets

Reference