Wijmo UI for the Web
Create a High Low Chart
Wijmo User Guide > Widgets > Chart Widgets > CandlestickChart > CandlestickChart How To > Create a High Low Chart
Show All
Hide All

Building on the Quick Start example, you can change the type of chart from the default candlestick to "hl" (high low) using the type option.

  1. In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which changes the type option and does not provide data for open and close, which are not used in this chart type. 

    Drop down and copy script to paste in <head> section

    Script
    Copy Code 
    <script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min"
            }
    });
</script>
    <script id="scriptInit" type="text/javascript">
        require(["wijmo.wijcandlestickchart"], function () {
            $(document).ready(function () {
                var myData = {
                    x: [new Date('12/1/2011'), new Date('12/2/2011'), new Date("12/5/2011"), new Date("12/6/2011"), new Date("12/7/2011"),
                        new Date("12/8/2011"), new Date("12/9/2011"), new Date("12/12/2011"), new Date("12/13/2011"), new Date("12/14/2011"),
                        new Date("12/15/2011"), new Date("12/16/2011"), new Date("12/19/2011"), new Date("12/20/2011"), new Date("12/21/2011"),
                        new Date("12/22/2011"), new Date("12/23/2011"), new Date("12/26/2011"), new Date("12/27/2011"), new Date("12/28/2011"),
                        new Date("12/29/2011"), new Date("12/30/2011"), new Date('1/2/2012'), new Date('1/3/2012'), new Date('1/4/2012'),
                        new Date("1/5/2012"), new Date("1/6/2012"), new Date("1/9/2012"), new Date("1/10/2012"), new Date("1/11/2012"),
                        new Date("1/12/2012"), new Date("1/13/2012"), new Date("1/16/2012"), new Date("1/17/2012"), new Date("1/18/2012"),
                        new Date("1/19/2012"), new Date("1/20/2012"), new Date("1/23/2012"), new Date("1/24/2012"), new Date("1/25/2012"),
                        new Date("1/26/2012"), new Date("1/27/2012"), new Date("1/30/2012"), new Date("1/31/2012")],

                    high: [10, 12, 11, 14, 16, 20, 18, 17, 17.5, 20, 22, 21, 22.5, 20, 21, 20.8, 20, 19, 18, 17, 16, 15, 15, 14, 13, 12,
                        11.5, 10.9, 10, 9, 9.5, 10, 12, 11, 14, 16, 20, 18, 17, 17.5, 20, 22, 21, 22.5],
                    low: [7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10, 12.2, 12, 16, 15.5, 16, 15, 16, 16.5, 16, 16, 15, 14.5, 14, 13.5, 13, 12, 11,
                        11, 10, 9, 8, 7.5, 7.9, 7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10, 12.2, 12, 16, 15.5, 16]
                };

                $("#wijcandlestickchartDefault").wijcandlestickchart({
                    type: "hl",
                    textStyle: {
                        "font-size": "13px",
                        "font-family": '"Segoe UI", Arial, sans-serif'
                    },
                    header: {
                        text: "Stock History"
                    },
                    legend: {
                        visible: true,
                        compass: "north",
                        orientation: "horizontal"
                    },
                    hint: {
                        content: function () {
                            return this.label + ' - ' +
                            Globalize.format(this.x, "d") +
                            '\n High:' + this.high +
                            '\n Low:' + this.low;
                        },
                        contentStyle: {
                            "font-size": "12px",
                            "font-family": '"Segoe UI", Arial, sans-serif'
                        },
                        style: {
                            fill: "#444444",
                            stroke: "none"
                        }
                    },
                    axis: {
                        x: {
                            textStyle: {
                                "font-weight": "normal"
                            },
                            tickMajor: {
                                position: "outside",//Position tick marks outside of the axis line
                                style: {
                                    stroke: "#999999"//Make the tick marks match axis line color
                                }
                            }
                        },
                        y: {
                            text: "Stock Price",
                            textStyle: {
                                "font-weight": "normal"
                            },
                            alignment: "far"//axis text aligned away from xy intersection
                        }
                    },
                    seriesList: [{
                        label: "MSFT",
                        legendEntry: true,
                        data: myData
                    }],
                    seriesStyles: [{
                        highLow: { fill: "#88bde6", width: 6}
                    }]
                });

            });
        });
    </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 only high and low data for each day.

See Also

Reference

wijcandlestickchart API
axis Option
header Option
hint Option
legend Option
seriesList Option
seriesStyles Option
textStyle Option
type Option

Widgets

CandlestickChart

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page