HTML Widget: How to Create a Stock Widget

Version 3

    Introduction

    If you want to add a near real-time stock widget to your site, copy, modify, and paste this into an HTML widget. The code uses the Jive native jQuery library to pull JSONP data from yahoo using their YQL API. This widget is written to work with only 1 stock symbol, if requested I can modify to pull in multiple symbols.

     

    Updates

    10/3/2012 - Uploaded stock_ticker_version_5.0.4_6.0.0.js which is a stock ticket that works in Jive 6.0.0 and should work in Jive 5.0.4.

     

    Features

    • Enter your own stock symbol
    • Near real-time data pulled for each browser client
    • Utilizes Yahoo's YQL services to pull finance data
    • Jive native jQuery library calls YQL service so no additional javascript libraries are required
    • Refresh the content by clicking on the widget header
    • The ability to customize to add 80+ data elements about your stock (See attached YQL field list)

     

    stock_widget.png

    Read Mode

    stock_widget_edit.png

    Edit Mode

     

     

    Assumptions

    This document assumes that you have permission to create HTML widgets within a group, project or community. You can follow the instructions for Embedded Javascript and HTML widgets in order to change your permissions.

     

    This has been tested on Jive version 4.0.15, 4.5.4 and Jive 5. Browsers tested on are IE7, IE8, Firefox 3.6, Safari, Chrome.

     

    Steps to Configure for your site

    *Please do this in a test environment first and/or in a group/space that is not the homepage. Whenever you use javascript within HTML widgets you always run the risk of not being able to edit the dashboard layout due to conflicts.*


    • Download the attached file
    • Edit the file in a text editor
    • Near the top of the file, edit the javascript variable named "yourStockSymbol" and add the symbol that you wish
    • Save the file, select all, and copy to your clipboard
    • On the space/group you wish to add the widget, create a new HTML widget
    • Enter a title, and paste the code into the HTML body
    • Select Yes to hide the header and border and save the widget
    • The code is disabled in edit mode, so you will need to publish to see the results

     

    Further Customizations

    Attached is a list of all the fields that are returned in the JSON request. If your familiar with jQuery and HTML you can use this list of fields to customize the data presented within the widget. Reply to this document if you have any feature requests.