Wijmo UI for the Web
Stock Price Comparison
Wijmo User Guide > Widgets > ChartNavigator > User Scenario > Stock Price Comparison
Show All
Hide All

You can bind the wijchartnavigator widget to more than one charts for better visualization of data over a period of time. This scenario binds the chartnavigator to two charts to depict the stock price from January' 2014 to March' 2014.

The candlestick chart shows detailed price data (high, low, open, and close values) and provides information about the relationship between the open and close values. Wijlinechart depicts overall performance and stock price trends of three months.

Use the code below to bind wijchartnavigator to wijlinechart and wijcandlestickchart.

  1. Add links to the dependencies to your HTML page within the <head> tags. Find the latest dependencies in the content delivery network (CDN) file at wijmo cdn.

    Drop down and copy references to paste inside the head tags

    References
    Copy Code 
    <link href="Scripts/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
<link href="Scripts/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" />
<script src="Scripts/require.js" type="text/javascript"></script>
<script src="Scripts/require.wijmo.config.js" type="text/javascript"></script>
  2. Add the following markup within the <body> tags to create the widget. The <div> element creates the widgets, sets their height and width.
    Markup
    Copy Code 
    <div id="chart1" style="width:900px; height: 250px; "></div>
    <div id="wijlinechart" style="width:1000px;  "></div>
<div id="wijchartnavigator" style="width:900px; height: 56px">
 </div>
  3. Within the <head> tags, below the references, add the following script to add data to the charts and bind it to the wijchartnavigator.
    Script
    Copy Code 
    <script id="scriptInit" type="text/javascript">
    require(["wijmo.wijcandlestickchart", "wijmo.wijchartnavigator", "wijmo.wijlinechart"], 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,
            });
                
            $("#wijlinechart").wijlinechart({
            type: "area",
                seriesList: [{
                    
                    data: data
                }]
            });          
            $("#wijchartnavigator").wijchartnavigator({
                targetSelector: "#chart1, #wijlinechart",
                rangeMin: $.toOADate(new Date("2014/2/5")),
                rangeMax: $.toOADate(new Date("2014/2/28")),
                seriesList: [{
                    data: { x: data.x, y: data.high }
                }],
                    
            });
        });
    });
    </script>



 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page