ChartIQ Blog

Posted on by Sidd

Easy Interaction Between Our Widgets, Our Portal and Your Site

In my previous blog post, I mentioned the interaction between our widgets and our portal in our demo website.

Specifying a custom URL

For the sidebar and the carousel widget, all that is needed is a URL on your site for the particular ticker. For example, if the page for Google is at http://www.example.com/GOOG, you would use http://www.example.com/{SYMBOL} as the custom URL parameter in the widget settings.

You can see this functionality in action on our newsdemo site. Just click on the chart title in the sidebar or in the carousel.

Here is a widget setup to go to Yahoo! Finance:

If you are using dynamically generating the widgets using a script, like described in my previous blog post, all you need to do is set the customURL parameter:

settings.customURL = 'http://www.example.com/{SYMBOL}';

If you are using our portal research page as your page for individual stocks, it only takes a little simple javascript. The script below detects if a symbol is passed to the URL. If yes, it shows the overview page for that symbol in the portal frame. If not, it shows the markets page in the portal frame.

<script>
         // Function to get query parameters
         var ciq_qs = function (query) {
            var qsParm = {};
            if (!query) query = window.location.search.substring(1);
            var parms = query.split('&');
            for (var i = 0; i < parms.length; i++) {
                var pos = parms[i].indexOf('=');
                var key;
                if (pos > 0) {
                    key = parms[i].substring(0, pos);
                    qsParm[key] = parms[i].substring(pos + 1);
                } else {
                    key = parms[i];
                    qsParm[key] = null;
                }
            }
            return qsParm;
        }
        var params = ciq_qs(); 
        if (params['sym']) { // If we have a symbol, go to overview for that symbol 
            page = 'overview'; 
        } else { // If not, go to the markets overview page. 
            page = 'markets'; 
            params['sym']='AAPL'; 
        } 
        var frame = $('#marketsFrame'); 
        var url = 'https://globalwidgets.xignite.com/YOURACCOUNT/YOURSITE/' + page + '.html?sym=' + params['sym']; 
        frame.attr('src', url);
</script>

 

To see this script in action, visit a stock page on our newsdemo site.