The HTML markup for a wijchartnavigator widget looks like this.
Markup |
Copy Code |
---|---|
<div id="chart1" style="width:700px; height: 250px; "></div> <div id="wijchartnavigator" style="width:700px; height: 56px"> </div> |
You can initialize and add data to the widget with the following jQuery script.
Script |
Copy Code |
---|---|
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijcandlestickchart", "wijmo.wijchartnavigator"], function () { $(document).ready(function () { var data = { x: [new Date("2014/1/24"), new Date("2014/1/25"), new Date("2014/1/28"), new Date("2014/1/29"), new Date("2014/1/30"), new Date("2014/1/31"), new Date("2014/2/1"), new Date("2014/2/4"), new Date("2014/2/5"), new Date("2014/2/6"), new Date("2014/2/7"), new Date("2014/2/8"), new Date("2014/2/18"), new Date("2014/2/19"), new Date("2014/2/20"), new Date("2014/2/21"), new Date("2014/2/22"), new Date("2014/2/25"), new Date("2014/2/26"), new Date("2014/2/27"), new Date("2014/2/28"), new Date("2014/3/1"), new Date("2014/3/4"), new Date("2014/3/5"), new Date("2014/3/6"), new Date("2014/3/7"), new Date("2014/3/8"), new Date("2014/3/11"), new Date("2014/3/12"), new Date("2014/3/13"), new Date("2014/3/14"), new Date("2014/3/15")], y: [2320.26, 2300.26, 2295.35, 2347.22, 2360.75, 2383.43, 2377.41, 2425.92, 2411.24, 2432.68, 2430.69, 2416.62, 2441.91, 2420.26, 2383.49, 2378.82, 2322.94, 2320.62, 2313.74, 2297.77, 2322.32, 2364.54, 2332.08, 2274.81, 2333.61, 2340.44, 2326.42, 2314.68, 2309.16, 2282.17, 2255.77, 2269.31, 2267.29, 2244.26, 2257.74, 2318.21], open: [2320.26, 2300.26, 2295.35, 2347.22, 2360.75, 2383.43, 2377.41, 2425.92, 2411.24, 2432.68, 2430.69, 2416.62, 2441.91, 2420.26, 2383.49, 2378.82, 2322.94,2320.62, 2313.74, 2297.77, 2322.32, 2364.54, 2332.08, 2274.81, 2333.61, 2340.44, 2326.42], close: [2302.60, 2291.30, 2346.50, 2358.90, 2382.40, 2385.40, 2419.00, 2428.10, 2433.10, 2434.40, 2418.50, 2432.40, 2421.50, 2382.90, 2397.10, 2325.90, 2314.10, 2325.80, 2293.30, 2313.20, 2365.50, 2359.50, 2273.40, 2326.30, 2347.10, 2324.20, 2318.60, 2310.50, 2286.60, 2263.90, 2270.20, 2278.40,], low: [2287.30, 2288.20, 2295.30, 2337.30, 2347.80, 2371.20, 2369.50, 2417.50, 2403.30, 2427.70, 2394.20, 2414.40, 2415.40, 2373.50, 2370.60, 2309.10, 2308.70, 2315.00, 2289.80, 2292.00, 2308.90, 2330.80, 2259.20, 2270.10, 2321.60, 2304.20, 2314.50, 2296.50, 2264.80, 2253.20, 2253.30, 2250.20,], high: [2362.90, 2308.30, 2346.90, 2363.80, 2383.70, 2391.80, 2421.10, 2440.30, 2437.40, 2441.70, 2433.80, 2443.00, 2444.80, 2427.00, 2397.90, 2378.80, 2330.80, 2338.70, 2340.70, 2324.60, 2366.10, 2369.60, 2333.50, 2328.10, 2351.40, 2352.00, 2333.60, 2320.90, 2333.20, 2286.30, 2276.20, 2212.00 ] }; $("#chart1").wijcandlestickchart({ textStyle: { "font-size": "13px", "font-family": '"Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif' }, header: { text: "Shanghai Stock Index in first half of 2014" }, legend: { visible: false, }, 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; }, }, axis: { x: { textVisible: false, visible: false } }, seriesList: [{ label: "MSFT", data: data }], seriesStyles: [ { highLow: { fill: "rgb(140,140,140)", width: 2 }, fallingClose: { fill: "rgb(240,126,110)", width: 6 }, risingClose: { fill: "rgb(144,205,151)", width: 6 } } ], marginTop: 5, marginBottom: 5, marginLeft: 2, marginRight: 2, }); $("#wijchartnavigator").wijchartnavigator({ targetSelector: "#chart1", rangeMin: $.toOADate(new Date("2014/2/5")), rangeMax: $.toOADate(new Date("2014/2/28")), seriesList: [{ data: { x: data.x, y: data.high } }], }); }); }); </script> |
The markup and script featured here results in the following live widget.