Symbol Lookup widget

Please note that the web components sample template (chartiq.html) also contains a search web-component which can be customized to load your data. Please see STX.UI.Lookup.Driver.ChartIQ in stxUI.js for a fully functional example.


The library includes a simple symbol lookup widget you can use in your UI if you do not have one. All you need to do is link it to your UI and feed the symbols into the widget. You can see this working on our non-web component template stx-advanced.html

If you do not have a lookup feed, we can help. Symbol lookup services are available form our partner vendors trough our ciqLookupService plug-in and can be made available upon request for an additional fee ( see config layout in STX.LookupWidget for technical details).

If your firm maintains a database of valid symbols and their corresponding full names and exchanges, you can link it to the lookup widget.

The widget can be used with a static (client-side) or dynamic (queried via AJAX) symbology.

Symbol Search Box

The STXLookupWidget has sample data. You will need to code your own symbol lookup for the symbols from your exchange(s).

Each time a customer types a letter, the textCallback function (as defined by the config object) is called. "txt" contains the contents of the input box. "filter" is the filter the user has selected (exchange). textCallback() uses the data you provide to dynamically change the contents by calling that.displayResults(). You can implement results either by hard coding your symbol list or you could implement it by making an ajax call back to your server. If your exchange has hundreds or thousands of symbols then you will need to make a server request. To make suggestive lookup, simply add some code to filter the results based on the text entered by the user.

Classification (Search filtering)

The classifications are simply a tool for narrowing the search. When a user presses a filter button, that filter text is available to send back to your server to narrow the search. For instance, ["NSE","BSE"]. Your server would then only return the results that narrowed for that exchange. If no search criteria is selected (or "ALL") then no filter should be applied. Regardless, the server should return data in the same format as in the hard coded example (with the third parameter being "Exchange").

If all of your symbols are from a single exchange then it really isn't necessary to have a classification, so set filters to null. If you will have multiple exchanges then set your filters array to contain the exchanges you will support.

runSampleUI() has default filter values of ALL, STOCKS, FOREX, INDEXES. You can change this array to be anything you want. The only thing that is special is "ALL". So for instance, ["ALL","NSE","BSE"] would be another example.

Suggested Search

The system was designed to support a typical suggested search. For most firms, with potentially thousands of equity symbols, the text search is done on the server side. What happens is that each time a customer types a letter, the textCallback function is called. Most firms would then make an ajax query back to the server and retrieve the list of matching symbols (by calling displayResults. If you implement this way then it should work as you expect.

Suggested Search

If you hardcode the symbol list then the code that normally would be on the server side (text match) would need to be done in the browser. If you are supporting thousands of securities, hardcoding isn't going to be an option. You'll definitely need a server call to return the result set.

Implementation details

The main HTML file in your package (stx-advanced.html, stx-basic.html, etc) will contain the code used to initialize the default behavior of the UI (runSampleUI()), including the search engine.

The STX.LookupWidget requires to be initialized with a configuration object. This is where you let the widget know how to find the list of symbols and waht to do once a user selcts one.

This is what the configuration looks like:

var config = {
    input: $$$("#symbol"), // input field from the GUI
    textCallback: textCallback, // Function used to do lookup - If you don't have a symbol lookup then just leave this blank
    selectCallback: selectCallback, // Function used to act on the symbol selected. Normally used to create a new chart with the new symbol.
    filters: ["ALL"], // Names of the filters you are supporting
    allowSymbolObject: false, // set to true to return a symbol object from the search insted of just a symbol string
    stx: stxx // the chart object -- needed for translations
};

You have not setup the newChart() call in selectCallback() to load the data form your file in the same way your initial newChart() call in displayChart does. Once you make that change, the data for the second symbol will load.

Also, to get the search drop down to work, you can replace the 'textCallback' function in the config file from 'textCallbackChartIQ' to your own function that returns the list of available symbols. You can start with 'sampleTextCallback' and make changes there to get your symbol list displayed. You can just replace the sample symbols in there with the 2 symbols you have for now (TUT, TUF) to see it working.

var stxLookupWidget = new STX.LookupWidget(config); stxLookupWidget.init();

STX.LookupWidget

In there there will be 3 important components you need to review and configure

1 - main configuration object to initialize the search engine

    var config={} 
    The only item you would want to modify is the supported filters
        filters:["ALL","STOCKS","FOREX","INDEXES"]

2 - secondary configuration object to initialize the symbol comparison search engine

    var config2={}
    The only item you would want to modify is the supported filters. You may want onlky support a smaller group of filters for your comparisons.
        filters:["ALL","STOCKS","FOREX","INDEXES"]

3 - symbol lookup function (textCallback) used to gather the requested data from your engine.

The following sample code illustrates how the lookup function can be created:

    /**
    * This function gathers and returns the list of symbols to be displayed on the screen
    * @param  {object}         that       STX.LookupWidget
    * @param  {string}         txt     the symbol or description to search for ( or part of it as it is being typed)
    * @param  {string}         filter    the filter value (currently supporting "ALL","STOCKS","FOREX","INDEXES")
    * @param  {boolean}     clicked false means user typed in input box, true means user clicked in input box
    * @return {Array}       Returns an array of objects each in the following format = {symbol:"symbol",description:"description", exchange:"exchange"} 
    * @memberOf STX.LookupWidget
    */

    function textCallback(that, txt, filter, clicked){
        if(clicked) that.config.input.value="";

            // If you will be using your own lookup engine, here is sample code that demonstrates the format which your lookup module should return

            var sampleResults=[
                {symbol:"S",description:"Sprint Corporation", exchange:"NYSE"},
                {symbol:"SPY",description:"SPDR S&P 500 ETF", exchange:"NYSE"},
                {symbol:"^GSPC",description:"SPDR S&P 500", exchange:""},
                {symbol:"CSCO",description:"Cisco Systems, Inc.", exchange:"NASDAQ"},
                {symbol:"SWKS",description:"Skyworks Solutions Inc.", exchange:"NASDAQ"},
                {symbol:"GLD",description:"SPDR Gold Shares", exchange:"NYSE"},
                {symbol:"WMT",description:"Wal-Mart Stores Inc.", exchange:"NYSE"},
                {symbol:"SLV",description:"iShares Silver Trust", exchange:"NYSE"},
                {symbol:"DDD",description:"3D Systems Corp.", exchange:"NYSE"},
                {symbol:"GS",description:"The Goldman Sachs Group, Inc.", exchange:"NYSE"},
                {symbol:"^USDCAD",description:"US Dollar Canadian Dollar", exchange:"FX"},
                {symbol:"^EURUSD",description:"Euro US Dollar", exchange:"FX"}
            ];

            // This is a sample filtering function for sampleResults above.
            // You may want to do your filtering within own search method
            (function(filter){
                if(!filter || filter=="") return;
                var elems={
                    "STOCKS":[0,1,3,4,5,6,7,8,9],
                    "FOREX":[10,11],
                    "INDEXES":[2]
                };
                if(!elems[filter]) return;
                var myResults=[];
                for(var i=0;i<elems[filter].length;i++){
                    myResults.push(sampleResults[elems[filter][i]]);
                }
                sampleResults=myResults;
            })(filter);

            // Display the results in the drop down
            that.displayResults(sampleResults); 

            /*
            // this is sample code for enabling simple suggestive search using an ajax query
            // have your server return a JSON object in the format of sampleResults above
            function processSearchResults(that){
              return function(status, results){
                if(status==200){
                  that.displayResults(JSON.parse(results));
                }
              };
            }
            var url="http://yourdomain.com?search=" + txt + "&filter=" + filter;
            STX.postAjax(url, null, processSearchResults(that));
            */
    }

Once this is done, your search engines will be fully functional.

Using your own search engine with the chart

If you already have a symbol search engine you can replace the built in functionality with yours as follows:

1- disable the symbol input box from the chart GUI by setting the display to none:

<div class="stx-search" style="display:none">
    <input type="text" id="symbol" name="symbol" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="off" class="stx-input-field">
</div>

2- When a symbol is selected on your symbol engine, call the chart container with the selected symbol in a query string as follows:

http:/your_url.com/stx-advanced.html?symbol=intc

This will load a new chart with the selected symbol.

If you want to have your symbol search engine also used for the Compare button (Advanced package only), you would similarly disable the built in compare button by setting the display to none as follows :

<div class="stx-btn stx-menu-btn stxMenu stx-collapsible" id="menuWrapperCompare" style="display:none"><span>Compare</span><em></em>

Then you would need add our own button pointing to your symbol search. When a user selects a symbol from you symbol search, you would then need to call the following to add the comparison series to the chart:

STX.Comparison.add(stxx, symbol);

The user will be able to remove the series by right clicking on the it at any time.

Note: unless you are completely replacing the provided GUI, do not remove the inputs/buttons, but instead set their display to none as indicated.