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 "rating" to create the trend line for the data in the chart.

Script	Copy Code
<script id="scriptInit" type="text/javascript"> var data = [{ year: 1994, rating: 9.2 }, { year: 1972, rating: 9.2 }, { year: 1974, rating: 9.0 }, { year: 1994, rating: 8.9 }, { year: 1966, rating: 8.9 }, { year: 2008, rating: 8.9 }, { year: 1957, rating: 8.9 }, { year: 1993, rating: 8.9 }, { year: 2003, rating: 8.8 }, { year: 1999, rating: 8.8 }, { year: 1980, rating: 8.8 }, { year: 2001, rating: 8.8 }, { year: 1975, rating: 8.7 }, { year: 1990, rating: 8.7 }, { year: 2010, rating: 8.7 }, { year: 1954, rating: 8.7 }, { year: 1977, rating: 8.7 }, { year: 1994, rating: 8.7 }, { year: 1999, rating: 8.7 }, { year: 2002, rating: 8.7 }, { year: 2002, rating: 8.6 }, { year: 1968, rating: 8.6 }, { year: 1995, rating: 8.6 }, { year: 1991, rating: 8.6 }, { year: 1942, rating: 8.6 }, { year: 1995, rating: 8.6 }, { year: 1981, rating: 8.6 }, { year: 1954, rating: 8.6 }, { year: 1946, rating: 8.6 }, { year: 1960, rating: 8.6 }, { year: 1994, rating: 8.6 }, { year: 1950, rating: 8.5 }, { year: 1998, rating: 8.5 }, { year: 2000, rating: 8.5 }, { year: 1991, rating: 8.5 }, { year: 1998, rating: 8.5 }, { year: 1979, rating: 8.5 }, { year: 1931, rating: 8.5 }, { year: 1964, rating: 8.5 }, { year: 1979, rating: 8.5 }, { year: 2001, rating: 8.5 }, { year: 1936, rating: 8.5 }, { year: 1997, rating: 8.5 }, { year: 1959, rating: 8.5 }, { year: 1985, rating: 8.5 }, { year: 2002, rating: 8.4 }, { year: 1941, rating: 8.4 }, { year: 1980, rating: 8.4 }, { year: 2013, rating: 8.4 }, { year: 2006, rating: 8.4 }, { year: 1931, rating: 8.4 }, { year: 1957, rating: 8.4 }, { year: 2011, rating: 8.4 }, { year: 1958, rating: 8.4 }, { year: 1999, rating: 8.4 }, { year: 2012, rating: 8.4 }, { year: 2000, rating: 8.4 }, { year: 2012, rating: 8.4 }, { year: 1999, rating: 8.4 }, { year: 1986, rating: 8.4 }, { year: 1944, rating: 8.4 }, { year: 1976, rating: 8.4 } ]; require(["wijmo.wijscatterchart"], function () { $(document).ready(function () { $("#wijscatterchart").wijscatterchart({ dataSource: data, seriesList: [{ label: "Annual rating", data: { x: {bind: "year"}, y: {bind: "rating"} } },{ isTrendline: true, label: "Trendline", order: 4, data: { x: {bind: "year"}, y: {bind: "rating"} } } ] }); }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
        var data = [{ year: 1994, rating: 9.2 },
                        { year: 1972, rating: 9.2 },
                        { year: 1974, rating: 9.0 },
                        { year: 1994, rating: 8.9 },
                        { year: 1966, rating: 8.9 },
                        { year: 2008, rating: 8.9 },
                        { year: 1957, rating: 8.9 },
                        { year: 1993, rating: 8.9 },
                        { year: 2003, rating: 8.8 },
                        { year: 1999, rating: 8.8 },
                        { year: 1980, rating: 8.8 },
                        { year: 2001, rating: 8.8 },
                        { year: 1975, rating: 8.7 },
                        { year: 1990, rating: 8.7 },
                        { year: 2010, rating: 8.7 },
                        { year: 1954, rating: 8.7 },
                        { year: 1977, rating: 8.7 },
                        { year: 1994, rating: 8.7 },
                        { year: 1999, rating: 8.7 },
                        { year: 2002, rating: 8.7 },
                        { year: 2002, rating: 8.6 },
                        { year: 1968, rating: 8.6 },
                        { year: 1995, rating: 8.6 },
                        { year: 1991, rating: 8.6 },
                        { year: 1942, rating: 8.6 },
                        { year: 1995, rating: 8.6 },
                        { year: 1981, rating: 8.6 },
                        { year: 1954, rating: 8.6 },
                        { year: 1946, rating: 8.6 },
                        { year: 1960, rating: 8.6 },
                        { year: 1994, rating: 8.6 },
                        { year: 1950, rating: 8.5 },
                        { year: 1998, rating: 8.5 },
                        { year: 2000, rating: 8.5 },
                        { year: 1991, rating: 8.5 },
                        { year: 1998, rating: 8.5 },
                        { year: 1979, rating: 8.5 },
                        { year: 1931, rating: 8.5 },
                        { year: 1964, rating: 8.5 },
                        { year: 1979, rating: 8.5 },
                        { year: 2001, rating: 8.5 },
                        { year: 1936, rating: 8.5 },
                        { year: 1997, rating: 8.5 },
                        { year: 1959, rating: 8.5 },
                        { year: 1985, rating: 8.5 },
                        { year: 2002, rating: 8.4 },
                        { year: 1941, rating: 8.4 },
                        { year: 1980, rating: 8.4 },
                        { year: 2013, rating: 8.4 },
                        { year: 2006, rating: 8.4 },
                        { year: 1931, rating: 8.4 },
                        { year: 1957, rating: 8.4 },
                        { year: 2011, rating: 8.4 },
                        { year: 1958, rating: 8.4 },
                        { year: 1999, rating: 8.4 },
                        { year: 2012, rating: 8.4 },
                        { year: 2000, rating: 8.4 },
                        { year: 2012, rating: 8.4 },
                        { year: 1999, rating: 8.4 },
                        { year: 1986, rating: 8.4 },
                        { year: 1944, rating: 8.4 },
                        { year: 1976, rating: 8.4 }
        ];
        require(["wijmo.wijscatterchart"], function () {
        $(document).ready(function () {
            $("#wijscatterchart").wijscatterchart({
                dataSource: data,
                seriesList: [{
                    label: "Annual rating",
                    data: {
                        x: {bind: "year"},
                        y: {bind: "rating"}
                    }
                  },{
                    isTrendline: true,
                    label: "Trendline",
                    order: 4,
                    data: {
                        x: {bind: "year"},
                        y: {bind: "rating"}
                    }
                  }
                ]
            });
        });
        });
</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