<script id="scriptInit" type="text/javascript">
        require(["wijmo.wijcandlestickchart"], function () {
            $(document).ready(function () {
                var data = [{
                    x: new Date("12/1/2011"),
                    high: 10,
                    low: 7.5,
                    open: 8,
                    close: 8.6
                }, {
                    x: new Date("12/2/2011"),
                    high: 12,
                    low: 8.6,
                    open: 8.6,
                    close: 11
                }, {
                    x: new Date("12/5/2011"),
                    high: 11,
                    low: 4.4,
                    open: 11,
                    close: 6.2
                }, {
                    x: new Date("12/6/2011"),
                    high: 14,
                    low: 4.2,
                    open: 6.2,
                    close: 13.8
                }, {
                    x: new Date("12/7/2011"),
                    high: 16,
                    low: 8,
                    open: 13.8,
                    close: 15
                }, {
                    x: new Date("12/8/2011"),
                    high: 15,
                    low: 6.2,
                    open: 6.7,
                    close: 12
                }, {
                    x: new Date("12/9/2011"),
                    high: 13.5,
                    low: 7,
                    open: 7.4,
                    close: 11
                }, {
                    x: new Date("12/10/2011"),
                    high: 15.2,
                    low: 7.2,
                    open: 7.9,
                    close: 15
                }];

                $("#wijcandlestickchartDefault").wijcandlestickchart({
                    type: "ohlc",
                    textStyle: {
                        "font-size": "13px",
                        "font-family": '"Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif'
                    },
                    header: {
                        text: "Stock History"
                    },
                    legend: {
                        visible: true,

                        orientation: "horizontal"
                    },
                    hint: {
                        content: function () {
                            return this.label + ' - ' +
                            Globalize.format(this.x, "d") +
                            '\n High:' + this.high +
                            '\n Low:' + this.low +
                            '\n Open:' + this.open +
                            '\n Close:' + this.close;
                        },
                        contentStyle: {
                            "font-size": "12px",
                            "font-family": '"Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", 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
                        },
                    },
                    dataSource: data,
                    seriesList: [{
                        label: "MSFT",
                        legendEntry: true,
                        data: {
                            x: { bind: "x" },
                            high: { bind: "high" },
                            low: { bind: "low" },
                            open: { bind: "open" },
                            close: { bind: "close" }
                        }
                    }],
                    seriesStyles: [
                        {
                            highLow: { fill: "#ff9900", width: 6 },
                            open: { fill: "#ff9900", height: 2 },
                            close: { fill: "#ff9900", height: 2 }
                        }
                    ], annotations: [
                        {
                            type: "circle",
                            content: "Relative [Center]",
                            tooltip: "Relative [Center]",
                            attachment: "relative",
                            radius: 50,
                            point: { x: 0.5, y: 0.5 },
                            style: { fill: '#01DFD7' }
                        },
                        {
                            type: "rect",
                            content: "x:430,y:120+x:50,y:-10",
                            tooltip: "x:430,y:120+x:50,y:-10",
                            attachment: "absolute",
                            width: 110,
                            height: 25,
                            point: { x: 430, y: 120 },
                            offset: { x: 50, y: -10 },
                            style: { fill: '#C0AFA7' }
                        },
                        {
                            type: "circle",
                            content: "Absolute",
                            tooltip: "Absolute",
                            attachment: "absolute",
                            radius: 45,
                            point: { x: 120, y: 250 },
                            style: { fill: '#AA99D0' }
                        },
                        {
                            type: "image",
                            attachment: "dataIndex",
                            href: "http://wijmo.com/wp-content/themes/wijmo5/img/wijmo_flexible.png",
                            tooltip: "wijmo_flexible.png",
                            content: "Image",
                            width: 60,
                            height: 60,
                            seriesIndex: 0,
                            pointIndex: 3
                        },
                        {
                            type: "circle",
                            content: "DATA",
                            tooltip: "DATA",
                            attachment: "dataIndex",
                            seriesIndex: 0,
                            pointIndex: 4,
                            radius: 20,
                            style: { fill: '#FF1109', "fill-opacity": 0.25 }
                        },
                        {
                            type: "circle",
                            content: "BOUND",
                            tooltip: "BOUND",
                            attachment: "dataIndex",
                            seriesIndex: 0,
                            pointIndex: 2,
                            radius: 50,
                            style: { fill: '#FFFF01', "fill-opacity": 0.2 }
                        },
                        {
                            type: "rect",
                            content: "LastPoint",
                            tooltip: "LastPoint",
                            attachment: "dataIndex",
                            seriesIndex: 0,
                            pointIndex: 7,
                            width: 50,
                            height: 30,
                            r: 3,
                            style: {
                                "fill": "#FE2E2E",
                                "stroke": "#FFA9DB",
                                "fill-opacity": 0.5,
                                "stroke-width": 2,
                                "stroke-opacity": 0.75
                            }
                        },
                        {
                            type: "ellipse",
                            content: "SerieZeroPointSix",
                            tooltip: "SerieZeroPointSix",
                            attachment: "dataIndex",
                            seriesIndex: 0,
                            pointIndex: 6,
                            width: 90,
                            height: 30,
                            r: 3,
                            style: {
                                "fill": "#FF7700",
                                "stroke": "#FFA9DB",
                                "fill-opacity": 0.3,
                                "stroke-width": 2,
                                "stroke-opacity": 0.75
                            }
                        },
                        {
                            type: "line",
                            content: "LineText",
                            tooltip: "LineText",
                            start: { x: 10, y: 10 },
                            end: { x: 100, y: 100 },
                            style: {
                                "fill": "#FE2E2E",
                                "stroke": "#01A9DB",
                                "fill-opacity": 2,
                                "stroke-width": 5,
                                "stroke-opacity": 1
                            }
                        },
                        {
                            type: "text",
                            text: "CandleStick Chart Annotation",
                            tooltip: "CandleStick Chart Annotation",
                            point: { x: 400, y: 300 },
                            style: {
                                "font-size": 25,
                                "font-family": "Courier",
                                "font-style": "italic"
                            }
                        },
                        {
                            type: "polygon",
                            content: "Polygon",
                            tooltip: "Polygon",
                            points: [
                                        {
                                            "x": 200,
                                            "y": 0
                                        },
                                        {
                                            "x": 150,
                                            "y": 50
                                        },
                                        {
                                            "x": 175,
                                            "y": 100
                                        },
                                        {
                                            "x": 225,
                                            "y": 100
                                        },
                                        {
                                            "x": 250,
                                            "y": 50
                                        }
                            ],
                            style: {
                                "fill": "#FEAA2E",
                                "stroke": "#01A9DB"
                            }
                        }
                    ]
                });
            });
        });
    </script>