Wijmo UI for the Web
Add a TrendLine
Wijmo User Guide > Widgets > Chart Widgets > CandlestickChart > CandlestickChart How To > Add a TrendLine
Show All
Hide All

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

  1. 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 "x," and the y value to "close" to create the trend line using closing values from the chart.
    Script
    Copy Code 
    <script id="scriptInit" type="text/javascript">
        var data = [{
            x: new Date("1/2/2012"),
            high: 15,
            low: 13,
            open: 13.9,
            close: 13.2
        }, {
            x: new Date("1/3/2012"),
            high: 14,
            low: 12,
            open: 13.2,
            close: 12.8
        }, {
            x: new Date("1/4/2012"),
            high: 13,
            low: 11,
            open: 12.8,
            close: 11.7
        }, {
            x: new Date("1/5/2012"),
            high: 12,
            low: 11,
            open: 11.7,
            close: 11.2
        }, {
            x: new Date("1/6/2012"),
            high: 11.5,
            low: 10,
            open: 11.2,
            close: 10.5
        }, {
            x: new Date("1/9/2012"),
            high: 10.9,
            low: 9,
            open: 10.5,
            close: 9.4
        }, {
            x: new Date("1/10/2012"),
            high: 10,
            low: 8,
            open: 9.4,
            close: 8.9
        }, {
            x: new Date("1/11/2012"),
            high: 9,
            low: 7.5,
            open: 8.9,
            close: 8.4
        }, {
            x: new Date("1/12/2012"),
            high: 9.5,
            low: 7.9,
            open: 8.4,
            close: 8
        }, {
            x: new Date("1/13/2012"),
            high: 10,
            low: 7.5,
            open: 8,
            close: 8.6
        }, {
            x: new Date("1/16/2012"),
            high: 12,
            low: 8.6,
            open: 8.6,
            close: 11
        }, {
            x: new Date("1/17/2012"),
            high: 11,
            low: 4.4,
            open: 11,
            close: 6.2
        }, {
            x: new Date("1/18/2012"),
            high: 14,
            low: 4.2,
            open: 6.2,
            close: 13.8
        }, {
            x: new Date("1/19/2012"),
            high: 16,
            low: 8,
            open: 13.8,
            close: 15
        }, {
            x: new Date("1/20/2012"),
            high: 20,
            low: 9,
            open: 15,
            close: 14
        }, {
            x: new Date("1/23/2012"),
            high: 18,
            low: 11,
            open: 14,
            close: 12
        }, {
            x: new Date("1/24/2012"),
            high: 17,
            low: 10,
            open: 12,
            close: 16
        }, {
            x: new Date("1/25/2012"),
            high: 17.5,
            low: 12.2,
            open: 16,
            close: 15
        }, {
            x: new Date("1/26/2012"),
            high: 20,
            low: 12,
            open: 15,
            close: 17
        }, {
            x: new Date("1/27/2012"),
            high: 22,
            low: 16,
            open: 17,
            close: 18
        }, {
            x: new Date("1/30/2012"),
            high: 21,
            low: 15.5,
            open: 18,
            close: 17.2
        }, {
            x: new Date("1/31/2012"),
            high: 22.5,
            low: 16,
            open: 17.2,
            close: 18.5
        }];
        require(["wijmo.wijcandlestickchart"], function () {
        $(document).ready(function () {
            $("#wijcandlestickchart").wijcandlestickchart({
                dataSource: data,
                legend: {visible: false},
                seriesList: [{
                    data: {
                        x: {bind: "x"}, 
                        high: {bind: "high"}, 
                        low: {bind: "low"}, 
                        open: {bind: "open"}, 
                        close: {bind: "close"}
                    }
                  },{
                    isTrendline: true,
                    order: 4,
                    label: "Trend",
                    data: {
                        x: {bind: "x"}, 
                        y: {bind: "close"} 
                    }
                  }
                ]
            });
        });
        });
</script>
  2. No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the widget.
  3. 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.

See Also

Concepts

TrendLines

Widgets

CandlestickChart

Reference

wijcandlestickchart API
TrendlineRender Class
dataSource Option
legend Option
seriesList Option

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page