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).
data: Bind the data x value to Income, and the y value to LifeExpectancy to create the trend line using numeric data from the chart.

Script	Copy Code
<script id="scriptInit" type="text/javascript"> var data = [{ Income: 7931, LifeExpectancy: 73, Population: 1340 }, { Income: 2972, LifeExpectancy: 65, Population: 1150 }, { Income: 42066, LifeExpectancy: 78, Population: 309 }, { Income: 30866, LifeExpectancy: 83, Population: 126 }, { Income: 14318, LifeExpectancy: 69, Population: 140 }, { Income: 374, LifeExpectancy: 48, Population: 72 }, { Income: 9284, LifeExpectancy: 52, Population: 43 }, { Income: 11754, LifeExpectancy: 77, Population: 112 }, { Income: 31217, LifeExpectancy: 80, Population: 61 }]; require(["wijmo.wijbubblechart"], function () { $(document).ready(function () { $("#wijbubblechart").wijbubblechart({ dataSource: data, legend: {visible: false}, seriesList: [{ data: { x: {bind: "Income"}, y: {bind: "LifeExpectancy"}, y1: {bind: "Population"} } },{ isTrendline: true, order: 4, label: "Trend", data: { x: {bind: "Income"}, y: {bind: "LifeExpectancy"}, } } ] }); }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
        var data = [{
            Income: 7931,
            LifeExpectancy: 73,
            Population: 1340
        }, {
            Income: 2972,
            LifeExpectancy: 65,
            Population: 1150
        }, {
            Income: 42066,
            LifeExpectancy: 78,
            Population: 309
        }, {
            Income: 30866,
            LifeExpectancy: 83,
            Population: 126
        }, {
            Income: 14318,
            LifeExpectancy: 69,
            Population: 140
        }, {
            Income: 374,
            LifeExpectancy: 48,
            Population: 72
        }, {
            Income: 9284,
            LifeExpectancy: 52,
            Population: 43
        }, {
            Income: 11754,
            LifeExpectancy: 77,
            Population: 112
        }, {
            Income: 31217,
            LifeExpectancy: 80,
            Population: 61
        }];
        require(["wijmo.wijbubblechart"], function () {
        $(document).ready(function () {
            $("#wijbubblechart").wijbubblechart({
                dataSource: data,
                legend: {visible: false},
                seriesList: [{
                    data: {
                        x: {bind: "Income"}, 
                        y: {bind: "LifeExpectancy"}, 
                        y1: {bind: "Population"}
                    }
                  },{
                    isTrendline: true,
                    order: 4,
                    label: "Trend",
                    data: {
                        x: {bind: "Income"}, 
                        y: {bind: "LifeExpectancy"}, 
                    }
                  }
                ]
            });
        });
        });
</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.

Widgets

Concepts

Reference