Wijmo UI for the Web
Markup and Scripting
Wijmo User Guide > Widgets > Chart Widgets > CandlestickChart > Markup and Scripting

The HTML markup for a wijcandlestickchart widget looks like this.

Markup
Copy Code
<div id="wijcandlestickchartDefault" style="width: 600px; height: 400px;"></div>

You can initialize the widget with the following jQuery script.

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/2013'), new Date('12/2/2013'), new Date("12/5/2013"), new Date("12/6/2013"), new Date("12/7/2013"),
                        new Date("12/8/2013"), new Date("12/9/2013"), new Date("12/12/2013"), new Date("12/13/2013"), new Date("12/14/2013"),
                        new Date("12/15/2013"), new Date("12/16/2013"), new Date("12/19/2013"), new Date("12/20/2013"), new Date("12/21/2013"),
                        new Date("12/22/2013"), new Date("12/23/2013"), new Date("12/26/2013"), new Date("12/27/2013"), new Date("12/28/2013"),
                        new Date("12/29/2013"), new Date("12/30/2013"), new Date('1/2/2014'), new Date('1/3/2014'), new Date('1/4/2014'),
                        new Date("1/5/2014"), new Date("1/6/2014"), new Date("1/9/2014"), new Date("1/10/2014"), new Date("1/11/2014"),
                        new Date("1/12/2014"), new Date("1/13/2014"), new Date("1/16/2014"), new Date("1/17/2014"), new Date("1/18/2014"),
                        new Date("1/19/2014"), new Date("1/20/2014"), new Date("1/23/2014"), new Date("1/24/2014"), new Date("1/25/2014"),
                        new Date("1/26/2014"), new Date("1/27/2014"), new Date("1/30/2014"), new Date("1/31/2014")],

                    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],
                    open: [8, 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2, 18.5, 17.8, 18.6, 19.8, 18, 16.9, 15.6, 14.7, 14.2, 13.9, 13.2,
                        12.8, 11.7, 11.2, 10.5, 9.4, 8.9, 8.4, 8, 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2],
                    close: [8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2, 18.5, 17.8, 18.6, 19.8, 18, 16.9, 15.6, 14.7, 14.2, 13.9, 13.2,
                        12.8, 11.7, 11.2, 10.5, 9.4, 8.9, 8.4, 8, 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2, 18.5]
                };

                $("#wijcandlestickchartDefault").wijcandlestickchart({
                    header: {
                        text: "Stock History"
                    },
                    axis: {
                        y: {
                            text: "Stock Price"
                        },
                    },
                    seriesList: [{
                        label: "MSFT",
                        data: myData
                    }]
                });

            });
        });
    </script>

The markup and script featured here results in the following live widget. Mouse over each data point to see the hint for that element, and click a legend item to toggle that series in the chart.

See Also

Reference