1

Just want to display stock price of my organization through Yahoo finance or other options on the home page of a site.

For example,

MSFT

Format is MSFT - Price, up/down, %. This should be a continuous feed and should get updated.

Please suggest all available options.

  • I could think of a webpart.. – Arun Vinoth Dec 28 '17 at 20:30
  • Which webpart, Sir? – AXA240778 Dec 28 '17 at 20:41
5
+50

I was able to put together a small POC which pulls stock price and also refreshes at a predefined time interval. Thic POC is created by referring to jquery stockquotes plugin.

Please add a content editor webpart to your page and paste the HTML code given below in it. Use the javascript code to create a JS file and upload it in some library. Do remember to update the JS file path in HTML otherwise it won't work.

Below is the code snippet for reference.

HTML:

<html>
  <head>    
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="myStockCode.js"></script>
    <style>
    .StockName{font-size:1.5em;}
    .StockLastPrice{font-size:1.2em;}
    </style>
  </head>
  <body>

    <h2>Live Stock Price</h2>
    <br/>

    <div class="StockContainer">    
      <div class="StockName"></div>

      <span class="StockLastPrice"></span>
      <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2cHgiIGhlaWdodD0iMjZweCIgdmlld0JveD0iMCAwIDI2IDI2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEyLjUsMyBMNCwxNSBMMTAuMjgwMjg1NywxNSBMMTAuMjgwMjg1NywyMi41IEwxNC43MTk3MTQzLDIyLjUgTDE0LjcxOTcxNDMsMTUgTDIxLDE1IEwxMi41LDMgTDEyLjUsMyBaIiBmaWxsPSIjM0Q5NDAwIj48L3BhdGg+Cjwvc3ZnPg==" alt="PriceUp" class="Up" style="display:none;">
      <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2cHgiIGhlaWdodD0iMjZweCIgdmlld0JveD0iMCAwIDI2IDI2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEyLjUsMyBMNCwxNSBMMTAuMjgwMjg1NywxNSBMMTAuMjgwMjg1NywyMi41IEwxNC43MTk3MTQzLDIyLjUgTDE0LjcxOTcxNDMsMTUgTDIxLDE1IEwxMi41LDMgTDEyLjUsMyBaIiBmaWxsPSIjREQ0QjM5Ij48L3BhdGg+Cjwvc3ZnPg==" alt="PriceDown" class="Down" style="transform:rotate(180deg);display:none;">
      <span class="StockChange"></span>
      <span class="StockPercentChange"></span>
    </div>    
  </body>
</html>

Javascript(myStockCode.js):

$(document).ready(function () {

    getStockPrice();        
    setInterval(getStockPrice,5000);
  });

  var EndPoint = 'http://dev.markitondemand.com/Api/v2/Quote/jsonp';

  function getStockPrice () {
    return $.ajax({
      url: EndPoint,
      data: {symbol: "MSFT"},
      dataType: 'jsonp',
      method: 'GET'
    }).then(function (response) {
        $(".StockName").text(response.Name);
        $(".StockLastPrice").text(response.LastPrice);
        $(".StockLastPrice").append("<sub>USD</sub>");

        if(response.Change<0)
        {
            $(".Down").show();
            $(".StockChange").css("color","red");
            $(".StockPercentChange").css("color","red");
        }
        else
        {
            $(".Up").show();
            $(".StockChange").css("color","green");
            $(".StockPercentChange").css("color","green");

        }
        $(".StockChange").text(Math.round(response.Change*100)/100);
        $(".StockPercentChange").text("("+Math.round(response.ChangePercent*100)/100+")");          
    });
  }

The end result looks like below:

enter image description here

Please let me know if it serves your purpose. You may need to update the CSS for better look and feel.

3

You could try this, I don't expect this will be your final answer, but hopefully it will get you on the right path or help another user to find an answer for you. Create a new page, edit it and insert a web part.

When I edit my homepage I see we have a web part for a clock and weather. You would like to have a stock ticker, but it's similar.

enter image description here

I actually have the clock_weather web part as what looks like a pre-installed web part option. I imagine you would need to download a 'stock ticker app' and save it in the appropriate place in Sharepoint. This link might help a bit with doing that.

Once Sharepoint knows where to find your new stock ticker App, you would be able to edit your page to select the app and insert it as a web part in to your page.

insert web part

Your stock ticker app should be configurable from your Sharepoint page (this is the case with my weather_clock app in any case), I imagine your could configure the stock you wish to display.

Configure app

BTW - I am using SP 2013, I don't know whether that differs much to SP Online.

Additional research links: GitHub link

One from our beloved SP SE

Another instruction, detailed, using coding.

0

Since you already have the REST endpoint. You can add them inside a JS and use it masterpage or page layout.

Ideally get the stock information and save it in a cookie with 5 min(based on your frequency) expiry time. Load data from there otherwise initiate a new call.

0

Basically you can add a Script Editor webpart in your website homepage, make a query to Yahoo Finance API & show the ticker. This walkthrough helps you.

On refreshing the content timely, you may have to use setTimeout to reload or reissue the web request.

  • Hello Arun, I believe Yahoo doesn't support YQL any more coz, when i Query it returns with a null value. – AXA240778 Jan 2 '18 at 16:23
  • html table is no longer supported it seems pls use htmlstring. Refer this: stackoverflow.com/q/44431212/7920473 – Arun Vinoth Jan 2 '18 at 16:31
  • For Example, select * from yahoo.finance.quotes where symbol = "AXP". I am not passing a specific URL. How to implement it here? – AXA240778 Jan 2 '18 at 18:22
0

Use ALPHA VANTAGE API to achieve it.

First, get the API key from here: https://www.alphavantage.co/support/#api-key

Then use the API like this to get the json data.

https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=MSFT&interval=1min&apikey=demo

API Documentation: https://www.alphavantage.co/documentation/

  • Thanks @LZ-WX, This looks good, but it doesn't display the actual stock price. How to display the actual stock price? – AXA240778 Jan 2 '18 at 18:13
  • Check ALPHA VANTAGE: alphavantage.co – LZ_MSFT Jan 3 '18 at 7:11
  • I like the JSON output, But can you please suggest, how should i display this JSON result on a page, and then have a continuous feed? Like i have referred in the image. – AXA240778 Jan 8 '18 at 2:37
  • you could implement web workers that update the webpart or script editor constantly: w3schools.com/html/html5_webworkers.asp – Mike Jan 8 '18 at 19:33
  • could this help, it's a link for RSS feeds: social.technet.microsoft.com/Forums/office/en-US/… – Tally Jan 11 '18 at 14:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.