HTML Widget: How to Create a Stock Widget

Document created by deesteel on Oct 31, 2011Last modified by deesteel on Oct 3, 2012
Version 3Show Document
  • View in full screen mode

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.

Outcomes